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

  • 相关阅读:
    023 AQS--JUC的核心
    022 Future接口
    021 Callable接口
    020 线程的综合考虑
    019 线程协作
    命令,lldb,llvm,gdb,gcc,
    @class,import,
    arc,自动引用计数,
    写在哪里,
    40岁生日,
  • 原文地址:https://www.cnblogs.com/mengkzhaoyun/p/3745185.html
Copyright © 2020-2023  润新知