Question

我在使用FabricJS和Angular2时遇到一个问题，在自由绘图模式下，无论我绘制的任何对象最终都会向左或向上移动。例如，我开始在画布上绘制这条垂直线： See the location of the line during mouse down

当我完成后，结果行最终向上移动，如下图所示： After mouse up, the line shifted to left

我通过谷歌搜索过，但似乎很少或几乎没有人遇到过这个问题。这只发生在自由绘图模式下。我设置画布或布料js的方式有什么问题吗？

下面是我的HTML模板以及组件代码：

import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
declare var fabric: any;

@Component({
  selector: 'app-fabric-canvas',
  templateUrl: './fabric-canvas.component.html',
  styleUrls: ['./fabric-canvas.component.css']
})
export class FabricCanvasComponent implements OnInit, OnChanges, AfterViewInit {
  public canvas: any;
  @ViewChild('canvas') canvasRef: ElementRef;
  @ViewChild('fileInput') fileInput: ElementRef;
  @ViewChild('divWrapper') divWrapper: ElementRef;
  @Input() public color: string;
  @Input() public id: string;
  private selectedFile: File;
  private fileReader: FileReader = new FileReader();
  public disableModifyObjectButton = true;
  public disableAddImageButton = true;
  public textColor = 'black';
  public selectedObject: any;
  public pencilBrush: any;
  public svg: string;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges() {
  }

  ngAfterViewInit() {
    if (!this.canvas) {
      this.canvas = new fabric.Canvas(this.id);
      this.canvas.selection = false;
      this.canvas.preserveObjectStacking = true;
      this.pencilBrush = new fabric.PencilBrush(this.canvas);
      this.canvas.freeDrawingBrush = this.pencilBrush;
      this.canvas.freeDrawingBrush.color = 'red';
      this.canvas.freeDrawingBrush.width = 10;
      // this.canvas.isDrawingMode = true;
      this.canvas.on('object:selected', (object) => {
        this.selectedObject = object.target;
        this.disableModifyObjectButton = false;
      });
      this.canvas.on('selection:cleared', () => {
        this.selectedObject = null;
        this.disableModifyObjectButton = true;
      });
      const height = this.divWrapper.nativeElement.offsetWidth * 1.33333;
      this.canvas.setWidth(this.divWrapper.nativeElement.offsetWidth);
      this.canvas.setHeight(height);
    }
  }

  fileSelected() {
    if (this.fileInput.nativeElement.files.length) {
      this.disableAddImageButton = false;
    } else {
      this.disableAddImageButton = true;
    }
  }

  onColorChange() {
    if (this.selectedObject) {
      this.selectedObject.setColor(this.selectedObject.fill);
      this.canvas.renderAll();
    }
  }

  addImageButton() {
    if (this.fileInput.nativeElement.files.length) {
      this.selectedFile = this.fileInput.nativeElement.files[0];
      this.fileReader.readAsDataURL(this.selectedFile);
      this.fileReader.onload =  () => {
        this.fileInput.nativeElement.value = null;
        this.disableAddImageButton = true;
        this.addImageToCanvas(this.fileReader.result);
      }
    }
  }

  toggleDrawingMode() {
    this.canvas.isDrawingMode = !this.canvas.isDrawingMode;
  }

  addTextToCanvas(text: string) {
    const textObject = new fabric.IText(text, {
      top: 10, left: 10, fill: 'black'
    });
    this.canvas.add(textObject);
  }

  addImageToCanvas(dataUrl: string) {
    fabric.Image.fromURL(dataUrl, img => {
      this.canvas.add(img);
    }, {
      top: 10, left: 10
    });
  }

  deleteSelectedObjects() {
    if (this.canvas) {
      this.canvas.remove(this.selectedObject);
    }
  }

  bringForwardSelectedObject() {
    if (this.canvas) {
      this.canvas.bringForward(this.selectedObject);
    }
  }

  sendBackwardSelectedObject() {
    if (this.canvas) {
      this.canvas.sendBackwards(this.selectedObject);
    }
  }

  saveToSvg() {
    this.svg = this.canvas.toDataURL();
  }
}

<div class="container-fluid" *ngIf="id">
  <div class="row">
    <div class="col form-group form-inline">
      <input #fileInput class="form-control form-control-sm mr-sm-1"
             (change)="fileSelected()"
             type="file"
             accept="image/png, image/jpeg"/>
      <button class="btn btn-sm btn-primary mr-sm-1" (click)="addImageButton()" [disabled]="disableAddImageButton">Add Image</button>
      <button class="btn btn-sm btn-primary mr-sm-1" (click)="addTextToCanvas('Text Entry')">Add Text</button>
      <button (click)="toggleDrawingMode()">Draw</button>
    </div>
  </div>
  <div class="row">
    <div class="col form-group">
      <button class="btn btn-sm btn-danger btn-block"
              (click)="deleteSelectedObjects()"
              [disabled]="disableModifyObjectButton">Remove</button>
    </div>
    <div class="col form-group">
      <button class="btn btn-sm btn-danger btn-block"
              (click)="bringForwardSelectedObject()"
              [disabled]="disableModifyObjectButton">Bring Forward</button>
    </div>
    <div class="col form-group">
      <button class="btn btn-sm btn-danger btn-block"
              (click)="sendBackwardSelectedObject()"
              [disabled]="disableModifyObjectButton">Send Back</button>
    </div>
    <div class="col form-group" *ngIf="this.selectedObject">
      <select class="form-control form-control-sm"
              [disabled]="!this.selectedObject.text"
              [(ngModel)]="this.selectedObject.fill"
              (change)="onColorChange()">
        <option [value]="'black'" style="background-color: black; color: transparent;">Black</option>
        <option [value]="'red'" style="background-color: red; color: transparent;">Red</option>
        <option [value]="'blue'" style="background-color: blue; color: transparent;">Blue</option>
        <option [value]="'green'" style="background-color: green; color: transparent;">Green</option>
        <option [value]="'white'" style="background-color: white; color: transparent;">White</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div #divWrapper>
        <canvas [id]="id" #canvas></canvas>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col form-group">
      <button class="btn btn-primary" (click)="saveToSvg()">Save to SVG</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img [src]="svg" class="img-fluid">
    </div>
  </div>
</div>

Answer 1

你好这看起来像是在beta7之前的最新结构中的一个bug。更新应解决。

Fabric JS + Angular2：在自由绘图模式下鼠标向上移动的对象

1 个答案: