버튼 클릭 이벤트는 fabricjs의 모든 이벤트와 함께 발생합니다.

이틀 동안 fabricjs 캔버스의 이벤트에 문제가 있습니다. fabricjs에 관한 것 같습니다. 문제를 발견했지만 왜 문제인지 이해할 수 없습니다.

마우스 이벤트와 clip1 및 clip2 함수를 호출하는 두 개의 버튼 (클릭 이벤트)이 있습니다.

1. button1을 통해 clip1을 호출 할 때까지 마우스 이벤트가 정상적으로 작동합니다.
2. clip1을 한 번만 호출하면 모든 다운 이벤트에서 작동합니다.
3. 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 });

}