我已经尝试过this和this,但我发现它们仅适用于鼠标事件。我想在画布上放一些图片,让用户“触摸”它进行拖放。但似乎图片没有接收到用户的触摸事件,只有画布接收到事件。
有什么建议或插件吗?
ps:我在Phonegap和Android系统上开发应用。
您还需要处理 MSPointer 事件,这是来自 Microsoft 的用于管理触摸的事件(它是在 Win8 和 WinPhone 8 中引入的)。
每帧所需的步骤:
对于第一点:
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)
希望这可以帮到你。