Angular2 + FabricJS + HammerJS setup

Question

我正在尝试让angular2项目与hammerjs和fabricjs一起运行，但到目前为止没有运气。

My App.component.ts

    import { Component, OnInit } from '@angular/core';
declare var fabric: any;
let canvas: any;
    @Component({
      selector: 'ca-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
    canvas = new fabric.Canvas('drawing_layer');
    const backImage = new Image();
    backImage.src = 'http://lorempixel.com/600/600/sports/';
    backImage.onload = () => {
      canvas.setBackgroundImage(backImage.src, canvas.renderAll.bind(canvas), {
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0,
      });
    };
  }
    }
canvas.on({
  'mouse:down': (ev) => {
    const pointer: any = canvas.getPointer(ev.e);
    const circle: any = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 5,
      strokeWidth: 5,
      stroke: 'red',
      selectable: false,
      originX: 'center', originY: 'center',
    });
    canvas.add(circle);
  },
  'object:selected': (ev) => {
    console.info('object selected');
  },
  'selection:cleared': (ev) => {
console.info('selection cleared');
  },
});
let hammertime = new Hammer(document.getElementById("canvas-wrapper"));
hammertime.get("pinch").set({ enable: true });
hammertime.get("pan").set({ direction: Hammer.DIRECTION_ALL, threshold: 100 });
hammertime.on("pan", (ev) => {
    let fDeltaX: number;
    let fDeltaY: number;
    if (ev.pointerType === "mouse") {
        fDeltaX = ev.deltaX / 100;
        fDeltaY = ev.deltaY / 100;
    } else {
        fDeltaX = ev.deltaX / 10;
        fDeltaY = ev.deltaY / 10;
    }
    if (pageState.panning) {
        canvas.relativePan(new fabric.Point(Math.round(fDeltaX), Math.round(fDeltaY)));
    }
});
hammertime.on("pinch", (ev) => {
    canvas.setZoom(canvas.getZoom() * (ev.scale / 100));
});

我的应用程序组件.html

<div id="canvas-wrapper">
  <canvas id="drawing_layer"></canvas>
</div>

app.component.css

.upper-canvas {
  width: 100% !important;
  height: 100% !important;
}

目前

它在"canvas.on"上抛出异常，目前无法在网上看到任何示例，显示如何有效地将 angular2 与 fabricjs 和/或 hammerjs 一起使用。

Answer 1

你应该把 canvas.on(({...} 放在你的 onInit 函数中。即在组件初始化时，您可以"注册"您的回调，以便在单击画布或要监视的任何其他事件时。