画布获取图像的触摸事件答案

【问题标题】：Canvas get touch events for images画布获取图像的触摸事件
【发布时间】：2023-03-28 02:09:01
【问题描述】：

我正在编写一个基于 SurfaceView 对象的小型 2D android 游戏，所以我在 canvas 上绘制了我的整个游戏。我设计了一个球为png，并用这种方法在画布上绘制它：

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

现在我的问题是我不知道如何接收这个球的触摸事件。我的 png 是 64x64 像素，但球只有 32x32 像素并且位于图像的中间。如果触摸球（32x32）而不是位图（64x64），我只想接收触摸事件。我怎样才能做到这一点？我可以为SurfaceView 注册一个OnTouchListener，但我怎样才能检测到触球？

另一个问题是球是一个简单的物体。如果我有一些无法通过半径或其他东西描述的不规则物体怎么办？我是否完全使用正确的“技术”和 png 来构建画布控件，还是有更好/更简单的方法？

这对我来说是所有平台（JS、Android、iOS）上的典型问题，我不知道解决它的最佳方法。这就是为什么我在这个问题上使用了一些其他标签。是不是有一个跨平台的解决方案让我可以永远解决这个问题？

【问题讨论】：

标签： javascript android ios canvas touch-event

【解决方案1】：

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

在形状复杂的情况下，可以检查对应的位图像素是否透明。但出于实际目的，只需检查触摸是否在位图中心的一小段距离内就足够了。

【讨论】：

【解决方案2】：

我有一个类似的游戏，只是一个帮助的想法。我所做的是在 javascript 中捕获鼠标输入。除了对您想要的对象进行碰撞检测之外，还可以根据对象的位置将对象的宽度和高度用于测试。因此，如果用户单击/触摸画布上的任何位置，它会检查是否适合画布上的对象区域。

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

编辑

关于你的圈子的逻辑：Circle Collision Detection HTML5 Canvas

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

如果您的对象是不规则的，并且需要不同的形状来进行碰撞检测，而这无法用圆形或框来解决，请查看以下问题：Collision detection of irregular shapes 和我发现的 here，但看起来都没有成为一个明确的解决方案。我会做的是选择一个最适合物体的圆圈或盒子，但不确定你的物体会变得多么不规则。

【讨论】：