Canvas 交互

Posted 2023-03-18

参考技术A 2017年12月28日

canvas 是一张画布，仅有一个DOM元素，浏览器没有内置多余的API，所有的交互需要开发直接实现。

规则的几何形状，如矩形、圆形等，可通过简单的数学计算获得。

这是用 canvas 做的一个关系网络图，鼠标可以自由拖动节点。这个场景下交互很简单，鼠标点击画布，在事件中获取X,Y坐标，然后计算每一个节点，看是否落在这个节点的半径内。如果是，则标记为选中了。

然而，不规则图形会大大加大计算复杂度，如涉及贝塞尔曲线、旋转等。

可使用 “包围盒” 的方式，将不规则图形简单化

把复杂路径简单化，再次回归到方形、圆形等规则图形上去。

但如果你需要的是一种非常精准无误差的选取方式，那这种包围盒方式就不适用了，下面是两种 canvas 精确选取方式：

需额外新增一张仅用来存信息的canvas（不插入html里面）
当在正常的canvas上绘制图形时，同时在那张隐式的canvas中也绘制一遍，并把图形的索引值作为颜色值来绘制图形

ctx.getImageData(x,y,width,height);

ImageData 对象
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255)

重走一遍绘制流程，但不真正的绘制出来（不调用stroke 和 fill ）图形），而只调用 isPointInPath()方法判断点是否在图形中，如果在则终止。

MDN - getBoundingClientRect