Angular2 + FabricJS + HammerJS setup

Question

私は今までhammerjsとfabricjsと一緒に走っているangular2プロジェクトを取得しようとしています。

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

私app.component.html

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

app.component.css

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

は現在、それはキャンバス」で例外を投げています.on "は現在、fabric2sおよび/またはhammerjでangular2を効果的に使用する方法をオンラインで示している例は見当たりませんでした。

Answer 1

あなたのonInit関数の中にcanvas.on（）{...}を置くべきです。 つまり、コンポーネントのinitでは、キャンバスがクリックされたとき、または監視したい他のイベントが発生したときのコールバックを「登録」します。