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

Javascript check if transparent image on canvas has been clicked

本文关键字：是否 图像 单击 透明图 透明 检查 Javascript      更新时间：2023-09-26

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

我有电线{X：30，Y：20，w：100，高：100}

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

谢谢。

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

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

例如

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

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

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

相关文章：