F1V3.0-图形-绘图框架主要功能简介

1. 参数设置

• 画布相关参数的设置。

1.1 画布范围

• 点击画布按钮，弹出设置画布范围对话框，设置画布的长、宽参数，画布范围，默认设置为1000*1000。
• 画布会根据绘制的图形内容自动扩展宽高，一般不用设置画布大小。

1.2 画布背景

• 点击工具栏背景按钮，弹出设置画布背景设置设置对话框，选择需要的颜色，确定颜色按钮，最后点击对话确定按钮应用背景色。

1.3 保存图层名称

• 点击工具栏图层名称按钮，弹出设置名称对话框，设置保存图层名称。

2 选择图形

2.1 单选

• 点击点图形（不能点击线图形，线只能框选）选中图形，站内设备图形不能进行只有变换，修改大小。

2.2 框选

• 框选只有整个图形被框选到box框中，才能选中图形。
• 按下shift键，按下鼠标左键，拉框进行多选或单选操作，框选一个图形时只能移动，不能出现其他操作按钮，多个图形被选中，选择框周围能够出现多个操作按钮。
• 按下ctrl键点击图形要素从选中集合中添加或删除该图形。

3 工具栏

3.1 保存

保存绘制的图形到数据库。

3.2 打开

• 打开保存的图形从数据库中。

3.3 撤销

• 撤销编辑操作命令，快捷键ctrl+Z。

3.4 重做

• 重做编辑操作命令，快捷键ctrl+Y。

3.5 删除

• 删除选中的图形。快捷键delete。

3.6 全图

• 缩放到到画布中所有图形内容范围。

3.7 放大

• 放大画布，快捷操作滚轴键。

3.8 缩小

• 缩小画布，快捷操作滚轴键。

3.9 导入

导入svg文档。

3.10 导出

• 导出svg文档。

3.11 图层名称

• 设置保存图层名称

3.12 画布

• 设置画布宽高。

3.13 背景

• 设置画布背景色。

3.14 对齐

• 下拉菜单按钮，选中图形进行对齐操作。

3.15 样式

• 设置选中图形样式。

3.16 电压等级

• 设置图形的电压等级。

4 图形绘制

• 进入界面后，自动新建一个新的空白图层，在此空白图层上开始绘制图形。

4.1 工具箱

• 界面的左侧为图元工具箱，包括基本图形、母线、站内设备。具体分组显示可以根据业务需要修改配置文件进行配置。
• 其中显示图元，通过js代码提前进行定义。
• 基本图元包括：圆、矩形、椭圆、文字。
• 站内图元： 包含连接点的图元。

4.2 绘制图形

4.2.1 基础绘制

• 绘制的连接线默认用正交布局的连接线。

4.2.1.1 绘制模板图元

• 鼠标移动到工具箱某个图元模板上，鼠标光标变成十字移动样式，右侧弹出图元名称提示。
• 按下鼠标左键开始拖拽模板图元，拖动图元到画布的目标位置位置，松开鼠标左键，绘图完成并选中新添加的图形。

4.2.1.2 绘制连接线

• 鼠标移动到图元的连接点上，鼠标光标变成十字形状，按下鼠标拖动鼠标，绘制连接线，到达目标图元连接点后松开鼠标左键，如果图元有下级连接图元，弹出图元选择框，单击图元，自动添加连接下级图元。
• 如果连接点的目标图形是母线，当鼠标光标变成十字移动形状时松开鼠标左键，连接线自动连接母线，连接线绘制完成。

4.2.1.3 绘制母线连接线

• 鼠标移动到母线上，光标变成十字移动形状，按下alt键同时按下鼠标左键，移动鼠标，开始绘制母线连接线，移动到目标位置或目标图元的连接点松开鼠标连接线绘制完成，如果有下级连接的图元，弹出图元选择框，如果不行进行下级图元自动连接，单击画布空白处，图元选择框消失。

4.2.1.4 绘制基本图形连接线

• 拖拽工具箱中模板图元导画布的目标位置，松开鼠标，绘制完成自动选中基本图形。图元周围出现操作按钮，选择如下图的按钮，出现不同的连接线，根据具体需要进行相应的操作。站内图元不能出现这样的按钮。

4.2.1.5 绘制文字标签

