按钮点击事件触发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中的每个事件

回答

相关问题