在画布中点击精灵的区域

Question

我正在使用JavaScript创建一个游戏。目前，精灵是带有背景图像的div元素，该图像会更新以创建动画效果。我听说如果我将元素制作成画布并将精灵贴到画布上，就可以使精灵可点击，省略透明区域。

我需要的解决方案是，我的游戏精灵可以被点击，但可点击区域要适应精灵的形状。它还需要自动完成。我无法使用预先制作的点击映射来达到这个目的。

- Robert Hurst

---

@kangax 我不想使用库完成这个，不过还是谢谢你。 - Robert Hurst

Answer 1

我有一个教程，几乎可以满足您对命中测试的需求。请查看此处的代码。

当您单击时，该代码将每个形状（我使用矩形，但半透明图像也可以很好地工作）绘制到内存中的画布（ghostcanvas），并检查鼠标像素是否在不透明的像素上。

以下是相关代码：

function myDown(e){
  getMouse(e);
  clear(gctx); // clear the ghost canvas from its last use

  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black');

    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;

    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }

  }
  // havent returned means we have selected nothing
  mySel = null;
  // clear the ghost canvas for next time
  clear(gctx);
  // invalidate because we might need the selection border to disappear
  invalidate();
}

- Simon Sarris

---

我已经尝试了您的代码并使用图像进行测试，但它无法与图像一起正常工作。不知何故，这些图像未在幽灵画布上绘制。您可以在此处检查代码。我想使图像可拖动。请问您能否修复这个问题？http://jsfiddle.net/V8NPF/8/ - Gohel Kiran

Answer 2

您可以将背景设置为透明，并检查点击像素处的图像是否透明。以下是我其中一个游戏原型的代码：

function getAlphaInImage(img, x, y) {
    var tmp = document.createElement("CANVAS");
    tmp.setAttribute('width', img.width);
    tmp.setAttribute('height', img.height);
    var tmpCtx = tmp.getContext('2d');
    tmpCtx.drawImage(img, 0, 0);
    var imageData = tmpCtx.getImageData(x, y, 1, 1);
    var alpha = imageData.data[3];
    tmp = null;
    imageData = null;
    return alpha;
}

调用此函数之前，我首先检查鼠标单击是否在整个图像内。

- Bemmu

---

这也是我会采取的方法，不过更高效的做法是创建画布并缓存它，而不是在每次点击时都执行所有这些操作。 - alekop

另一方面，您可能永远不会在一个帧中有多个点击，在典型的游戏中只需要检查很少的图像。就我个人而言，我会这样做，然后如果它变得太慢，再进行优化。 - Bemmu