使用 Canvas 进行像素完美的 2D 鼠标拾取

Question

我正在使用 Canvas 在 html5 中编写 2D 游戏，这需要检测鼠标单击和悬停事件。这有 3 个问题：检测必须是​​像素完美的、对象不是矩形的（房屋、奇怪形状的 UI 按钮......），并且需要快速且响应灵敏。 （显然暴力破解是不行的）

所以我想问的是如何找出鼠标位于哪个对象上，以及可能的优化是什么。

PS：我做了一些调查，发现一个人在这里使用了QuadTree。

Answer 1

我有一个（已过时的）教程，解释了幽灵画布的概念，它非常适合像素完美的命中检测。该教程位于此处。忽略有关 较新教程，较新的教程没有使用幽灵画布概念。

这个想法是将相关图像绘制到内存画布上，然后使用 getImageData 获取鼠标单击的单个像素。然后您会看到该单个像素是否完全透明。

如果它不完全透明，那么你已经达到了目标。

如果它是完全透明的，则将下一个对象绘制到内存画布上并重复。

您只需要在最后清除内存中的画布即可。

getImageData 速度很慢，但如果您想要像素完美的命中检测并且不预先计算任何内容，那么它是您唯一的选择。

或者，您可以预先计算路径或具有偏移量的像素数组。这将需要大量工作，但可能会更快。例如，如果您有一个具有一定透明度的 40x20 图像，您将计算一个数组 [40][20]，该数组的 true 或 false 对应于透明或不透明。然后，您将针对鼠标位置进行测试，并进行一些偏移，如果图像是在 (25, 55) 处绘制的，您需要从鼠标位置中减去该位置，然后测试当您查看时新位置是否为真数组[posx][posy]。

这就是我对你问题的回答。 我的建议？如果这是一款游戏，请忘记像素完美检测。

说真的。

相反，创建代表对象但不是像素完美的路径（不是在画布中，而是在纯 JavaScript 代码中），例如房子可能是一个顶部有一个三角形的正方形，它非常接近图像，但用于当谈到命中测试时，它是相反的。计算一个点是否位于路径内部比进行像素完美检测要相对极其快。多边形绕数规则检测中查找点。老实说，这是你最好的选择。

Answer 2

传统游戏开发中常见的解决方案是构建点击蒙版。您可以将所有内容以纯色重新渲染到单独的离屏画布上（渲染应该非常快）。当您想弄清楚单击的内容时，只需对屏幕外画布上的 x/y 坐标处的颜色进行采样即可。您最终会构建一个 color-->obj 哈希，类似于：

var map = {
      '#000000' : obj1
    , '#000001' : obj2
    , ...
};

您还可以优化辅助画布的渲染，使其仅在用户单击某些内容时发生。并且使用各种技术，您可以进一步优化它，以仅绘制用户单击的画布部分（例如，您可以将画布拆分为 NxN 网格，例如 20x20 像素正方形的网格，并标记所有该正方形中的对象 - 然后您只需要重新绘制少量对象）

Answer 3

HTML5 Canvas 只是一个绘图平面，您可以在调用每个绘图 API 函数之前设置不同的变换。无法创建对象且没有显示列表。因此，您必须自己构建这些功能，或者您可以使用可用的不同库。

http://www.kineticjs.com/

http://easeljs.com/

几个月前，我对此产生了兴趣，甚至为此目的编写了一个库。您可以在这里看到它：http://exsprite.com。最终面临很多性能问题，但由于缺乏时间我无法对其进行优化。这真的很有趣，所以等待一些时间来完善它。

Answer 4

我相信评论应该足够了。这就是我在 2d 等距滚动条中确定用户意图的方法，当前位于 http://untitled.servegame.com

var lastUp = 0;
function mouseUp(){
    mousedown = false; //one of my program globals.
    var timeNow = new Date().getTime();
    if(mouseX == xmouse && mouseY == ymouse && timeNow > lastUp + 100){//if it was a centralized click. (mouseX = click down point, xmouse = mouse's most recent x) and is at least 1/10th of a second after the previous click.
        lastUp = new Date().getTime();
        var elem = document.elementFromPoint(mouseX, mouseY); //get the element under the mouse.
        var url = extractUrl($(elem).css('background-image')); // function I found here: http://webdevel.blogspot.com/2009/07/jquery-quick-tip-extract-css-background.html

        imgW = $("#hiddenCanvas").width(); //EVERY art file is 88px wide. thus my canvas element is set to 88px wide. 
        imgH = $(elem).css('height').split('p')[0]; //But they vary in height. (currently up to 200);

        hiddenCanvas.clearRect(0, 0, imgW, imgH); //so only clear what is necessary.

        var img = new Image();
        img.src = url;                          
        img.onload = function(){
            //draw this elements image to the canvas at 0,0
            hiddenCanvas.drawImage(img,0,0);

            ///This computes where the mouse is clicking the element.
            var left = $(elem).css('left').split('p')[0]; //get this element's css absolute left.
            var top = $(elem).css('top').split('p')[0];
            offX = left - offsetLeft; //left minus the game rendering element's absolute left. gives us the element's position relative of document 0,0
            offY = top - offsetTop;
            offX = mouseX - offX; //apply the difference of the click point's x and y
            offY = mouseY - offY;


            var imgPixel = hiddenCanvas.getImageData(offX, offY, 1, 1); //Grab that pixel. Start at it's relative X and it's relative Y and only grab one pixel.
            var opacity = imgPixel.data[3]; //get the opacity value of this pixel.

            if(opacity == 0){//if that pixel is fully transparent
                $(elem).hide();
                var temp = document.elementFromPoint(mouseX, mouseY); //set the element right under this one
                $(elem).show();
                elem = temp;
            }

            //draw a circle on our hiddenCanvas so when it's not hidden we can see it working!
            hiddenCanvas.beginPath();
            hiddenCanvas.arc(offX, offY, 10, 0, Math.PI*2, true); 
            hiddenCanvas.closePath();
            hiddenCanvas.fill();


            $(elem).css("top", "+=1"); //apply something to the final element.

        }
    }
}

结合此：

<canvas id="hiddenCanvas" width="88" height="200"></canvas>

设置 CSS 定位绝对和 x = -(width) 隐藏；