主题
组态编辑器使用手册
整体布局
整个编辑器包含基本功能按钮（顶部）、目录文件列表（左侧）、属性栏（右侧）以及画布区（中部）四个部分。 
文件管理
编辑器采用目录+文件的方式对资源文件进行管理。不同的文件类型请参考下表中的说明
| 名词 | 解释 |
|---|---|
| 图纸 | 用于最终显示的组态画面，不可在根目录下直接创建图纸。在图纸可以直接绘制各种图形元素和文本，也可以直接引用图标、图库和组件中的元素。 |
| 图标 | 图标是由用户自己制作的组件，可在图纸中重复使用。用户可以通过组态方式，自定义绘制图标内容、设置图标样式属性和绑定参数。。 |
| 图库 | 系统内置的图库，可以在图纸中使用 |
| 组件 | 平台预置的常用控件库，按类型分为：基础、表单、交互、媒体、图表等。 |
| 资源 | 主要指静态文件，包括常用的 jpg、png、gif、svg 等格式的图片，以及 mp3、mp4等格式的多媒体文件。 |
默认管理风格如下图所示： 
用户可以通过修改配置文件，将管理风格改为手风琴风格：
IMPORTANT
设置为手风琴风格后，目录结构只有两级，第一级为文件夹，第二级为文件。根目录下不可创建文件。
快捷菜单
右键单击目录，弹出快捷菜单，如下图所示：
右键单击文件，弹出快捷菜单，如下图所示：
导出资源包
在图纸列表中右键选择导出，可导出目录或图纸文件。
导入资源包
打开组态编辑器，点击主菜单的导入按钮，在弹出的文件选择对话模式中选择相应的 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则锚点会在节点矩形区域之外。 
合理使用锚点，可以使旋转、缩放等动画呈现出不同的效果。 
吸附
在组态编辑器中，可以将一个节点吸附到另外一个节点上面。设置吸附之后，当宿主节点发生位置移动旋转时，吸附到宿主节点上的节点都会跟着移动或者旋转。一个节点设置吸附之后，并不会影响到原有节点的选中、移动、旋转等交互操作。 
快捷键操作
- 空格：图纸缩放至适配大小；
- z：快速定位选中的图标；
- ctrl + z：撤销；
- ctrl + shift + z：取消撤销；
- ctrl + s：保存；
- ctrl + a：全选；
- ctrl + x：剪切；
- ctrl + c：复制；
- ctrl + v：粘贴；
- ctrl + g：打组；
- 按住 ctrl：多选；
- 按住 ctrl 拖动：细微位移、缩放、旋转；
- 按住 shift 拖动：吸附式位移、等比缩放、标准角度旋转；
- 按住 alt 拖动：复制粘贴移动；
- 按住 alt + shift 拖动：沿某一方向复制粘贴并吸附式移动；
- 按住 alt + shift + ctrl 拖动：沿某一方向复制粘贴并细微移动。
导入导出
导出 在图纸列表中右键选择导出。 
导入 打开组态编辑器，点击主菜单的导入按钮，在弹出的文件选择对话模式中选择相应的 zip 包进行导入。 
组件
组件是一系列具有动态特性和交互特性的图元库。
使用方法如下： 步骤一：拖拽组件到图纸
- 在组态编辑器中，点击左侧面板的组件选项卡。
- 在基础中，找到相应的组件，然后将该组件拖拽到画布中。
步骤二：配置组件
- 配置样式：选画面中组件，在右侧面板中，配置相应的样式。
- 配置数据绑定：样式中有多个配置项支持配置数据绑定。
- 配置动画
- 配置交互动作
大部分组件查看相应的样式列表就可以掌握使用方法，对于一些需要进行特殊说明的组件，请参考《组件使用手册》。
图标
图标是由用户自己制作的具有动态特性和交互特性的图元，可以在图纸中重复使用。
TIP
图标可以理解为用户自己制作的组件。
使用方法如下： 步骤一：拖拽图标到图纸
- 在组态编辑器中，点击左侧面板的图标选项卡。
- 在基础中，找到相应的图标，然后将该图标拖拽到画布中。
步骤二：配置图标
- 配置样式：选中画面中的图标，在右侧面板中，配置相应的样式。
- 配置数据绑定：样式中有多个配置项支持配置数据绑定。
- 配置动画
- 配置交互动作
图标的制作请参考《图标开发手册》。
图库
用于绘制组态画面的图形库，可以在图纸中使用。图库文件由官方提供，用户可以免费导入。
图库导入和下载请参考《图库手册》。
资源
主要指静态文件，包括常用的 jpg、png、gif、svg 等格式的图片，以及 mp3、mp4等格式的多媒体文件。
上传资源
在资源文件夹上点击鼠标右键，在弹出的快捷菜单中选择“上传”。 
SVG 转图纸
如果上传了 SVG 文件，可以将 SVG 图片转成图纸。 在资源目录中，选中 SVG 图片文件，点击鼠标右键，在弹出的快捷菜单中选择“转成图纸”。 
SVG 转图标
如果上传了 SVG 文件，可以将 SVG 图片转成图标。 在资源目录中，选中 SVG 图片文件，点击鼠标右键，在弹出的快捷菜单中选择“转成图标”。 如果选中多个 SVG 图片，点击鼠标右键，选择“批量转换 SVG”则自动将多个 SVG 文件转成图标。 