画布获取图像的触摸事件

时间:2013-10-03 13:37:15

标签: javascript android ios canvas ontouchevent

我正在根据SurfaceView对象编写一个2D小型Android游戏,所以我在canvas上绘制了整个游戏。我将球设计为png并使用此方法在画布上绘制:

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

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

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

这对我来说在所有平台(JS,Android,iOS)上都是一个典型的问题,我不知道解决它的最佳方法。这就是我为这个问题使用其他标签的原因。是不是有跨平台的解决方案,所以我可以永远解决这个问题?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

只是一个想法,因为我有类似的游戏。我做的是在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

&#34; 如果我有一些不能通过半径或其他东西描述的不规则物体怎么办?&#34;

如果您的物体是不规则的并且需要不同的形状来进行碰撞检测而无法通过圆形或方框解决,请查看以下问题:Collision detection of irregular shapes以及我发现的{{3}但是,它们看起来都不是一个明确的解决方案。我要做的是选择一个最适合该物体的圆形或方框,但不确定物体的不规则程度。