[英]Angular2 + FabricJS + HammerJS setup
我正在尝试使Hammer2项目与Hammerjs和Fabricjs一起运行,到目前为止还没有运气。
我的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;
}
目前,它在“ canvas.on”上引发了异常,还没有能够在线看到任何示例,这些示例当前显示了如何在fabricjs和/或hammerjs中有效地使用angular2。
您应该将canvas.on(){...}放在onInit函数中。 即在组件初始化时,您为画布单击或要监视的任何其他事件“注册”您的回调。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.