Fabricjs 中的每个事件都会触发按钮单击事件答案

【问题标题】：Button click event fires with every event in fabricjsFabricjs 中的每个事件都会触发按钮单击事件
【发布时间】：2016-10-11 12:00:30
【问题描述】：

我在 fabricjs 画布上的事件有两天的问题。我想这是关于fabricjs的。我发现了问题，但我不明白为什么会出现问题。

我有一个鼠标事件和两个按钮（单击事件）调用函数clip1 和clip2。

鼠标事件正常工作，直到我通过 button1 调用 clip1。
只调用一次 clip1 后，它就可以处理每个 down 事件。
通过 button2 调用的 clip2 函数没有问题。

clip1 和clip2 的区别：clip1 使用this.canvas，clip2 创建一个新的画布。似乎 button1 单击事件将自己注册到画布的所有事件中。像个虫子吧？

.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 });

}

【问题讨论】：

澄清一下——点击clip1按钮后，所有鼠标点击事件（甚至不在画布上）都会导致“向下”打印到控制台？
没有。如果我创建一个新的画布元素已经没有问题了。我尝试像 (this.canvas.off('mouse:down');) 一样关闭画布，但单击事件仍然会随着向下触发。很奇怪。

标签： javascript events typescript angular fabricjs

【解决方案1】：

我找到了解决方案。看起来并不完美，但对我有用：

this.canvas.clipTo = null; // Prevents fire of clipTo function at every event.

我把这一行放到一个新的按钮（函数）中，命名为“undo”。

【讨论】：