丁亮的个人博客   Java/Go/Linux/开源

GitHub 上 Star 数最多的 Java 博客 Solo
Golang 黑科技之在线 IDE Wide
黑客与画家的社区 Sym

星图 —— 一种户型图测绘方式

简介

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

动机

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

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

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

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

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

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

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

星座绘图法

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

点线面

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

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

边测边绘

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

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

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

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

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

星座绘图仪

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

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

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

星图

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

难点

不规则图形绘制

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

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

---- EOF ----
欢迎加入开源技术 Q 群 13139268 B3log,让学习和分享成为一种习惯!
validate