Dieline 应用使用说明

下面的指南将帮助你快速上手“软包装框线图（Dieline）”绘制工具，并系统了解各功能区与常用操作。界面与术语与本项目中文字典一致。

适用对象

  • 包装工程师、设计师、生产与打样前的结构确认
  • 需要快速出图（SVG/PNG）或用于沟通的框线图草案

快速上手

  1. 打开页面 → Dieline
  • 访问路径：/{lang}/dieline（例如中文为 /cn/dieline，英文为 /en/dieline）
  1. 选择袋型并放到画布
  • 在左/右侧“组件区”找到“主框线/Basic Components”，点击如“三边封、自立袋、K形袋”等组件，即可放置到画布。
  1. 调整属性
  • 选中画布中的组件，在“属性面板”中修改尺寸（宽、高）、封边（边封/底封）、圆角、线型、颜色、是否显示标注等。
  1. 添加功能组件
  • 从组件区继续添加“撕口、挂孔/飞机孔、拉链、表格、文本”等；拖动到合适位置，或用属性精确定位。
  1. 导出图纸
  • 使用工具栏“导出”，选择 SVG 或 PNG 保存；建议在导出前使用“居中”“重置缩放”“显示网格/标注”等优化版面。

界面总览

  • 工具栏（Toolbar）
    • 新建项目、打开项目、保存项目
    • 视图控制：放大、缩小、重置缩放（100%）、居中视图
    • 网格开关：在画布显示/隐藏参考网格
    • 导出：输出为 SVG/PNG 图片
  • 画布（Canvas）
    • 主绘图区，可拖拽、选择、移动组件
    • 支持缩放、居中
    • 可显示网格与标注
  • 组件区（ComponentList）
    • 基本袋型：三边封（Three Seal）、自立袋（Stand Up）、K形袋（K Seal）
    • 功能组件：撕口（2×2 / 2×1）、挂孔、飞机孔、拉链、表格、文本等
    • 点击即添加到画布
  • 属性面板（PropertyPanel）
    • 展示当前选中组件的可编辑属性
    • 通用：位置(X/Y)、尺寸(Width/Height)、颜色、线型
    • 组件特有：如底袋高度、拉链宽度、标注开关与字号等
  • 日志（Log Viewer，若显示）
    • 展示关键操作、错误提示或内部信息（可选）

绘制与编辑

  • 添加组件
    • 在组件区点击任意组件，自动添加到画布
    • 可重复添加多个同类组件（如多个撕口或多个挂孔）
  • 选择与移动
    • 点击选择组件；拖动移动位置
    • 复杂定位用属性面板中的 X/Y 精确设置
  • 删除
    • 选中组件，点击属性面板中的“删除”按钮（或在工具栏/右键菜单，如果有）
  • 层级与重叠
    • 若存在遮挡，可调整位置与尺寸，或分步骤添加
    • 如需固定主框线，建议先完成主框线尺寸，再逐步添加功能组件

属性说明（常用）

不同组件的属性会有所差异，以下为常见属性项：

  • 位置与尺寸
    • X / Y：组件左上角坐标
    • Width / Height：组件宽高
    • Radius：圆角半径（适用于某些袋型或孔类）
  • 线条与颜色
    • Stroke Width：线宽
    • Stroke Dash：线型（实线/虚线/点线）
    • Color：线条颜色
    • Fill Color / Seal Fill Color：填充色（若适用）
  • 标注
    • Show Labels：显示/隐藏标注与尺寸标记
    • Label Font Size：标注字号
  • 袋型特有
    • Three Seal（三边封）：Side Seal（边封）、Bottom Seal（底封）
    • Stand Up（自立袋）：Gusset Height（底袋高度）
    • K Seal（K形袋）：K Seal 相关几何参数（如字典所示）
  • 功能组件特有
    • Tear（撕口 2×2/2×1）：位置（Location/Left/Right/Top/Bottom）、偏移（OffsetX/OffsetY）
    • Hole（挂孔）：直径（Diameter）、位置
    • Plane Hole（飞机孔）：尺寸（Plane Width/Height）、位置
    • Zipper（拉链）：Zipper Width（拉链宽度）、位置
    • Table（表格）：行列与外观（依据当前实现）
    • Text（文本）：Content（内容）、Font Family（字体）、Font Size（字号）、Font Weight（粗细）、Font Color（颜色）、Rotation（旋转）等
  • 其他辅助
    • Distance：某些标注或构造的距离参数
    • Type / Position：用于区分类别或方位（如上/下/左/右）
    • Code/Name/CompanyName/Specification/Drawing/Approval/Date：表格或标题栏类组件可用的字段

提示：组件可用属性以实际界面为准，某些属性仅在特定组件出现。

视图与网格

  • 缩放
    • Zoom In / Zoom Out：放大/缩小
    • Reset Zoom（100%）：重置到默认比例
    • Scale 限制：通常在 10%～400%
  • 居中视图
    • Center View：将画布内容置于可视范围中央
  • 网格与标注
    • Toggle Grid：显示/隐藏网格，方便对齐
    • Show Labels + Label Font Size：显示尺寸标注与控制其大小

项目管理

  • 新建项目（New Project）
    • 若当前项目未保存，会提示确认
    • 需要输入“项目名称”以便保存
  • 打开项目（Open Project）
    • 从列表中选择已保存的项目
    • 若当前未保存，同样会提示确认
  • 保存项目（Save Project）
    • 输入或确认项目名称，保存当前画布与组件参数
    • 建议在关键节点保存不同版本

注意：项目存储依赖当前浏览器环境（本地存储/IndexedDB 等），清理浏览器数据可能会清空历史项目。

导出

  • 格式：SVG 或 PNG
  • 建议：
    • 导出前使用“居中视图”“重置缩放”，确保构图完整
    • PNG 更适合预览与沟通，SVG 更适合二次编辑或工程对接
    • 如需高分辨率位图，可在较大画布尺寸下导出 PNG

示例流程

  1. 三边封 + 拉链 + 撕口
  • 添加“三边封”主框线，设置宽度/高度、边封与底封参数
  • 添加“拉链”组件，调整拉链宽度与位置（通常靠近袋口）
  • 添加“撕口（2×1 或 2×2）”组件，选择侧边位置并微调 Offset
  • 如需标注：开启“Show Labels”，设置 Label Font Size
  • 预览无误后，导出为 SVG/PNG
  1. 自立袋 + 飞机孔
  • 添加“自立袋（Stand Up）”，设置宽/高与底袋高度（Gusset Height）
  • 添加“飞机孔（Plane Hole）”，设置 Plane Width/Height 与位置（居中靠近袋口）
  • 根据需要添加“文本”或“表格”作为标题栏/说明
  • 导出图纸，与团队共享

常见问题与提示

  • 单位与比例
    • 工具内部以像素为基本单位；打印时请在矢量软件中统一到毫米/英寸
    • 打印比例请在打印设置中校准，或导入 CAD/AI 软件进一步标注
  • 组件对齐
    • 结合“网格”与精确的 X/Y 值
    • 若需对称布局，可手动计算中心线（宽度/2）做参考
  • 文本字体
    • 字体受浏览器与系统影响，导出 SVG 后在矢量软件中可替换为规范字体
  • 浏览器兼容与性能
    • 推荐使用最新版本的 Chrome/Edge
    • 大量组件或大画布时，适当分段保存与导出
  • 数据安全
    • 本地项目存储可能随浏览器数据清理丢失；重要项目请导出 SVG 并纳入版本管理

版本与语言

  • 多语言支持：中文/英文
  • 进入 /{lang}/dieline 自动根据路径选择字典语言