Airglass.js最佳实践：优化多边形标注体验

我用airglass.js初步完成了第一个最佳实践：创建和编辑多边形标注区域。做Demo的同时完善Airglass.js。我给渲染器类新增了击中检测实例方法，还增加了链式调用提升开发效率。同时新增多边形Polygon类，它是继矩形圆形后Airglass.js出现的第3个基本形状。接下来是对Demo无止境优化的漫漫长路。

画笑脸

从上面的演示可以看到，我做了优化的地方是：只显示正在编辑或选中状态的多边形上的控制点。控制点是用来帮助用户编辑多边形的辅助元素，所以控制点应该只在编辑多边形时出现。

我在上一篇提到这一最佳实践用到了两个Glass，顶层渲染控制点，第二层渲染多边形。当击中某个多边形时，清空顶层渲染器以及场景中现有的控制点，并将击中的多边形的全部控制点加入到顶层渲染器绑定的场景中。

暂停与继续编辑

Airglass.js实现的这一个多边形标注功能的最佳实践，因为多边形是从无到有创建出来的，所以存在创建多边形的中间状态。

首先，我规定实例化一个Polygon类必须要提供至少三个点的实例，即组成一个面片至少需要三个点。其次，用户理论上可以为多边形创建无限多个控制点，控制点越多则多边形标注的区域就越精细，当用户在编辑多边形的过程中点击了第一个控制点时则多边形闭合，标志着完成了该多边形标注区域的绘制。

Airglass.js中所有的类创建的实例对象都是可以被开发者扩展属性的。这这一个标注多边形的最佳实践中，开发者可以自定义一个标志多边形是否闭合的真假值存储在多边形对象上。当击中的多边形时，首先检测该多边形是否闭合。如果多边形并未闭合，则继续从上次暂停绘制的控制点继续开始绘制多边形。

第一个控制点在哪里

后来我又发现了需要继续优化的地方。如果你善于观察细节，你会发现在上面“暂停与继续编辑”部分的演示中，我想闭合右边的多边形编程三角形，但是我迟疑了一下，因为我一时想不起来端点处的两个控制点哪个才是多边形的第一个控制点。所以我又绘制了第4个控制点，才找到哪个是第一个出发时的控制点。

我提到已经实现了可以从多边形上次暂停绘制的控制点处继续绘制，但是每一个控制点外观都相同，如果想要直接闭合多边形，甚至搞不清楚两个控制点中哪一个是上次暂停时的控制点，哪一个才是多边形的第一个控制点。虽然我可以根据自己习惯从左上到右下的绘图，猜到左上方的控制点就是多边形的第一个控制点，但这并不是真实业务场景中应有的侥幸。

所以我将开始创建多边形时的第一个控制点的外观变成实心加高亮的样式。当用户回过头来继续编辑未完成的多边形时，看到两个端点控制点，一个实心控制点代表这是绘制多边形的第一个控制点，一个空心控制点代表这是上次暂停时的最后一个控制点。

颜色的维度

同一类别的多边形往往都有相似的特征。除了使用“汽车”、“人”等命名方式将标注的区域归为一类，颜色的维度也是划分归属的绝好帮手。相同的类别使用同一种颜色，不同的类别使用不同种颜色，视觉上更加一目了然。

名称赋予颜色以意义。比如所有“汽车”使用粉色标注，所有“人”使用黄色标注。通过颜色分辨所标注的物体的从属类别，还有一个用途是训练机器识别图像时需要用到遮罩颜色。