Question

我试过了this和this，但我发现它们只适用于鼠标事件。我想在画布上放一些图片，让用户来 “触摸”就可以拖放了。但似乎图片没有收到用户的触摸事件，只有画布收到事件。

有任何建议或插件吗？
ps：我在Phonegap和Android系统上开发应用程序。

Answer 1

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

每个框架所需的步骤：

检测鼠标，触摸和MSPointer事件
检查光标位置是否与图像碰撞
移动图片

第一点：

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

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

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

无论如何，我建议你使用一个框架。代码已经完成，它将帮助您加快速度。 cgSceneGraph，（我是这个框架的设计者）将在几行内为你完成工作。看看“规划师2D”和“碰撞”示例（http://gwennaelbuchet.github.com/cgSceneGraph/examples.html）

希望这可以帮到你。

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

1 个答案: