我已经使用了本网站其他地方提供的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);
});
最佳答案
即使有透明度,图像也都是矩形.然后,您可以通过矩形交叉点知道哪些图像位于单击的点上 – 检查图像阵列及其x,y点的宽度,点与交点的高度.然后,您会想出一系列可能被点击的图像.如果列表中只有一个,那么你就完成了.
图像具有与您编写它们的相反顺序的隐含Z顺序,这意味着图像被写入的下一个图像覆盖,并与之重叠.如果在点击的位置有多个订单,您可以使用它来了解尝试使用哪个订单进行点击测试.唯一的技巧是检测图像像素是否透明.
要检测单个图像中单击的像素点的透明度,可以保留第二个隐藏的画布元素.清除它,然后在同一位置将目标图像写入其中,并使用相同的代码查看第二个画布中的单击像素是否为透明色.如果是,请使用Z顺序中的下一个图像重复此过程,直到获得单击非透明像素的图像.
一个小但重要的优化是首先检查点击的颜色,如果它是透明颜色,您已经知道没有任何图像被点击在非透明点上.
