组态设计是针对已添加的组态工程的画面开发，是通过组态编辑器对各个控件、资源进行组合排版，最终生成组态画面的过程。 组态编辑器是用来开发组态画面的可视化工具，编辑器提供了绘画工具、控件、图库等图元素材，通过拖拽的方式可快速在画布上绘制出想要的画面效果，大部分控件还支持以绑定变量的形式设置属性值，实现动态数据的预览。  ### 相关限制 * 组态编辑器只能运行在PC端浏览器，虽然手机、pad也可访问，但操作体验较差，推荐使用google chrome 浏览器以达到最佳体验。 ### 功能区域  **1. 手绘控件区** [手绘控件区](%E6%89%8B%E7%BB%98%E6%8E%A7%E4%BB%B6%E5%8C%BA.md)的功能按钮从左往右依次是： 编辑状态指示、矩形控件、圆形控件、三角形控件、钢笔控件、水流控件 ，鼠标悬浮在图标上会有该控件名称的文字提示。 * 编辑状态指示：当手绘控件未生效，用户在其它功能区域操作时，该按钮为蓝色，当手绘控件生效（即点击了某个手绘控件准备绘图）时，该按钮为默认黑色。 * 矩形、圆形、三角形控件：选中对应控件，然后在画面区域内按下鼠标，拖动鼠标画出对应的图形，松开鼠标即绘制完成。 * 钢笔、水流控件：和移动图形控件配合使用，绘出的线条即为移动路径。选中对应控件，然后在画面区域单击鼠标左键，即为线条起始点，移动鼠标就会出现线条，再次单击鼠标左键就会生成一个个线段，双击鼠标左键即停止绘图，鼠标移到空白处再次双击鼠标左键，即完成控件绘制。 **2. 界面功能菜单** [界面操作菜单](%E7%95%8C%E9%9D%A2%E6%93%8D%E4%BD%9C%E8%8F%9C%E5%8D%95.md)的功能按钮从左往右依次是： 撤销、重做、显示刻度尺、显示网格、保存、预览、重新加载、用户画面显示比例、缩放到全屏 （画面内容将同比充满5、画布区域 ）、隐藏/显示区域（4、核心功能模块区）、隐藏/显示区域 （3、画面布局区 \+ 6、属性区 \+ 7、辅助功能区）、全屏（包含全部区域），鼠标悬浮在对应按钮上会有文字提示。 **3. 画面布局菜单** [画面布局菜单](%E7%94%BB%E9%9D%A2%E5%B8%83%E5%B1%80%E8%8F%9C%E5%8D%95.md)用于调整画面上控件的对齐方式及间隔大小，功能按钮从左往右依次是：水平均分、垂直均分、左对齐、水平对齐、右对齐、上对其、垂直对齐、下对齐。按住 Ctrl 键，批量选择控件，然后进行位置调整即可。 **4. 核心功能模块区** 从上到下依次是： 功能模块切换标签、功能模块文件夹列表、当前选中的文件夹内的的文件列表，可直接从列表中拖至画面区完成绘制。[核心功能模块区](%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD%E6%A8%A1%E5%9D%97%E5%8C%BA.md)分为三个部分：[画面](%E7%94%BB%E9%9D%A22.md)、[图库](%E5%9B%BE%E5%BA%932.md)、[控件](%E6%8E%A7%E4%BB%B62.md)，详细介绍请点击查看。 **5. 画布区** 从上到下依次是：已打开的画面标签、当前画面展示。 **6. 属性区** 选中画面时，该区域展示的是画面的属性，选中控件时，该区域展示的是对应控件的属性。通用属性请参阅[属性面板](%E5%B1%9E%E6%80%A7%E9%9D%A2%E6%9D%BF.md) **7. 辅助功能区** [辅助功能区](%E8%BE%85%E5%8A%A9%E5%8A%9F%E8%83%BD%E5%8C%BA.md)列表展示的是当前画面上所有的控件清单， 图层是将一个画面分多个层次控制展示。