组态编辑器使用手册

整体布局

整个编辑器包含基本功能按钮（顶部）、目录文件列表（左侧）、属性栏（右侧）以及画布区（中部）四个部分。

文件管理

编辑器采用目录+文件的方式对资源文件进行管理。不同的文件类型请参考下表中的说明

名词	解释
图纸	用于最终显示的组态画面，不可在根目录下直接创建图纸。在图纸可以直接绘制各种图形元素和文本，也可以直接引用图标、图库和组件中的元素。
图标	图标是由用户自己制作的组件，可在图纸中重复使用。用户可以通过组态方式，自定义绘制图标内容、设置图标样式属性和绑定参数。。
图库	系统内置的图库，可以在图纸中使用
组件	平台预置的常用控件库，按类型分为：基础、表单、交互、媒体、图表等。
资源	主要指静态文件，包括常用的 jpg、png、gif、svg 等格式的图片，以及 mp3、mp4等格式的多媒体文件。

默认管理风格如下图所示：用户可以通过修改配置文件，将管理风格改为手风琴风格：

DANGER

设置为手风琴风格后，目录结构只有两级，第一级为文件夹，第二级为文件。根目录下不可创建文件。

常用操作

右键单击目录，选择新建进行新建操作；
选中并右键单击拷贝，在新的位置右键单击粘贴进行拷贝操作；
点击下面输入相关内容可进行模糊查询，旁边显示路径及调整缩略图显示大小；
双击打开图纸，图标和组件拖入图纸中使用；
右键单击可以导出，选择包含的依赖后，会将图纸或图标中包含的资源一并导出成 zip 格式的压缩包，可将以相同方式导出的压缩包导入实现资源的备份和转移。

画布

画布是用于绘制图纸和图标的操作区域。本章节主要介绍画面的基本设置和操作方式。

画布缩放

有多种方式可以调整画布缩放比例。

方式一通过鼠标滚轮缩放画布

方式二在缩放显示上拖动鼠标

方式三缩放到全屏 点击缩放到全屏按钮，当前面画布中的内容自动缩放到合适比例。 方法四触屏操作 有触控板的电脑，可以将鼠标放置到想要缩放的位置，然后两指向外（放大）或者两指向里（缩小) 控制对应位置视图的缩放。

画布移动

可通过按住鼠标将画布进行的上下移动，也可以借助触控板进行上下左右四个方向的移动。

网络指导线

勾选“网络可见”可开启网格指导线，可设置网络大小、间隔、颜色等参数，如下图所示：设置网格角度为“倾斜”便于绘制 2.5D 图纸：

参考指导线

1.新建指导线

当鼠标在中间画布的横向或者纵向刻度上移动时，会出现指导线，并提示当前位置数据，点击鼠标将在这个位置创建指导线。

2.使用指导线

在画布中移动图元，可将图元吸附到指导线上。

3.修改指导线

鼠标移动到某个指导线上，点击拖拽到某处，可修改指导线位置。

4.清除指导线

鼠标移动到指导线上，点击拖拽到刻度线外侧且出现删除图标时，松开鼠标，消除该指导线。鼠标在刻度线上右侧，可清除相应轴的指导线。

绘图

绘图功能在工具栏中，提供可绘制的线、形状、文字等。

不规则图形

定位点与控制点：不规则图形工具是由定位点与控制点组成的，定位点用于指示每条线段的起点和终点，控制点是用于控制每段曲线弯曲程度。借助不规则图形工具，您可以通过创建定位点的方式来绘制直线和曲线（系统会使用直线或曲线将您创建的定位点连接起来）

双击或按ESC 退出绘制状态。

如需绘制直线，请执行以下操作：

从工具栏中选择“不规则图形工具”。
在画布中点击您希望开始绘制第一条线段的位置，
然后再点击一下您希望该线段结束的位置。
继续点击，以便设置其他直线段的定位点。当前定位点比其他定位点要大，以表明该定位点处于选中状态
当您继续添加新的定位点时，之前的定位点会变为未选中状态。
按住Shift键可绘制0⁰、45⁰、90⁰ 的直线。

要绘制曲线

从工具栏中选择“不规则图形工具“
每次点击绘制新的点时不要松开鼠标左键，直至拖动出满意的曲线锚点为止。（不规则图形工具的曲线锚点符合三次贝塞尔曲线规则）

更复杂的路径

组合直线和曲线。您可以在同一路径中绘制直线和曲线的组合。在设置每个定位点时，点击可添加直线段，点击并拖动则可添加曲线段。
闭合路径。您可以绘制闭合路径，以便创建通过形状工具无法绘制的更为复杂的形状。要将路径闭合，只需在最后一次点击时点击第一个定位点即可。

点位编辑：

双击图形进入编辑模式。
如需移动定位点，请长按定位点，然后将要移动的定位点拖动到新位置。
如需添加定位点，请选择添加定位点，或将鼠标悬停在相应线条上，直到矢量光标变为“添加定位点”光标。然后，点击路径即可添加其他定位点。
如需移除定位点，请选择删除定位点，然后点击您要移除的定位点。路径将会改变，以适应剩余的定位点。

其它图形

矩形

使用步骤：

点击工具栏矩形工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制矩形
绘制完成，会自动退出绘画状态，若未绘画，可按Esc或回车键退出绘画状态
绘制完成的矩形组件可在右侧面板配置样式及交互

椭圆形

使用步骤：

点击工具栏椭圆形工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制椭圆形（按住Shift 键可以绘制圆形）
绘制完成，会自动退出绘画状态，若未绘画，可按 Esc或回车键退出绘画状态
绘制完成的椭圆形组件可在右侧面板配置样式及交互

