HTML Canvas中的可拖动/可缩放图像，适用于移动触摸浏览器(Android/iOS)
我正在做一个在浏览器中显示一些CAD绘图的项目。该网站完美地工作在桌面浏览器，现在我需要启用移动使用(平板电脑)。
我的绘图是通过画布绘图调用(context.lineTo，...)从数据创建的，我通过检测onMouseDown/onMouseMove/onMouseUp JS事件和鼠标滚轮缩放事件来执行拖动。
在移动设备上，这些都不起作用(可能是因为它们不会触发我正在捕捉的事件)。有什么简单的方法可以将触摸屏滑动实现为拖动，将收拢实现为缩放？
谢谢你的帮忙!
回答 2
Stack Overflow用户
发布于 2013-05-31 18:26:19
你应该看看KineticJS (http://kineticjs.com)。它还支持移动设备的拖放画布。
有关教程，请参阅以下链接：
http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/
Stack Overflow用户
发布于 2015-12-04 02:41:30
如果你想使用现有的jQuery插件，你应该看看Hammer.js。这是一个非常好用的库。然而，如果你更喜欢纯Javascript解决方案，你可能想看看这个：https://github.com/rombdn/img-touch-canvas我发现它对于使用触摸事件在画布上拖动和缩放图像非常有用。
此外，这是我的解决方案，它非常简单和容易，但它是使用纯Javascript的唯一可拖拽的解决方案：
HTML：
<canvas id="canvas"></canvas>JS：
var can = document.getElementById("canvas");
can.addEventListener("touchstart", ctxTouchStart, false);
can.addEventListener("touchmove", ctxTouchMove, false);
can.addEventListener("touchend", ctxTouchEnd, false);
var oX, oY, dX, dY, iX, iY;
iX = 0; iY = 0;
function ctxTouchStart(e) {
if (!e)
var e = event;
e.preventDefault();
mouseIsDown = 0;
oX = e.targetTouches[0].pageX - canvas.offsetLeft;
oY = e.targetTouches[0].pageY - canvas.offsetTop;
}
function ctxTouchMove(e) {
if (!e)
var e = event;
e.preventDefault();
var canX = e.targetTouches[0].pageX - canvas.offsetLeft;
var canY = e.targetTouches[0].pageY - canvas.offsetTop;
dX = canX - oX;
dY = canY - oY;
/* redraw img on canvas
* where -(iX + dX) is the startX
* and -(iY + dY) is the startY
*/
reDrawImageOnCanvas(can, img, -(iX + dX), -(iY + dY));
}
function ctxTouchEnd(e) {
if (!e)
var e = event;
e.preventDefault();
iX += dX;
iY += dY;
}这样，您的图像就可以顺利地拖过画布。然而，我不知道如何做缩放部分，所以我在网上搜索，发现https://github.com/rombdn/img-touch-canvas很有用，于是转而使用这个。希望我的回答能有所帮助。
https://stackoverflow.com/questions/16854370
复制相似问题
腾讯云开发者
