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对象的高亮事件。写这篇博客的目的就是希望能够记录解决这个问题的点点滴滴，供参考。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