• 从工具箱中把文字模板拖拽到画布的目标位置，添加完成自动选中文字，默认内容是Text，双击文字图形，可以输入显示的文字。

4.2.2 快捷操作

• 为了提高绘制的便捷性，系统设置了一些快捷键操作。

4.2.2.1 快捷键说明

• （1）鼠标滚轮，缩放画布。
• （2）crtl+Z，撤销命令。
• （3）crtl+Y，恢复操作命令。
• （4）crtl+C复制、ctrl+V粘贴。
• （5）选中图形后，按delete键删除图形。
• （6）按住shift键，按下鼠标左键移动鼠标，可以拉框多选图形。

4.2.2.2 自动吸附到网格

• 图元添加、移动都会自动捕捉到合适的网格点上，默认一个网格的大小是10px。

4.2.2.3 级联绘制点图形

• 通过配js置文件的级联配置（设置设备的下一级可以连接哪些设备），在绘制连接线完成时，弹出下一级设备列表，直接在列表中选择对应的图形，完成绘制。
• 例如：绘制完母线后，在母线上绘制站内连接线，在绘制线完成后，弹出母线的下级设备列表，点击列表中的图形，则在对应的位置绘制列表中选中的图形。

4.2.3 图形修改

• 点击图形选中一个图形，周围出现编辑修改操作按钮。
• 按住shift键，鼠标在画布上拉框操作，选中多个图形，选中框周围出现操作按钮。

4.2.3.1 图形移动

• 移动一个图形：鼠标移动到要移动的目标图形上，鼠标光标变成十字移动形状，按下鼠标左键，移动鼠标，开始移动图形，拖动到目标位置，松开鼠标左键完成移动，与之连接的线，会自动移动。
• 移动多个图形：按下shift键，拉框选中多个图形，鼠标移动到目标图形光标变成十字移动状态，按下鼠标左键开始移动鼠标，选中图形移动，松开鼠标左键移动完成。

4.2.3.2 图形旋转

• 选中一个或多个点图形（线不能执行旋转功能），周围出现旋转按钮，且旋转角度分别为15的倍数。

4.2.3.3 图形对齐

• 选中需要对齐的图形，在工具栏对齐菜单中选择相应的对齐操作。

4.2.3.4 图形删除

• 选中要删除的图形，点击工具栏图形删除按钮，或者利用delete快捷键，将删除选中的图形，与图形连接的线也会被删除。

4.2.3.5 编辑线节点

• 鼠标移动到连接线上，单击要添加节点的位置，连接线增加节点完成。
• 鼠标移动到线图形上节点显示出来，通过鼠标拖动线的节点，可以改变线的形状及长度。

4.2.3.6 编辑文字标签

• 双击绘图区域的文字标签，可以编辑文字标签的内容。
• 选中文字标签后，点击样式设置按钮，弹出样式设备对话框，可以设置文字标签的边框、字体大小等样式。

5 图形的保存与打开

5.1 打开图层

• 点击打开图层按钮，弹出图层列表对话框，选中相应的图层后，打开图层，绘图区域将会显示打开图层中的所有图形。

5.2 图形保存

• 界面初始化时，将会默认新建一个空白的图层，在绘制完成后，点击保存按钮，则会弹出输入图层名称的对话框，输入图层名称后，点击确定，将图层及图层上的图形及相应的拓扑关系保存到数据库中。

6 导入导出

6.1 svg导入

• 点击svg导入功能，将本地的svg文件（支持导出的svg文档、老版本导出的svg文档）导入到画布中，绘图区域自动加载刚导入的svg文档内容，导入后将清除原先画布中存在的图形。

6.2 svg导出

• 点击svg导出功能按钮，弹出导出对话框，导出类型为svg文档，导出方式为导出到本地和导出到服务器端，点击确定按钮，将绘图区域的图形导出成svg文件。

7 设置图形样式

• 选中图形点击样式按钮，弹出图形样式设置对话框，选择想要的样式，单击确定按钮，样式应用到选中的图形。

8 电压等级

• 电压等级即设置图形的边框线颜色，因为颜色值不好记住，就用电压等级的值代替颜色值显示。
• 点击电压等级按钮，弹出电压等级设置对话框，选择对应的电压等级，单击确定，应用电压等级到图形样式。