Angular2 + FabricJS + HammerJS設置

我正在嘗試將angular2項目與hammerjs和fabricjs一起運行，目前爲止還沒有運氣。Angular2 + FabricJS + HammerJS設置

我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「，目前還無法在線看到任何示例，顯示如何有效地使用angular2與fabricjs和/或hammerjs。

來源

2017-04-12 Aeseir

試過聲明var canvas：any？ –

@ParthGhiya不會改變結果。仍然得到ReferenceError：畫布沒有定義 – Aeseir

這個怎麼樣？ in template @ViewChild（「parth」）canvas：ElementRef in component。從角鐵芯導入ElementRef。 –

您應該將canvas.on（）{...}放入您的onInit函數中。也就是說，在組件init中，當您單擊畫布或您要監視的任何其他事件時，「註冊」您的回調。

來源

2017-05-13 10:21:07 Ziv

Angular2 + FabricJS + HammerJS設置

回答

相關問題