码迷,mamicode.com
首页 > Web开发 > 详细

Html5 Canvas Hit Testing

时间:2014-05-26 23:15:29      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:style   c   blog   tar   http   ext   

名词解释:

     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对象的高亮事件。写这篇博客的目的就是希望能够记录解决这个问题的点点滴滴,供参考。

 

 

Html5 Canvas Hit Testing,布布扣,bubuko.com

Html5 Canvas Hit Testing

标签:style   c   blog   tar   http   ext   

原文地址:http://www.cnblogs.com/mengkzhaoyun/p/3745185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!