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

  • 相关阅读:
    文件路径与操作系统
    试验10
    shiyan9
    sql
    shiyan8
    iostream
    shiyan7
    CDMA
    试验6
    试验5
  • 原文地址:https://www.cnblogs.com/mengkzhaoyun/p/3745185.html
Copyright © 2011-2022 走看看