我应该如何在 angular.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. 
    }
}