Airglass.js最佳实践：标注多边形区域

我打算用Airglass.js重新实现canvas版的LabelImg图像标注切割功能，作为Airglass.js的第一个最佳实践。实现图像的标注和切割，关键不是切割图像，而是如何标注多边形区域，获取标注点信息。为此我为Airglass新增了创建多边形的Polygon类。

拖拽多边形

和矩形或圆形不同的是，多边形的中心点坐标位置和多边形的边界是通过计算得来的。用户不断的为多边形增加新的控制点，因此需要每次在新增控制点后重新计算多边形的中心点坐标位置和边界框。同样，当用户拖拽多边形时也需要重新计算。

多边形边界框是指将多边形各控制点刚好包裹起来的矩形范围。控制点中最小横坐标和纵坐标，即是边界框矩形的左上角那一点的坐标位置；控制点中最大横坐标和中坐标，即是边界框矩形右下角那一点的坐标位置。多边形的中心点坐标直接根据多边形边界框计算得出。

击中检测

击中检测用辅助完成多边形拖拽和控制点的拖拽。因为拖拽的前提是要先知道拖拽谁。击中检测能够获取到鼠标或手指与屏幕接触时选中的物体。

对于上图中两个多边形重叠的情况，可以想像一下，手指或鼠标与屏幕交互时，就像一束激光从手指穿透层层玻璃，所有被击穿的多边形即是检测到的物体。

玻璃平铺开来

我在开发笔记中提到过Airglass有玻璃的概念，为此我创建了Glass类。凡是继承了Glass类的都可以称作是玻璃。渲染器类Renderer继承了Glass类，而每个渲染器总要绑定一个画布。所以，每一个canvas画布都可以看作是一块玻璃。现实世界里的玻璃特性多少都可以在Airglass中找到合适的对应。

上图是将玻璃平铺开，演示创建和编辑多边形控制点。左侧的玻璃渲染多边形；右侧的玻璃渲染控制点。我在开发笔记中提到过，Airglass.js中有事件订阅的概念。左侧玻璃中的所有多边形受右侧玻璃中控制点的影响改变这形状。因为左侧玻璃订阅了右侧玻璃中拖拽控制点和创建多边形的事件。

玻璃层叠起来

上图是两块继承Glass类的渲染器层叠起来，协作创建和编辑多边形的控制点的演示。顶层的渲染多边形控制点；下层的渲染多边形。

现实世界中存在透明与不透明的玻璃。在Airglass中，能创建无背景和无背景两种canvas画布。想象一下我有三块透明的玻璃一些颜料?和画笔?️，一块画白云☁️蓝天，一块画山⛰️，一块画蝴蝶?。把这三块玻璃按白云蓝天、山、蝴蝶的顺序叠放在一起，就是一副蓝天白云下一只蝴蝶在山间飞舞的画面。

Airglass.js绘制这样一幅画也会用到三个canvas画布，相同的排列顺序叠放。最下层的画布不断渲染移动中的云。中间画布只需在初始化时渲染一次山。最上层不断渲染飞舞的蝴蝶。将需要频繁渲染的画布与不常需要渲染的画布分开，减少不必要的渲染开支。