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顺序中的下一个图像重复此过程，直到获得单击非透明像素的图像。

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

HTML5命中检测是否可行？

1 个答案: