Question

我对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 });

}

Answer 1

我找到了解决方案。似乎并不完美但对我有用：

define(["dojo/_base/declare",...], function(declare,...){
    return declare([...], {
        //you module here
    });
});

我将此行放入一个新按钮（功能）并将其命名为＆＃34;撤消＆＃34;。

按钮单击事件将触发fabricjs中的每个事件

1 个答案: