【免费下载链接】home-informationHome Information - Your home, your data, organized.项目地址https://gitcode.com/gh_mirrors/ho/home-information点击查看免费下载想把自己的家画出来Home Information 的内置楼层平面图编辑器让这件事变得很简单打开浏览器用鼠标拖拽墙体、门窗几步就能得到一张属于你的家庭平面图。不需要安装任何设计软件也不用懂 CAD全程在网页上完成还能一键导出 SVG 备份分享。本文按照「进入编辑器 → 布置元素 → 保存导出」的真实操作流程带你用4 步画好第一张家庭楼层平面图。为什么值得用内置楼层平面图编辑器Home Information 是一个开源的家庭信息面板把你家的设备、文档、监控、天气等所有信息组织在一张可视化的家的画布上。而这张画布的底图——也就是楼层平面图正是用内置编辑器画出来的✏️零门槛浏览器里拖拽操作墙体、门窗、地板、景观元素都现成结构化元素画出来的不是贴图而是可单独选中、移动、变形的矢量元素自动保存草稿编辑中途浏览器意外关闭重新打开会从上次进度继续可导出 SVG完成的作品可以下载成独立 SVG 文件方便分享或存档。第1步从右上角进入编辑模式楼层平面图编辑器藏在编辑模式里。在首页界面右上角找到黑色的EDIT按钮点击它即可进入编辑模式进入后界面会被红色虚线框包围右侧出现侧边面板顶部多了ADD VIEW等按钮——这时你已经具备打开平面图画布的全部前置条件。 编辑模式平时用得不多主要用于初次搭建布局和偶尔调整日常浏览信息无需进入。第2步在 Space 选项卡打开背景图编辑器在右侧侧边面板顶部切换到Space选项卡管理当前空间/楼层的属性然后在下方面板中找到BACKGROUND IMAGE按钮并点击会弹出Background Image对话框提供三种方式选项说明Edit Current打开背景编辑器修改当前平面图本文主流程Choose a Template从内置模板中选择可直接用或作为起点Upload SVG上传你在外部工具做好的 SVG 文件 不想从零画先在Choose a Template里挑一个接近你家户型的模板如 Apartment、Single Story、Two Story 等再用编辑器微调效率更高。第3步拖拽素材画出墙体与房间选择Edit Current后进入全屏编辑器界面分三部分顶部元素面板Palette分三大类——Structural墙体、地板、门、窗、Features台面、壁炉、楼梯、柜子、Exterior草地、路面、围栏、地产线中央画布你的楼层平面图在这里绘制底部工具栏画布尺寸Canvas Size、对齐吸附Snap、REVERT/EXPORT/HELP等按钮。画图的三个基本操作添加把面板中的元素直接拖到画布上比如先拖Ext. Wall画出外墙轮廓变形点击任意已放置的元素即可选中墙体和区域会显示红色顶点拖动顶点就能重新塑形Ctrl拖动顶点可整体平移而不改变形状导航鼠标滚轮或/-键缩放点击空白处拖动可平移画布按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 个步骤走一遍你就能在浏览器里拥有第一张专属的家庭楼层平面图 赞分享【免费下载链接】home-informationHome Information - Your home, your data, organized.项目地址https://gitcode.com/gh_mirrors/ho/home-information点击查看免费下载相关推荐Hover Zoom终极图片悬停放大神器让你的浏览体验更上一层楼Hover Zoom终极图片悬停放大神器让你的浏览体验更上一层楼 还在为看不清网页上的小图片而烦恼吗Hover Zoom 浏览器扩展是你的完美解决方案前端OpenCore Legacy Patcher完整指南让老旧Mac免费升级最新macOS的终极方案OpenCore Legacy Patcher完整指南让老旧Mac免费升级最新macOS的终极方案 还在为苹果官方停止支持的老款Mac而烦恼吗你的2012年网盘直链下载助手指南9 大网盘取直链直连 IDM 与 Motrix网盘直链下载助手指南9 大网盘取直链直连 IDM 与 Motrix 凌晨两点网盘上躺着一个 5GB 的文件进度条一分钟只挪几十 MB。你翻遍页面也找不到真前端上一篇F´F Prime框架 Svc::DpWriter 数据产品落盘组件完全指南端口、文件格式与配置详解下一篇NanoVG与游戏引擎集成Unity和Unreal Engine的完整应用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/23 1:59:00 · 阅读 1.2k 在浏览器里画出你的家：Home Information内置楼层平面图编辑器4步上手流程
【免费下载链接】home-informationHome Information - Your home, your data, organized.项目地址https://gitcode.com/gh_mirrors/ho/home-information点击查看免费下载想把自己的家画出来Home Information 的内置楼层平面图编辑器让这件事变得很简单打开浏览器用鼠标拖拽墙体、门窗几步就能得到一张属于你的家庭平面图。不需要安装任何设计软件也不用懂 CAD全程在网页上完成还能一键导出 SVG 备份分享。本文按照「进入编辑器 → 布置元素 → 保存导出」的真实操作流程带你用4 步画好第一张家庭楼层平面图。为什么值得用内置楼层平面图编辑器Home Information 是一个开源的家庭信息面板把你家的设备、文档、监控、天气等所有信息组织在一张可视化的家的画布上。而这张画布的底图——也就是楼层平面图正是用内置编辑器画出来的✏️零门槛浏览器里拖拽操作墙体、门窗、地板、景观元素都现成结构化元素画出来的不是贴图而是可单独选中、移动、变形的矢量元素自动保存草稿编辑中途浏览器意外关闭重新打开会从上次进度继续可导出 SVG完成的作品可以下载成独立 SVG 文件方便分享或存档。第1步从右上角进入编辑模式楼层平面图编辑器藏在编辑模式里。在首页界面右上角找到黑色的EDIT按钮点击它即可进入编辑模式进入后界面会被红色虚线框包围右侧出现侧边面板顶部多了ADD VIEW等按钮——这时你已经具备打开平面图画布的全部前置条件。 编辑模式平时用得不多主要用于初次搭建布局和偶尔调整日常浏览信息无需进入。第2步在 Space 选项卡打开背景图编辑器在右侧侧边面板顶部切换到Space选项卡管理当前空间/楼层的属性然后在下方面板中找到BACKGROUND IMAGE按钮并点击会弹出Background Image对话框提供三种方式选项说明Edit Current打开背景编辑器修改当前平面图本文主流程Choose a Template从内置模板中选择可直接用或作为起点Upload SVG上传你在外部工具做好的 SVG 文件 不想从零画先在Choose a Template里挑一个接近你家户型的模板如 Apartment、Single Story、Two Story 等再用编辑器微调效率更高。第3步拖拽素材画出墙体与房间选择Edit Current后进入全屏编辑器界面分三部分顶部元素面板Palette分三大类——Structural墙体、地板、门、窗、Features台面、壁炉、楼梯、柜子、Exterior草地、路面、围栏、地产线中央画布你的楼层平面图在这里绘制底部工具栏画布尺寸Canvas Size、对齐吸附Snap、REVERT/EXPORT/HELP等按钮。画图的三个基本操作添加把面板中的元素直接拖到画布上比如先拖Ext. Wall画出外墙轮廓变形点击任意已放置的元素即可选中墙体和区域会显示红色顶点拖动顶点就能重新塑形Ctrl拖动顶点可整体平移而不改变形状导航鼠标滚轮或/-键缩放点击空白处拖动可平移画布按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 个步骤走一遍你就能在浏览器里拥有第一张专属的家庭楼层平面图 赞分享【免费下载链接】home-informationHome Information - Your home, your data, organized.项目地址https://gitcode.com/gh_mirrors/ho/home-information点击查看免费下载相关推荐Hover Zoom终极图片悬停放大神器让你的浏览体验更上一层楼Hover Zoom终极图片悬停放大神器让你的浏览体验更上一层楼 还在为看不清网页上的小图片而烦恼吗Hover Zoom 浏览器扩展是你的完美解决方案前端OpenCore Legacy Patcher完整指南让老旧Mac免费升级最新macOS的终极方案OpenCore Legacy Patcher完整指南让老旧Mac免费升级最新macOS的终极方案 还在为苹果官方停止支持的老款Mac而烦恼吗你的2012年网盘直链下载助手指南9 大网盘取直链直连 IDM 与 Motrix网盘直链下载助手指南9 大网盘取直链直连 IDM 与 Motrix 凌晨两点网盘上躺着一个 5GB 的文件进度条一分钟只挪几十 MB。你翻遍页面也找不到真前端上一篇F´F Prime框架 Svc::DpWriter 数据产品落盘组件完全指南端口、文件格式与配置详解下一篇NanoVG与游戏引擎集成Unity和Unreal Engine的完整应用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考