Skip to content

Canvas 事件系统的思考

基于投影的事件系统(投影法)

这是目前我项目中使用的方式,因为公司保密协议的问题,这里只说一下思路:

  1. 首先我们需要创建两个画布,一个是给用户看的主画布,另一个是用户不可见的影子画布。
  2. 当主画布渲染图形的时候,在影子画布上生成主画布形状的投影,投影的颜色和图形 ID 使用特定的算法形成映射。
  3. 当主画布被点击时,获取点击的坐标。
  4. 在影子画布上用相同的坐标去取色,将取到的颜色转换为图形 ID。
  5. 通过投影和图形的映射关系,可以找到用户点击了哪个图形。

这种方式的好处是:无论图像多么复杂都能完美实现事件系统,而且无需复杂的算法。

有一篇类似的文章,可参考:

https://juejin.cn/post/6888209975965909000

里面讲了射线法和投影法。

Version 4.2 (core-1.3.4)