Html5 Canvas Hit Testing

名词解释：

     Shape : 矢量图形，点线面之类的；

     Hit Testing : 点击测试； 

参考内容：

     A Gentle Introduction to Making HTML5 Canvas Interactive

     

小记：

     在Html5中使用Canvas对象来绘制矢量图形Shape，我们希望对这些Shape对象做更进一步的操作，如选中、拖拽等，那么必然我们需要在Canvas上有一个Hit Testing ，遗憾的是Canvas并没有提供对内置对象Hit Testing的方法。(W3C.Org正在标准里面增加Hit Testing的方法!)

     这里我想到的方法是，在UICanvas背后生成一个HittestCanvas对象，两个Canvas对象同时绘制Shape对象，在HittestCanvas中我们为每个Shape对象制作一个颜色编号，当鼠标移入UICanvas中时，我们获取UICanvas中的鼠标位置，然后在HittestCanvas中使用getImageData来获取鼠标位置的颜色，通过颜色编号获取得到的Shape对象，然后在UICanvas中为这个Shape对象加上边框或者全色填充，这样，就完成了Hit Testing的工作。

     注：现在我面临一个问题，当我在一个Canvas中有500+复杂面对象（盆地）时，如果两个Shape对象相切或者相交时，当我从一个Shape对象移入到另一个Shape对象过程中发现颜色编号的变换出现了问题：当鼠标在两个很近的Shape对象的间隙中时，触发了远在他方的第三个Shape对象的高亮事件。写这篇博客的目的就是希望能够记录解决这个问题的点点滴滴，供参考。

 

 

转载于:https://www.cnblogs.com/mengkzhaoyun/p/3745185.html