2

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

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

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

谢谢你的帮助！

4

2 回答 2

1

您应该查看 KineticJS ( http://kineticjs.com )。它还具有对移动设备的拖放画布支持。

请参阅下面的链接以获取教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/

于 2013-05-31T10:26:19.480 回答
1

如果你想使用现有的 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有用并改用这个。希望我的回答有帮助。

于 2015-12-03T18:41:30.207 回答