FabricJS触摸平移/缩放整个画布 [英] FabricJS Touch Pan/Zoom Entire Canvas
问题描述
我需要在FabricJS画布上启用触摸缩放/平移。有一些库可以在图像上执行此操作(请参见 pinch-zoom-canvas )或通过鼠标单击事件(请参见此小提琴),但我似乎无法得到正确的'touch:gesture'事件。
I need to enable touch zoom/panning on a FabricJS canvas. There are libraries that will allow this behavior on an image (see pinch-zoom-canvas) or via mouse-click events (see this Fiddle) but I can't seem to get the 'touch:gesture' events hooked up properly.
我已经建立了启用手势的库(因此此FabricJS 演示在本地适用于我),但我不知道从哪里开始将手势与工作提琴结合起来。
I've built the library with gestures enabled (so this FabricJS demo works locally for me), but I don't know where to start with combining the gestures with the working fiddle.
我尝试了以下代码变体:
I tried variations of code like this:
canvas.on({
'touch:gesture': function() {
var text = document.createTextNode(' Gesture ');
info.insertBefore(text, info.firstChild);
// Handle zoom only if 2 fingers are touching the screen
if (event.e.touches && event.e.touches.length == 2) {
// Get event point
var point = new fabric.Point(event.self.x, event.self.y);
// Remember canvas scale at gesture start
if (event.self.state == "start") {
zoomStartScale = self.canvas.getZoom();
}
// Calculate delta from start scale
var delta = zoomStartScale * event.self.scale;
// Zoom to pinch point
self.canvas.zoomToPoint(point, delta);
}
},
'touch:drag': function(e) {
panning = true;
var text = document.createTextNode(' Dragging ');
info.insertBefore(text, info.firstChild);
if (panning && e && e.e) {
debugger;
var units = 10;
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
}
panning = false;
},
'touch:longpress': function() {
var text = document.createTextNode(' Longpress ');
info.insertBefore(text, info.firstChild);
}
});
但是当我在iPhone / iPad上测试时什么也没发生。
But nothing happens when I test on iPhone/iPad.
推荐答案
缩放是一个愚蠢的错误,我没有在函数参数中包含该事件。下面的代码适用于捏/缩放和点击/拖动。
The pinch to zoom was a stupid mistake, I hadn't included the event in the function parameter. The code below is working for pinch/zoom and tap/drag.
canvas.on({
'touch:gesture': function(e) {
if (e.e.touches && e.e.touches.length == 2) {
pausePanning = true;
var point = new fabric.Point(e.self.x, e.self.y);
if (e.self.state == "start") {
zoomStartScale = self.canvas.getZoom();
}
var delta = zoomStartScale * e.self.scale;
self.canvas.zoomToPoint(point, delta);
pausePanning = false;
}
},
'object:selected': function() {
pausePanning = true;
},
'selection:cleared': function() {
pausePanning = false;
},
'touch:drag': function(e) {
if (pausePanning == false && undefined != e.e.layerX && undefined != e.e.layerY) {
currentX = e.e.layerX;
currentY = e.e.layerY;
xChange = currentX - lastX;
yChange = currentY - lastY;
if( (Math.abs(currentX - lastX) <= 50) && (Math.abs(currentY - lastY) <= 50)) {
var delta = new fabric.Point(xChange, yChange);
canvas.relativePan(delta);
}
lastX = e.e.layerX;
lastY = e.e.layerY;
}
}
});
if / then语句的绝对〜50px是为了避免拖动距离导致画布的最后一点很远跳。也暂停了摇摄以能够独立移动对象。在 github问题线程中找到了捏/缩放代码。
The absolute ~50px if/then statement is to avoid drags far away from the last point causing the canvas to jump. Also paused the panning to be able to move object independently. Pinch/zoom code was found in a github issues thread.
这篇关于FabricJS触摸平移/缩放整个画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!