DIY可视化设计工具

猿急送>北京Android兼职程序员>陆衍>

案例列表

基本信息

案例ID：241033

技术顾问：陆衍 - 10年经验 - 集团生产

联系沟通

微信扫码，建群沟通

项目名称：DIY可视化设计工具

所属行业：企业服务 - 行业细分软件

->查看更多案例

案例介绍

设计搭建
型材选型：左侧面板内置 8 种规格（2020 / 2040 / 3030 / 3060 / 4040 / 4080 / 6060 / 8080），SVG 截面缩略图预览
3D 画布：网格底面 + 轨道控制（平移/旋转/缩放视角）
放置型材：点击型材规格 → 点击画布放置，支持切换放置方向（Z轴 / X轴，快捷键 X）
幽灵预览：放置时半透明预览跟随鼠标
磁吸对齐：自动吸附到网格点、其他型材端点、中点
磁吸指示器：吸附时显示黄/红/绿颜色圆点视觉反馈
编辑操作
选择工具 (V)：点击型材选中，右侧显示属性
移动工具 (G)：拖拽选中的型材在地面平移，支持网格吸附
旋转工具 (R)：点击型材每次旋转 90°
删除工具 (D)：点击型材直接删除，悬停变红色预警
属性编辑：右侧面板可精确编辑长度、XYZ 位置、XYZ 旋转角度
智能匹配
连接件推荐：选中型材后自动分析周边连接关系，推荐角码 / T型螺母 / 内置连接件 / 直角连接件，标注连接类型（L型/T型/直线）
配件支持
配件面板：左侧"配件"标签页，包含板材（亚克力板/铝塑板/木板）、脚垫、脚轮、合页、拉手
清单与导出
BOM 自动生成：底部面板汇总所有型材规格、数量、总长、重量，附连接件推荐用量
Excel 导出：一键导出 .xlsx 格式 BOM 清单
历史与持久化
撤销/重做：Ctrl+Z / Ctrl+Y，最多 50 步
自动保存：设计数据自动写入 localStorage，刷新不丢失
手动保存/清空：工具栏提供保存和清空按钮
视图辅助
ViewCube：右上角 3D 方向导航块
网格开关：工具栏网格显示/隐藏
坐标轴：原点 XYZ 三色轴线
边线渲染：型材轮廓边线，选中时高亮蓝色