企业官网建设流程全解析

想把自己的家画出来？Home Information 的内置楼层平面图编辑器让这件事变得很简单：打开浏览器，用鼠标拖拽墙体、门窗，几步就能得到一张属于你的家庭平面图。不需要安装任何设计软件，也不用懂 CAD，全程在网页上完成，还能一键导出 SVG 备份分享。

本文按照「进入编辑器 → 布置元素 → 保存导出」的真实操作流程，带你用4 步画好第一张家庭楼层平面图。

为什么值得用内置楼层平面图编辑器？

Home Information 是一个开源的家庭信息面板，把你家的设备、文档、监控、天气等所有信息组织在一张可视化的"家"的画布上。而这张画布的底图——也就是楼层平面图，正是用内置编辑器画出来的：

• ✏️零门槛：浏览器里拖拽操作，墙体、门窗、地板、景观元素都现成；
• 🧱结构化元素：画出来的不是"贴图"，而是可单独选中、移动、变形的矢量元素；
• 💾自动保存草稿：编辑中途浏览器意外关闭，重新打开会从上次进度继续；
• 📤可导出 SVG：完成的作品可以下载成独立 SVG 文件，方便分享或存档。

第1步：从右上角进入编辑模式

楼层平面图编辑器藏在编辑模式里。在首页界面右上角找到黑色的EDIT按钮，点击它即可进入编辑模式：

进入后，界面会被红色虚线框包围，右侧出现侧边面板，顶部多了ADD VIEW等按钮——这时你已经具备打开平面图画布的全部前置条件。

💡 编辑模式平时用得不多，主要用于初次搭建布局和偶尔调整，日常浏览信息无需进入。

第2步：在 Space 选项卡打开背景图编辑器

在右侧侧边面板顶部切换到Space选项卡（管理当前空间/楼层的属性），然后在下方面板中找到BACKGROUND IMAGE按钮并点击：

会弹出Background Image对话框，提供三种方式：

👉 不想从零画？先在Choose a Template里挑一个接近你家户型的模板（如 Apartment、Single Story、Two Story 等），再用编辑器微调，效率更高。

第3步：拖拽素材，画出墙体与房间

选择Edit Current后进入全屏编辑器，界面分三部分：

• 顶部元素面板（Palette）：分三大类——Structural（墙体、地板、门、窗）、Features（台面、壁炉、楼梯、柜子）、Exterior（草地、路面、围栏、地产线）；
• 中央画布：你的楼层平面图在这里绘制；
• 底部工具栏：画布尺寸（Canvas Size）、对齐吸附（Snap）、REVERT/EXPORT/HELP等按钮。

画图的三个基本操作：

1. 添加：把面板中的元素直接拖到画布上，比如先拖Ext. Wall画出外墙轮廓；
2. 变形：点击任意已放置的元素即可选中，墙体和区域会显示红色顶点，拖动顶点就能重新塑形；Ctrl+拖动顶点可整体平移而不改变形状；
3. 导航：鼠标滚轮或+/-键缩放，点击空白处拖动可平移画布；按m键可水平镜像门窗，编辑完按ESC取消选中。

建议的绘制顺序：先画外墙定出房屋轮廓 → 再加内墙分隔房间 → 最后布置门窗与地面材质。遇到快捷键记不住？点底部HELP按钮随时查看全部快捷键清单。

第4步：保存、导出你的平面图

编辑器边画边自动保存草稿，所以不用担心丢进度。画完后有三个出口：

• ✅DONE：保存修改并返回正常视图；
• ❌CANCEL：丢弃进入编辑器以来的全部修改；
• 🔁REVERT：丢弃修改但留在编辑器里，相当于"从头再来"。

点DONE后，你的平面图就正式成为该 Space 的背景。之后在这个画布上摆放冰箱、空调、摄像头等设备图标，整个"家"就活了：

最后，点击编辑器底部工具栏的EXPORT按钮，即可把作品下载为独立 SVG 文件，用于分享给家人或备份。

实用技巧清单

• 🏠两层住宅？多建 Space：在编辑模式下通过ALL SPACES下拉菜单新建"阁楼""地下室"等空间，每个空间拥有独立的楼层平面图；
• 📐细节工作记得放大：画门窗时先把画布缩放到位再放置，配合Snap吸附值（如 5px）对齐更整齐；
• 🔁随时可改：编辑器随时可从编辑模式重新打开，装修后改动户型完全不用担心。

延伸阅读与源码位置

• 官方背景图与编辑器文档：docs/CustomBackgrounds.md
• 编辑模式完整操作说明：docs/Editing.md
• 编辑器前端交互逻辑：svg-bg-edit.js
• 编辑器画布模板（SVG 组装方式）：location_svg_edit_canvas.html
• 顶部元素面板定义（墙体/门窗/景观元素）：svg_edit_palette.svg
• 编辑器后端视图（保存/导出/回退等）：views.py

照着 4 个步骤走一遍，你就能在浏览器里拥有第一张专属的家庭楼层平面图 🏡