1
Je suis confronté à un problème lors de l'utilisation de FabricJS et Angular2 où en mode de dessin libre, tout objet que je dessine finira par être décalé vers la gauche ou vers le haut. Par exemple, je commencé à dessiner cette ligne verticale à la toile: See the location of the line during mouse downTissu JS + Angular2: Objets décalés après la souris en mode dessin libre
Quand je suis fait, la fin ligne résultante jusqu'à décalée vers le haut comme dans cette image: After mouse up, the line shifted to left
J'ai recherché à travers google mais il semble très peu ou presque aucun ne rencontre ce problème. Et cela n'arrive qu'avec le mode dessin libre. Y at-il quelque chose que je fais mal avec la façon dont j'ai mis en place la toile ou le tissu js?
Ci-dessous mon modèle HTML ainsi que le code du composant:
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>