跳到主要内容

5.6 工具箱

5.6.1 钢笔

  1. 开始:单击左键
  2. 暂停:单击右键 或 enter
  3. 结束:esc
  4. 闭合/取消闭合:enter

5.6.2 铅笔

  1. 开始:连续拖动左键
  2. 暂停:释放左键
  3. 结束:esc
  4. 闭合/取消闭合:enter

5.6.3 放大镜

用来观察图中细节。

放大镜

5.6.4 鹰眼地图(缩略图)

组态图的全局视图,鼠标点击鹰眼地图,可以在画布中快速切换中心位置。

鹰眼地图

5.6.5 连线起点

设置连线起点的箭头样式。点击图标弹出下拉菜单,可在多种箭头样式中选择,包括:无箭头、三角形、菱形、圆形、向下折线、向上折线、实心三角形、实心菱形、实心圆形、短线段。

  • 设置后会作为画布的默认起点箭头样式应用于后续新绘制的连线。
  • 若已选中一条或多条连线,则同时修改这些选中连线的起点箭头。

5.6.6 连线终点

设置连线终点的箭头样式,可选项与起点箭头相同。设置后会作为画布默认值,并同步应用到当前选中的连线。

5.6.7 连线类型

设置画布默认的连线类型。鼠标悬停展开下拉菜单,可选:

  • 曲线:平滑的贝塞尔曲线。
  • 线段:自动转折的折线段。
  • 直线:两点之间的直线。
  • 脑图曲线:脑图风格的曲线。

切换后影响后续使用钢笔/铅笔绘制的连线类型。

5.6.8 线宽

设置画布默认的连线线宽,鼠标悬停后弹出数字输入框,输入大于等于 1 的整数值。设置后会作为新绘制连线的默认线宽,若已选中连线,则同步修改选中连线的线宽。

5.6.9 视图比例

显示并调整画布的缩放比例。点击图标后弹出操作面板:

  • 缩小:每次缩小 10%。
  • 放大:每次放大 10%。
  • 窗口大小:自动适配画布内容到当前窗口(fitView)。
  • 重置:恢复到 100% 并居中视图。

5.6.10 自动锚点

开启后,连线连接到图元时会自动吸附至最近的锚点位置;关闭后需要手动连接到指定锚点。按下快捷键 Alt 可临时切换该状态。

5.6.11 禁用锚点

开启后,画布将隐藏所有图元的锚点,禁止绘制连线,常用于查看或防止误操作;再次点击可恢复显示锚点。

5.6.12 返回列表

返回到组态面板列表页。当画布存在未保存的修改时按钮不可用,请先保存或撤销修改后再返回。

5.6.13 保存

保存当前组态面板的所有修改。保存时会生成画布缩略图,并将画布数据持久化到服务器。仅在画布有改动时按钮可点击。

5.6.14 撤销修改

放弃当前所有未保存的修改,恢复到上次保存时的状态。仅在画布有改动时按钮可点击。

5.6.15 导入

从本地文件导入组态数据,根据文件后缀名自动识别格式,支持 .json.svg.zip.vsdx.dxf

5.6.15.1 SVG 文件导入

支持将任意 SVG 矢量图形文件导入为临时图元。受当前解析能力限制,存在以下不支持的场景:

  1. SVG 中复杂的渐变、CSS3 动画以及内嵌 JS 暂不支持,目前仅能较好地解析类似单线图风格的 SVG。
  2. SVG 的 CSS 优先级被简化为合并操作处理,可能与浏览器原生渲染存在差异。
  3. 不支持嵌套层级较深的 <tspan> 标签,推荐使用 AI 等工具先将 <text> 转换为 <path> 路径再导入。
  4. 暂不支持 <use> 复用标签。
  5. <path> 标签的位置计算可能存在偏差,导致由 <path> 转换出的图形不便单独选中。

5.6.15.2 JSON 文件导入

支持导入符合 meta2d.js 核心库数据结构的 JSON 文件,其中 pens 数组的数据结构必须正确,才能被正确绘制。

5.6.15.3 ZIP 文件导入

用于一次性导入画布数据及其引用的图片素材:

  1. 仅会检查压缩包中是否包含 JSON 文件,如有多个,只会使用第一个 JSON 文件作为画布数据。
  2. 压缩包内的所有图片类型文件会被自动上传到当前用户的私有图元文件夹下,并替换 JSON 中的图片引用路径。

5.6.15.4 VSDX 文件导入

支持导入 Microsoft Visio 绘图文件。对于较为复杂的文件(例如 Visio 中包含无法解析的二进制文件、嵌套文件等)的解析和部分绘制指令的兼容性存在一定局限,可能出现少部分图形表现不一致;另外对主题颜色功能的支持尚不完善,可能出现颜色不一致的情况,用户可在解析后手动调整颜色。

5.6.15.5 DXF 文件导入

支持导入 AutoCAD 图纸交换格式(DXF)文件。解析库虽已支持 CAD 的大部分元素,但对部分类型(例如标注类型和部分填充类型)目前还不支持,另外对 BLOCK 多层嵌套类型的解析也存在问题。

5.6.16 导出

将当前画布导出为本地文件,可选格式:

  • JSON:导出符合 meta2d.js 数据结构的完整画布数据,可在其他组态面板中通过导入直接生成面板。
  • PNG:导出画布的位图截图,文件名为当前面板的名称。
  • SVG:导出画布的矢量图,文件名为随机字符串。

5.6.17 刷新

强制刷新画布的实时数据,立即向后端拉取最新数据并重新渲染图元。

5.6.18 锁定

切换画布的锁定状态,三种状态循环切换:

  1. 编辑:默认状态,可以自由编辑画布中的所有图元。
  2. 预览:图元不可编辑,但保留交互(点击事件、动画等),用于预览运行效果。
  3. 锁定:图元不可编辑、不可移动,仅可查看。

5.6.19 属性面板

点击右侧箭头图标可显示或隐藏右侧的图元配置面板,便于在小屏幕上扩大画布的可视区域。