我应该如何在 angular 的 fabric js 中实现事件处理。通常它不起作用

Question

我是Angular中使用fabricjs的新手。我想使用fabric.js中使用'on'方法提供的事件处理功能。但不知何故，它不起作用。有人能帮忙吗?我使用下面的代码:

canvas: fabric.Canvas;
rect: fabric.Rect;
constructor(private zone: NgZone) { }
ngAfterContentInit() {
this.canvas = new fabric.Canvas('canvas', {
backgroundColor: 'lightgrey', width: 400, height: 400
});
this.rect = new fabric.Rect({
width: 100, height: 100, angle: 45, left: 100, top: 100, fill: 'white',
borderColor: 'orange', selectable: true,
})
this.canvas.add(this.rect)
const obj = this.rect.on('mouse:down', (e) => {
console.log('mouse:down', e);
})
}

Answer 1

您真的需要将事件处理程序附加到对象上吗?

你可以这样做:

this.canvas.on('selection:created', (e) => {
console.log(e);
});

e将是您选择的对象。

Answer 2

试试这个

@HostListener("mousedown", ["$event"])
OnMouseDown(evt: MouseEvent) {
console.log("MOUSE DOWN ", evt.button)
// 0 for left, 1 for middle, 2 for right 
if (evt.button === 0) {
//custom code on left click. 
}
}