Javascript检查是否已单击画布上的透明图像

Question

我有一个画布，我画了一个透明的图像，并且有一个像形状的多边形。现在我需要检查是否已点击该图像。

我有绳索 { X：30， Y：20， 宽：100， H：100 }

我可以检查一个方框或圆圈点击但是如果它像多边形那样是刚性的，那就是像素点击测试或凸算法（但我不想指定边缘）？

谢谢。

Answer 1

一种解决方案是使用辅助画布实现像素检测以用作地图。

1. 将您的形状绘制到场景画布上。
2. 将精确的形状绘制到第二个画布上，但将颜色设置为rgb（0,0,0）。
3. 将该颜色存储在某种地图中以引用您的第一个“形状”

e.g。

var pixelMap = {
  '000' : 'rectangle 1',
  '001' : 'rectangle 2'
};

每次向画布绘制新形状时，请将rgb增加1.除非你有超过1670万个形状（256 ^ 3），否则此方法就足够了。

下面是一个示例实现：https://jsfiddle.net/mikeschultz/nbtnxpf2/