IMPORTANT

圆形属于椭圆型的一种特殊形式，绘制时按住 Shift 键可以绘制圆形。

圆弧形

使用步骤：

点击工具栏圆弧形工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制圆弧形
绘制完成，会自动退出绘画状态，若未绘画，可按 Esc或回车键退出绘画状态
绘制完成的圆弧形组件可在右侧面板配置样式及交互

三角形

使用步骤：

点击工具栏三角形工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制三角形
绘制完成，会自动退出绘画状态，若未绘画，可按 Esc或回车键退出绘画状态
绘制完成的三角形组件可在右侧面板配置样式及交互

矩形

使用步骤：

点击工具栏矩形工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制矩形（按住Shift 键可以绘制正方形）
绘制完成，会自动退出绘画状态，若未绘画，可按 Esc 或回车键退出绘画状态
绘制完成的矩形元素可在右侧面板配置样式及交互

IMPORTANT

正方形属于矩形的一种特殊形式，绘制时按住 Shift 键可以绘制正方形。

星形

使用步骤：

点击工具栏星形工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制星形
绘制完成，会自动退出绘画状态，若未绘画，可按 Esc 或回车键退出绘画状态
绘制完成的星形组件可在右侧面板配置样式及交互

文本

使用步骤：

点击工具栏文本工具，将鼠标移至画布中，按下鼠标并拖动即可进行绘制文本
绘制完成，会自动退出绘画状态，若未绘画，可按Esc或回车键退出绘画状态
绘制完成的文本组件可在右侧面板配置样式及交互

连线

连线主要用于图元之间的连接，常用于生产、加工、工序流程图等。使用步骤：

点击工具栏连线工具，将鼠标移至画布中。
在起始图元上按下鼠标，在目标图元上松开鼠标，创建连接。
双击连线调整形状，完成绘制。
绘制完成的连线可在右侧面板配置样式。

管道

管道组件主要指流体流动的通道，可以配置流体动画。根据是否锚定在图元节点上（移动图元节点时，管道连线也随着图元一起移动），将管道分为管道连线和普通管道。

IMPORTANT

自由管道的新建和修改方法同【不规则图形】。管道连线的新建和修改方法同【连线】。

图纸

图纸是用于最终显示的图形画面。在图纸中，可以直接绘制各种图形元素、文本、连线、管道等，也可以直接引用图标、图库、组件、资源中的元素。

图纸类型

图纸分为“常规图纸”和“模板图纸”两种类型。图纸模板主要用于以下几种使用场景，以达到图纸复用的目的：

多个设备共用同一张图纸，比如通过点击设备进入设备详情页或者弹窗方式显示设备详情。
通过变量替换，实现多条产线或车间共用一张图纸。

屏幕适配

用户可通过“屏幕适配”选项设置图纸自适应显示屏幕的方式，默认为适配内容。三种适配方式，表现形式如下：

适配内容

在确保缩放比例不变的情况下，对画面内容进行缩放，以确保画面中的所有元素在屏幕中可见。

适配宽度（适用于手机端访问）

在确保缩放比例不变的情况下，对画面内容进行缩放，以确保只需要垂直滚动即可查看画面中的全部元素。

根据图纸设置的实际宽高尺寸进行显示。

节点操作

节点选择

鼠标移至图元节点位置，提示可选中鼠标点击选中图元节点，control/command+鼠标点击选中多个节点。按住 Ctrl/Cmd，鼠标框选一个或者多个节点。

shift范围选择 按住shift，点击节点，可连续选择多个节点。

全部选择 快捷键Ctrl/Cmd + A全选

节点移动

拖拽选中组件改变节点位置。拖拽节点过程，若长按shift键，可保持在某个方向移动。

节点缩放

点击选择节点，拖拽外框控制点进行缩放。按住shift键时，拖拽控制点保持等比例缩放。

节点旋转

选中节点，将鼠标移到节点外框的控制点附近时，将显示旋转光标，按住鼠标进行拖动可对节点进行旋转。

节点对齐/均分

选中多个元素，实现对多个节点元素对齐或均分排列。

节点控制

选中图元节点后，可在右侧样式栏中，设置该节点的默认行为。

操作名称	说明
可见	该节点是否在画布中显示
可选中	该节点是否在画布中可选中，设置为不可选中后，可在节点列表上选中
可移动	该节点是否可移动
可编辑	设置为不可编辑后，选中的节点不再显示控制点。
像素精确	如果勾选了像素精确，只有点击到图形的可见内容上才能选中。

节点列表

在画布中，图元列表是图纸中用到图元节点的汇总列表，支持模糊搜索。可拖拽修改节点的层级。可单选某个节点、组合中的某个子节点，使用command/control+click选中多个节点，也可以右键菜单进行操作。

快捷菜单 菜单栏解释如下表：

操作名称	说明
复制	复制
粘贴	粘贴
删除	删除
移到顶层	在画布的最上一层显示
移到底层	在画布的最下一层显示
上移一层	向上移动一层
下移一层	向下移动一层
组合	将多个节点组合为一个块节点
解组	将成组的块节点解散为多个普通节点

锚点

锚点是节点上的一个重要的概念，所有图形节点呈现在画布上的都是一个矩形区域，而锚点是决定了矩形区域中哪个位置是节点的坐标点位置。锚点值是一个百分比数值，{x:0,y:0}是在区域左上角，{x:1,y:1}是在区域右下角，默认是以{x:0.5,y:0.5}为锚点，也就是图元中心点，如果大于1或者小于0则锚点会在节点矩形区域之外。合理使用锚点，可以使旋转、缩放等动画呈现出不同的效果。