画布获取图像触摸事件

Question

我正在写一个基于SurfaceViewObject的小2D机器人游戏，所以我把整个游戏绘制在画布上。我将球设计为png，并使用以下方法在画布上绘制：

canvas.drawBitmap(bmp, posX, posY, null);

现在我的问题是，我不知道如何接收这个球的触摸事件。我的png是64x64像素，但是球只有32x32像素，并且在图像的中间。我只想在球(32x32)被触摸时接收触摸事件，而不是位图(64x64)。我该怎么做？我可以为< code>SurfaceView注册一个< code>OnTouchListener,但是我如何检测球的接触呢？

另一个问题是球是一个简单的物体。如果我有一些不规则的物体，不能用半径或其他东西来描述呢？我是否使用了png的正确“技术”来构建画布控件，或者有没有更好/更简单的方法？

这是我在所有平台(JS，Android，iOS)上遇到的典型问题，我不知道解决它的最佳方法。这就是为什么我在这个问题上使用了一些其他的标签。难道没有跨平台的解决方案让我可以永远解决这个问题吗？

Answer 1

只是一个想法，因为我有一个类似的游戏。我所做的是在脚本中捕获鼠标输入。然后对您想要的物体进行碰撞检测，根据其位置将物体的宽度和高度用于测试。因此，如果用户单击/触摸画布上的任意位置，请检查是否适合画布上的对象区域。

canvas.addEventListener('mousemove', function(evt) {
    mousePos = getMousePos(canvas, evt);
  }, false);

function collides(a, b) {
          return a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.y + a.height > b.y;
        }

编辑

对于圆的逻辑：圆碰撞检测HTML5画布

“如果我有一些无法通过半径或其他东西描述的不吉利物体怎么办？”

如果你的物体是不规则的，需要一个不同的形状来进行冲突检测，而这不能用圆形或盒子来解决，请看这个问题：不规则形状的碰撞检测和我在这里发现的一些东西，但看起来都不是一个明确的解决方案。我会选择一个最适合物体的圆形或盒子，但不确定你的物体会有多不规则。

Answer 2

无法在画布上获取位图的触摸事件。您将收到视图的触摸事件。然后，根据触摸的x，y坐标，您必须确定触摸了什么。

在复杂形状的情况下，您可以检查相应的位图像素是否透明。但是出于实际目的，简单地检查触摸是否在位图中心的某个小距离内就足够了。