Javascript检查 Canvas 上的透明图像是否被点击

Question

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

我有线 { x:30, y:20, 宽:100， 小时:100

我可以检查一个框或圆点击但如果它像多边形一样刚性怎么办是否有像素点击测试或凸算法(但我不想指定边缘)？

谢谢。

Answer 1

一种解决方案是使用辅助 Canvas 实现像素检测以用作 map 。

1. 将您的形状绘制到场景 Canvas 上。
2. 在第二个 Canvas 上绘制准确的形状，但将颜色设置为 rgb(0,0,0)。
3. 将该颜色作为引用存储在某种 map 中以引用您的第一个“形状”

例如

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

每次在 Canvas 上绘制一个新形状时，将 rgb 增加 1。除非您有超过 1670 万个形状 (256^3)，否则此方法应该足够了。

这是一个示例实现:https://jsfiddle.net/mikeschultz/nbtnxpf2/