线框图工具

使用说明

1. 先在右侧“画布设置”里选好桌面、笔记本、平板或手机尺寸，再在左侧组件库点击组件放到画面中央，也可以直接把组件拖进画布。
2. 选中对象后，在右侧属性面板修改填充、边框、文字、字号以及位置和大小；同时选中多个对象可用“⋯ 更多”里的“对齐”“编组”排整齐，做错了按 Ctrl＋Z 撤销。
3. 完成后点“导出 PNG”下载图片（可选 1～3 倍分辨率），或点“导出 JSON”保存可继续编辑的文件，之后用“导入 JSON”接着画。

实际示例

在 800×600 的编辑区打开 1440×900 的桌面画布，点“适应画面”时缩放 = min((800 − 80) ÷ 1440, (600 − 80) ÷ 900) = min(0.5, 0.58) = 50%，画布居中后左右各留 40px、上下各留 75px；换成 375×812 的手机画布则是 (600 − 80) ÷ 812 ≈ 64%。

对象 A（X 100、Y 50、宽 200、高 40）和 B（X 400、Y 120、宽 100、高 100）一起选中后点“左对齐”，B 向左移动 300 到 X 100；改点“底端对齐”，两者下边缘都对齐到 220，A 向下移动 130。只选 A 点“右对齐”时改为对齐画布右边缘，A 向右移动 1140 到 X 1240。

开启“吸附网格”后，把对象拖到 X 14 会吸附到 10，拖到 X 15 会吸附到 20。2026 年 10 月 14 日 15:30 导出的图片文件名是 wireframe-20261014-1530.png，同一分钟导出的 JSON 则是 wireframe-20261014-1530.json。

结果怎么看

• 上方的缩放百分比只影响显示，不影响对象的实际尺寸和导出结果；属性面板中的 X、Y、宽、高始终是 100% 时的像素，X、Y 是对象左上角相对画布底板左上角的位置。
• 按钮、卡片、表格这类组件是由多个图形组成的编组：属性面板里的填充和边框改的是主体（例如按钮底色），文字栏改的是主要标签；要单独修改其中的小部件，请先点“取消编组”。
• 状态栏显示“已自动保存到此浏览器”表示草稿已写入；如果出现红字的无法保存提示（无痕模式或存储空间已满），请马上用“导出 JSON”备份。

原理与计算方法

• 画布使用开源的 Fabric.js 6 在 HTML canvas 上绘制，每个组件是一组矢量图形（矩形、圆形、线条、文字），缩放查看时不会模糊。
• 对齐：只选一个对象时以画布底板为基准，选多个时以所有对象外框的并集为基准，计算每个对象外框（含旋转后的范围）需要的水平或垂直位移。
• 撤销与重做：每次修改后把整个画布存为一条 JSON 快照，最多保留 100 条；内容没有变化不记录，撤销后再做新修改会丢弃后面可重做的记录。
• 存档：自动保存和导出都是 {app, version, canvas} 格式的 JSON。导入时检查格式版本和每个对象的类型，只接受本工具会生成的图形和文字，图片、图案等会加载外部资源的内容一律拒绝。
• 导出 PNG：临时把视图恢复到 100%，只裁切画布底板范围并按倍率放大绘制，再用浏览器的 canvas.toBlob 生成 PNG，全程不经过服务器。

适用限制

• 只适合规划页面布局和信息架构，没有可点击的交互原型、多页面跳转、公共组件或多人协作。
• 不能插入真实图片或图标，也不能导出 SVG、PDF；需要清晰的图片请选 PNG 3×。
• 草稿保存在单个浏览器的 localStorage 中（容量通常约 5 MB），内容非常多时可能存不下；导入文件上限 10 MB，画布宽高上限 5000 px，用 3× 导出超大画布可能超出浏览器的 canvas 尺寸限制而失败。
• 文字使用设备上的系统字体，同一个 JSON 在不同电脑或语言环境下打开，字宽和换行可能略有不同。

常见问题

💬 没找到答案？反馈这个工具的问题或提出建议