HTML5命中检测是否可行？

Question

我已经使用了本网站其他地方提供的Canvas代码来创建一个屏幕,其中我有几个重叠的透明png,非透明部分是不规则形状.我可以在光标下获得颜色,这很棒.但我的形状都是相同的颜色,我需要一种方法来获取特定形状的ID,所以我知道哪一个被点击.想象一下,由到达国家/地区的重叠png组成的地图,您想要检测点击了哪个国家/地区.据我所知,id检测仅适用于矩形区域.有什么建议？

$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert(hex);
});

此代码获取并显示颜色(为清晰起见,findPos和rgbToHex是单独的功能).我需要一个身份证!救命!

Answer 1

即使具有透明度，图像也都是矩形。然后，您可以知道哪些图像位于通过矩形交点单击的点处 - 检查图像数组及其 x、y 点的宽度、高度以了解点交点。然后你会想出一系列可能被点击的图像。如果列表中只有一个，那么您就完成了。

这些图像具有与写入它们的顺序相反的隐含 Z 顺序，这意味着图像会被与其重叠的下一个写入图像覆盖。如果单击的点有多个，您可以使用它来了解按哪个顺序尝试进行命中测试。唯一的技巧是检测图像像素是否透明。

要检测单个图像中单击的像素点的透明度，您可以保留第二个隐藏的画布元素。清除它，然后在同一位置写入目标图像，并使用相同的代码查看第二个画布内单击的像素是否为透明颜色。如果是，请对 Z 顺序中的下一个图像重复此过程，直到获得单击非透明像素的图像。

一个小但重要的优化是检查首先单击的颜色，如果它是透明颜色，您已经知道没有图像被单击在非透明点上。