D 的个人博客

简介

星图（StarChart）是一套绘图方法论和工具集的统称，可用于 精确 绘制直线型图形的二维轮廓，对于不规则的曲线型图形也能较直观地进行描述并绘制。目前主要的应用场景是房屋平面户型图的 边测边绘 。

动机

星图的出发点是解决户型图绘制的一些难点。

传统绘制方式是先进行仪器测量、记录数据，然后通过纸笔进行绘制，这种方式的缺点如下：

• 需要绘图者具有较高的专业水平
• 精度很可能在绘图时丢失
• 纸笔绘制的图纸转换为计算机模型时难度很高甚至不可能

目前一些在线户型图绘制工具可以解决部分传统问题：

• 通过改善交互体验来提升绘制效率：比如复用多种直观的绘图元素，提供拖拽绘制墙面，方便的转角，元素吸附、缩放效果等
• 不存在模型变换，但仍存在精度丢失：真实世界到计算机世界的变换在绘制过程中由绘图者完成，变换过程人工完成容易出现精度问题甚至是错误

由此，我们可以看出：由人直接进行户型图绘制的方式 很可能 在模型变换时出现问题，其根本原因在于交互 状态不足够简单 ，绘图者需要识别拖拽、放置、选择等等操作。

如果能将绘图方式变简单，绘图者只需要进行非常少的状态指令即可进行绘制，这样将大大减少出错概率，保证产出图形的精准。

星座绘图法

星座图是由相关的一些恒星连线描绘的；由点构成线，再由线构成面是欧式几何的基础。参考星座图绘制方式，我们可以构造出任何二维图形的边界轮廓。

点线面

从户型图绘制的实际需求出发，我们可以总结出星座绘图法的操作步骤：

1. 触发开始绘制：第一条线段沿 y 轴正方向 (0, 0), (0, y)
2. 沿同一方向进行测量（沿同一侧墙面进行长度测量）
3. 标记转向与角度
4. 重复 2、3 两步可以绘制出由线段组成的 连续 路径
5. 触发结束绘制：最后一条线段 (x, y), (x, 0)

边测边绘

前面提到过将测量数据转变为计算机户型图时存在一些问题，主要原因是绘制操作由人工完成，并且操作具有一定的复杂度，从而容易出现误操作导致精度丢失或错误。

绘制过程的自动化是星座绘图法的主要目标，人工只需要：

• 测量并输入结果：通过激光测距仪测量长度，然后输入数值
• 确定前进方向：通常意义上的左或者右

这是一个边测边绘、所见即所得的效果：

• 在每次测量记录后实时渲染图形结果
• 整个过程是简单归一的，能够最大化降低绘图者的操作难度

星座绘图仪

上面介绍了方法论，下面我们将介绍配套辅助的工具集， 现阶段 主要包括：

• 激光测距仪（硬件）：用于精准高效地测量实际距离
• StarChart（开源软件）：用于输入测量结果并自动绘制图形，基于 HTML5 Canvas 实现，可运行在大多数用户端设备上

下一阶段可以考虑将二者结合到同一设备中，外观稍加设计就可以更像一个“星座绘图仪”了。

星图

将绘制的图形比作星座的话，我们可以将星座收集到星图中，随着星图的不断增加完善，可以逐渐描绘出整个浩瀚的星空。

难点

不规则图形绘制

• 弧形图形：可能出现弧形，比如阳台凸出部分。解决思路是先绘制直线，然后可以通过"上/下箭头"调整弧度，多段弧形可以按此思路拆分
• 非连续的图形：可能出现独立于绘制路径的图形，比如酒店大堂中的立柱和墙体是没有任何连接的。解决思路是在星座绘图仪软件部分加上设计功能，可以将一些特殊图形进行人工设计绘制

对于户型图场景而言，主要保证的是边界（墙体）部分的精度，核心思想是“轻设计，重生成”。