jquery-plugins - 如何通过触摸事件在画布上移动图像？

Question

我已经尝试过this和this，但我发现它们仅适用于鼠标事件。我想在画布上放一些图片，让用户“触摸”它进行拖放。但似乎图片没有接收到用户的触摸事件，只有画布接收到事件。

有什么建议或插件吗？
ps：我在Phonegap和Android系统上开发应用。

Answer 1

您还需要处理 MSPointer 事件，这是来自 Microsoft 的用于管理触摸的事件（它是在 Win8 和 WinPhone 8 中引入的）。

每帧所需的步骤：

1. 检测鼠标、触摸和 MSPointer 事件
2. 检查碰撞图像的光标位置
3. 移动图像

对于第一点：

function getCursorPositions (event, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, positions = [];

if (element.offsetParent) {
    do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
}

// Add padding and border style widths to offset
/*offsetX += stylePaddingLeft;
offsetY += stylePaddingTop;

offsetX += styleBorderLeft;
offsetY += styleBorderTop;*/

var touch = event;
//if multi-touch, get all the positions
if (event.targetTouches) { // or changedTouches
    var touchPoints = (typeof event.targetTouches !== 'undefined') ? event.targetTouches : [event];
    for (var i = 0; i < touchPoints.length; i++) {
        touch = touchPoints[i];

        positions.push({touch.pageX - offsetX, touch.pageY - offsetY});
    }
}
else {
    positions.push({touch.pageX - offsetX}, {touch.pageY - offsetY});
}

    //return positions for mouse or fingers
return positions;
}

对于第二点，您至少有两种检测碰撞的方法：

您可以检查鼠标位置是否在项目的边界框内：

function pointIsInRegion (point, targetRegion, threshold) {
    return point.x >= (targetRegion.position.x - threshold) &&
        point.y >= (targetRegion.position.y - threshold) &&
        point.x <= (targetRegion.position.x + targetRegion.dimension.width + threshold) &&
        point.y <= (targetRegion.position.y + targetRegion.dimension.height + threshold);
}

或者您可以通过检查像素碰撞来更准确。要实现第二种方法，您必须在临时画布中渲染您的项目，并检查您的 2 个项目中是否至少有像素发生碰撞（可以通过使用遮罩来加速）。

对于第三点（移动图像），您所要做的就是将图像从“currentCursorPosition - previousCursorPosition”移动。这是最简单的部分。

无论如何，我建议您使用框架。代码已经完成，它将帮助您更快地进行。 cgSceneGraph，（我是这个框架的设计者）只需几行就可以为您完成工作。看看“planner 2D”和“collision”示例（http://gwennaelbuchet.github.com/cgSceneGraph/examples.html）

希望这可以帮到你。