1
FabricJSとAngular2を使用しているときに、フリー描画モードで何か描画するオブジェクトが左または上に移動する問題があります。例えば、私はキャンバスで、この垂直線を描き始めに：私はグーグルスルーで検索しましたが、それはそう After mouse up, the line shifted to leftFabric JS + Angular2：フリー描画モードでマウスを上に移動したオブジェクト
： 私が行っていますSee the location of the line during mouse down
、結果の行末までは、この写真のようにシフトアップこの問題にはほとんどまたはまったく遭遇しません。これはフリー描画モードでのみ発生します。私がキャンバスやファブリック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>