按鈕點擊事件觸發fabricjs中的每個事件

我在fabricjs畫布上的事件有兩天的問題。我想這是關於fabricjs的。我發現問題，但我不明白爲什麼它是一個問題。按鈕點擊事件觸發fabricjs中的每個事件

我有一個鼠標事件和兩個按鈕（單擊事件），調用函數clip1和clip2。

鼠標事件正常工作，直到我通過button1調用clip1。
經過一次對clip1的調用，它可以處理每個向下事件。
沒有問題，通過button2調用clip2函數。

clip1和clip2之間的區別：clip1使用this.canvas和clip2創建一個新的畫布。看起來像button1點擊事件註冊自己的所有事件的畫布。像一個bug，是吧？

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

}

來源

2016-06-10 Crypto

只是爲了澄清 - 點擊clip1按鈕後，所有鼠標點擊事件（甚至不在畫布上）導致「down」被打印到控制檯？ – baryo

不，如果我創建一個新的畫布元素，就沒有問題了。我試圖像（this.canvas.off（'mouse：down'）;）關閉畫布，但是點擊事件仍然會隨着下來而觸發。奇怪的。 – Crypto

我找到了解決辦法。似乎並不完美，但適用於我：

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

我把這一行放入一個新的按鈕（函數），並將其命名爲「撤消」。

來源

2016-06-14 12:29:14 Crypto

按鈕點擊事件觸發fabricjs中的每個事件

回答

相關問題