我需要在 FabricJS 画布上启用触摸缩放/平移。有些库允许在图像上执行此行为(请参阅捏缩放画布 https://github.com/vash15/pinch-zoom-canvas)或通过鼠标单击事件(参见这个小提琴 http://jsfiddle.net/gncabrera/hkee5L6d/5/)但我似乎无法正确连接“触摸:手势”事件。
我已经构建了启用手势的库(所以这个 FabricJS http://fabricjs.com/touch-events演示对我来说在本地工作),但我不知道从哪里开始将手势与工作小提琴结合起来。
我尝试了这样的代码变体:
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 上测试时没有任何反应。
捏合缩放是一个愚蠢的错误,我没有将该事件包含在函数参数中。下面的代码适用于捏合/缩放和点击/拖动。
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;
}
}
});
绝对约 50px if/then 语句是为了避免拖动远离最后一个点导致画布跳跃。还暂停平移以便能够独立移动对象。捏合/缩放代码被发现于github问题线程 https://github.com/kangax/fabric.js/issues/2658.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)