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设置

回答

相关问题