我在 Fabricjs Canvas 上遇到了两天的事件问题。我猜这是关于fabricjs的。我发现了问题,但我不明白为什么这是一个问题。
我有一个鼠标事件和两个调用函数clip1和clip2的按钮(单击事件)。
- 鼠标事件正常工作,直到我通过button1调用clip1。
- 仅调用一次clip1后,它就适用于每个按下事件。
- 通过button2调用的clip2函数没有问题。
clip1和clip2之间的区别:clip1使用this.canvas而clip2创建一个新的 Canvas 。似乎按钮1的点击事件将自身注册到 Canvas 的所有事件中。就像一个错误,是吗?
.HTML
<canvas id="c" width="800" height="800" style="border:1px solid #000"></canvas>
<img src="../../clips/kupurFirst.jpg" id="my-image1" hidden>
<button (click)="clip1()">Clip1 </button>
<button (click)="clip2()">Clip2</button>
.TS
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-fabric',
templateUrl: 'fabric.component.html',
styleUrls: ['fabric.component.css']
})
export class FabricComponent implements OnInit {
public canvas: any;
public src: string;
constructor() { }
ngOnInit() {
this.canvas = new fabric.Canvas('c');
this.src = "../../clips/kupurSecond.jpg";
loadCanvas(this.src, this.canvas);
// Works normally until click event (clip1) fires
this.canvas.on('mouse:down', function (event) {
console.log("Down");
});
}
// Problem with this.canvas
public clip1() {
loadCanvas(this.src, this.canvas);
this.canvas.clipTo = function (ctx) {
console.log("clip1");
};
}
// No problem with new canvas element
public clip2() {
var canvas = new fabric.Canvas('c');
loadCanvas(this.src, canvas);
canvas.clipTo = (ctx) => {
console.log("clip2");
};
}
}
var loadCanvas = (src: string, canvas: any) => {
fabric.Image.fromURL(src, (oImg) => {
canvas.add(oImg);
}, { hasControls: false, selectable: false, evented: false, strokeDashArray: [2, 2], opacity: 1 });
}
最佳答案
我找到了解决方案。看起来并不完美,但对我有用:
this.canvas.clipTo = null; // Prevents fire of clipTo function at every event.
我将此行放入一个新按钮(函数)中,并将其命名为“undo”。
关于javascript - Fabricjs 中的每个事件都会触发按钮单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37749573/