Canvas 交互
2017年12月28日
背景
canvas 是一张画布，仅有一个DOM元素，浏览器没有内置多余的API，所有的交互需要开发直接实现。
几何计算
规则的几何形状，如矩形、圆形等，可通过简单的数学计算获得。
应用
这是用 canvas 做的一个关系网络图，鼠标可以自由拖动节点。这个场景下交互很简单，鼠标点击画布，在事件中获取X,Y坐标，然后计算每一个节点，看是否落在这个节点的半径内。如果是，则标记为选中了。
然而，不规则图形会大大加大计算复杂度，如涉及贝塞尔曲线、旋转等。
可使用 “包围盒” 的方式，将不规则图形简单化
包围盒
把复杂路径简单化，再次回归到方形、圆形等规则图形上去。
但如果你需要的是一种非常精准无误差的选取方式，那这种包围盒方式就不适用了，下面是两种 canvas 精确选取方式：
1. 把图形序号存在另一张 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)
2. 利用 isPointInPath() API
重走一遍绘制流程，但不真正的绘制出来（不调用stroke 和 fill ）图形），而只调用 isPointInPath()方法判断点是否在图形中，如果在则终止。
附录
包围盒
包围盒是一种求解离散点集最优包围空间的算法，基本思想是用体积稍大且特性简单的几何体（称为包围盒）来近似地代替复杂的几何对象。
Element.getBoundingClientRect()
返回元素的大小及其相对于视口的位置。
返回值是一个 DOMRect 对象，包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
