Javascript 适用于移动触摸浏览器（Android/iOS）的HTML画布中的可拖动/可缩放图像

我正在做一个在浏览器中显示一些CAD图形的项目。该网站非常适合桌面浏览器，现在我需要启用移动使用（平板电脑）

我的绘图是通过画布绘图调用（context.lineTo，…）从数据创建的，我通过检测onMouseDown/onMouseMove/onMouseUp JS事件和鼠标滚轮事件进行拖动

在移动设备上，这些都不起作用（可能是因为它们不会触发我正在捕获的事件）。什么是实现触摸屏拖动和缩放的简单方法

---

谢谢你的帮助

您应该查看KineticJS（）。它还支持移动设备的拖放画布

有关教程，请参见下面的链接：

---

如果您想使用现有的jQuery插件，您应该查看Hammer.js。这是一个很好的图书馆。 但是，如果您更喜欢纯Javascript解决方案，您可能希望查看以下解决方案： 我发现使用触摸事件在画布上拖动和缩放图像非常有用

此外，这是我的解决方案，它非常简单，但是对于使用纯Javascript来说，它是一个只能拖动的解决方案：

HTML:

通过这样做，您的图像可以在画布上顺利拖动。

---

然而，我不知道如何做缩放部分，所以我在网上搜索，发现有用的，并转而使用这个。希望我的回答能有所帮助。

在移动设备上，您没有

mousedown/mousemove/mouseup

事件，但有触摸事件。查看此链接：使用类似Fabric.js的库是最简单的方法。或者手动观察touchstart/touchmove/touchend事件，而不是mousedown/mousemove/mouseup事件。

<canvas id="canvas"></canvas>

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;
}