第 五 章 绘图及动画 用图形方式表现监控对象

绘图(DRAW)是图形绘制工具，采用矢量绘图模式 绘图工具，绘出工业设备加工流程，产品的制造程序 采用矢量作图方式，绘出的图形包括对象大小、颜色；动画、声音以及数据连接都是动态的 图形文件格式包括Bitmaps，JPEGS，Gifs等。特点是所绘出的图形文件较小，使传输速度较快

WebAccess 的绘图工具 DRAW及DrawDAQ，是功能相同的图形绘制工具。差别是：

绘图工具 绘图工具内有许多绘图元素，如线段，曲线，圆……等 也有已预建的各种常用图库，如符号，面板，绘图精灵等，这些图库使开发过程节省许多绘图时间 这些常用图库符号，面板，绘图精灵等，可以在绘图过程中建立逐步

基本绘图工具 进入绘图工具窗口的步骤： 启动WebAccess，IP=127.0.0.1 用户名称和密码（暂略） 建立工程名称，进入工程管理员窗口 在工程管理员窗口按 开始绘图 就可进入绘图工具窗口

工程管理员窗口＞开始绘图

绘图工具窗口

右键＞ 在新窗口中打开 进入全屏绘图窗口

按右下角WebAccess图标 选 绘图DAQ ＞ 节点名称

绘图工具窗口，由<菜单><顶部工具栏><绘图区><底部工具栏><命令行>组成

顶部工具栏 当鼠标移至顶部工具栏上的图标时，会出现该图标的说明文字；它包含一些图形的基本设定及一些辅助工具；下面将分别说明各图标的功能及用途

新的DRW “新的DRW”将清除当前绘图区的所有内容，建立一个新的空白DRW窗口，第一次绘图就由此进入

打开DRW “打开DRW”同样会关闭当前绘图区的文件，将出现“打开”窗口，可选择一个已存在的DRW档案进行修改

保存DRW “保存DRW”将当前绘图区的档案存盘，及时的保存是有必要的，因为某些操作会将未保存的内容清除。

另存BGR “另存BGR”将当前的绘图区内容保存成监控界面文件，因界面的绘制和监控是分开的，绘制时用的是DRW，而在监控时界面为BGR，在界面绘制完成后需要按“另存BGR”图标，在保存的窗口中选中“保存DRW文件”，这样便可保证DRW和BGR文件的同时储存效果

保存BGR窗口中还有“保存区域”选择，可以选择是保整个区域或仅保存一部分图形 (.DRW)是绘图或更改图形用

设置图表参数 “设置图表参数”是用描述(SCRIPT)使动画效果更易控制的设置窗体。因为涉及到SCRIPT内容，所以在后面的章节再进行详细讲解

线条属性 “线条属性”将设定绘图时线条的“颜色”和“类型”，设定完成后，它将影响到“线条”、“圆”、“弧”、“椭圆”的线条效果，但它仅能影响到“多边曲线”的颜色而不会影响“多边曲线”的类型

线条宽度 刷子颜色 “线条宽度”可以设定“线条”的宽度 “刷子颜色”将设定填充颜色

文字设置 页的颜色 “文字设置”可更改预设文字效果，如“大小”、“字体”、“颜色”等参数 文字设置 页的颜色 “文字设置”可更改预设文字效果，如“大小”、“字体”、“颜色”等参数 “页的颜色”可更改预设的页面背景色，即绘图区的预设背景色

设置层 重画 “层”可以将不同的图像绘制在不同的层中，并可控制层的隐藏/显示等操作 设置层 重画 “层”可以将不同的图像绘制在不同的层中，并可控制层的隐藏/显示等操作 “重画”对绘图区内的所有图形(像)进行重新设计并显示，当出现图像异常显示时，可以用“重画”功能进行刷新画面

列出动态对象 打印 “列出动态对象”将调出记事本，并将所有动画及动态点的信息及其描述显示在记事本中 列出动态对象 打印 “列出动态对象”将调出记事本，并将所有动画及动态点的信息及其描述显示在记事本中 “打印”将调出画图程序，将当前页面中的图像转换成位图显示在画图程序中

缩放 移动 “缩放”可对某个区域进行局部放大 “Pan”可以对绘图区进行移动，将屏幕边界外的图拖至中心，相当于将图形进行排列

最后的运行窗口 初始显示 “最后的运行窗口”将显示上一次的窗口显示大小比例及位置 最后的运行窗口 初始显示 “最后的运行窗口”将显示上一次的窗口显示大小比例及位置 “初始显示”将绘图区以最初的比例及位置进行显示。即将建图像时的比例和位置，再显示出来

动画 图例 “动画”是完成动作效果的主要工具，后面“动画”章节中将会有详细介绍 动画 图例 “动画”是完成动作效果的主要工具，后面“动画”章节中将会有详细介绍 调出WebAccess预设的图例，增加到绘制图形中，节省绘制基本图形的时间

面板 窗口小部件 面板是自动化设备的图像，图中显示自动化设备的各接点及外观 面板和窗口小部件，将在后面的章节中详细介绍

工具栏 宏指令文件 工具栏，定义监控面板中的功能键 宏指令文件在已建立的宏指令文件及新建的初始窗口执行

绘图区及快捷菜单 在绘图区空白处，按右键，则出现快捷菜单，其功能与工具栏的功能是一样的，用快捷菜单是进入绘图工具的另一种好方法

底部工具栏 底部工具栏的各种图标与AutoCAD的图标用法是相同的，下面将分别说明各图标的功能与用法：

线条 先按线条图标，再利用鼠标在绘图区内按左键指定一个起点，再按左键指定一个结束点，按右键则结束，便可绘成一条线段。若不按右键，连续单击左键会将上一线段的结束点作为起点，继续绘制多条线段

在绘制过程中在“命令行”左边会显示选取“点/撤消/关闭” “点”是当前正处于工作状态的模式 “撤消”则可将刚绘制的线段逐一清除 “关闭”或“C”的功能是将最初的起始点作为下一个结束点，如此可绘成一个由线段组成的封闭的图形 也可以选取所绘的线段，然后按键盘的Del键，便可清除所绘的线段

多义线 “多义线”是最为常用的工具，利用“多义线”可以完成任意几何图形的绘制。其操作方法与“线条”类似，区别在于由“线条”绘制出的几何图形是由逐个线段组成，图形并非一个整体；而“多义线”连续绘制出的几何图形则是一个整体，无法对某一个线段进行操作。如在清除时，多义线是整体清除，而线段是清除一线段，而非整体清除

在使用“多义线”工具时，命令行将提示“点/撤消/关闭/弧”，前三项功能同“线条”相同 “弧”是将当前的状态转为弧线绘制状态，此时再确定端点时，则绘制出一根弧线 在弧线绘制状态下命令行将提示“点/撤消/关闭/切线/线条”前三项功能同前 “切线”功能是先绘制一条直线作为弧的切线，以此切线作为参考线绘制弧线 “线条”功能是将绘图状态转换回线条状态。

圆 “圆”可以绘制出一个标准的正圆。绘圆时在命令行提示“中心点/第3点/第2点”；这三项功能是绘制圆的三种方法 “中心点”是先指定圆的圆心，再选择“半径/直径”决定圆的大小 “第3点”是选择三个不在同一条直线上的点，再根据三点的切线绘制圆 “第2点”是选择两个点，以这两个点作为圆的“直径”绘制圆

弧 “弧”工具可生成一根弧线，或一个不封闭的近似正圆。画弧工具在命令行提示“开始/中心 点” “开始”是当前的弧线绘制状态，需再指定“第2点/中心 点”、“第3点/角度 点”。由经过这三点生成弧线，在“第2点”和“第3点”时可改为以“中心点”和“角度”为参考 “中心点”是先指定弧的圆心，再指点半径的起始点，再选择“末点/角度”来决定弧线

椭圆 “椭圆”可以绘制任意角度/弧度的标准椭圆。椭圆工具在命令行提示“第一个角/中心” “第一个角”选定后，再指点“另外一个角”和“角度”，根据这三个数值决定椭圆的角度、位置 “中心”是先决定椭圆的圆心，再指定“另外的角”，再指定“角度”，其操作方法类似于圆

圆饼 “圆饼”可以绘制出一个扇形或一个不完全的圆形。相当于弧再加上线段 圆饼工具在命令行提示“圆饼中心”，再选择“开始点”及“最后角度” 其操作方法类似于“弧”的中心画法，但所绘制出的图形是以圆心封闭的填充图形

矩形 “矩形”可以绘制出一个长方形或正方形 矩形工具在命令行提示“第一个角”再提示“第二个角”，由这两个点的对角线绘制填充颜色的“矩形”

多边形 “多边形”可以绘制出一个任意边数的多边形或不规则线条图形 多边形工具在命令行提示与“多义线”相同，连续指定下一个结束点，最后“关闭”形成一个封闭并填充的多边形 如果在绘制的中途停止则会生成一个不规则的线条图形

面板 “面板”工具会显示“面板设定”窗口，其中有两种格式的按钮可选择，并可调整“对切颜色”、“面板颜色”等参数更改“按钮”的效果 “面板”可以制出按钮形状的图形 “面板”工具会显示“面板设定”窗口，其中有两种格式的按钮可选择，并可调整“对切颜色”、“面板颜色”等参数更改“按钮”的效果 按钮实际上是由若干个不同颜色的线条和矩形组成的，若“群组对象”选中，则将所有的按钮元素作为一个群组操作

位图 “位图”可以将一个bmp的图形文件导入到绘图区中

文本 “文本”可以输入一段中、英文文字输入到绘图区中。 “文本”工具选中后，单击绘图区中某点，将会在该点处显示光标，可以在光标点处输入内容，按“Enter”键或右键结束输入。

捕捉设定 “捕捉设定”（Snap）设定绘图时光标移动的步长大小 “捕捉设定”工具将显示“Snap”设定对话框，在此输入移动步长的数值5至50之间的一个数值。设定完成后绘图时只能以这个数值的倍数进行移动，同时“Snap”按钮按下 捕捉设定（抓取的大小 ）

格子 正交 “格子”将控制是否在绘图区显示“放缩格子” “正交”将限制绘图光标仅能以水平或垂直方向移动

捕捉 “捕捉”或称锁点，会控制设定的“捕捉的大小”是否生效 相当于开/闭”捕捉的大小”的功能

坐标 “坐标”是WebAccess绘图工具在绘图中对图形位置进行控制的一种方法 坐标是以点为单位，以x和y轴组成的平面作为绘图区

“坐标”有绝对和相对坐标之分： (1) 绝对坐标在使用时直接输入数字进行控制即可 例如：绘制出一个圆，圆心在x=300，y=500，半径为100。单击“圆”，在命令行处输入300，500按Enter，再输入100。则一个利用坐标绘制的圆即完成了

(2) 相对坐标是以上一次的点为基点，输入一个相对以此基点的值来决定第二点。使用时需要在前面加@符号 例如：在屏幕任意位置绘制一条长300，且平行于x轴的线条。单击“线条”在屏幕任意位置单击确定第一点，再输入@300，0。一条长300且平行于x轴的线条即绘制完成 利用“坐标”可以绘制出更为精确的几何图形，“坐标”并且可以配合其它的绘图工具来完成更精确的图形大小和定位等功能

命令提示 在状态列有打入命令及提示操作方法，主要是告诉操作者，如何进行每一歩骤操作 使用窗口功能，所见即所得，只要选取就可以了。有些提示会有好几个命令，由使用者选择。各个歩骤的提示不太相同，由提示可看出含意

选取对象Ｉ、窗口 I、下一个 选取对象：按键选择一个对象。当修改，移动，复制…图件时，就需选择此命令 窗口：要选择一个或多个对象时，就可用此命令，首先按一下”窗口”选项，然后在绘图区按一下，移动鼠标拖出一个矩形，并框住所要选的对象，再按一下鼠标就行了，这表示已选择了一个或多个对象。 下一个：选择与目前所选对象最接近的对象。

选取 点I 　撒消I 　关闭 选取 点：通常前一个命令是从点开始，表示起始点，然后选取 点I 撒消I 关闭，当选择点时，表示到第二点，按左键，表示画好线段，可拖鼠标到第三点，再画下一线段，按右键表示结束 选撒消：表示所画的线段发生错误，用撒消来删除最后所画的线段 选关闭：将最后线段的终点接到第一线段的起点，而形成一封闭图形，就选此命令

绘图工具 绘图工具除了基本绘图和设定之外，还有一些可以完成使图像更精确的命令 在屏幕菜单中几乎包含全部的绘图工具和设定功能，还包括一些工具按钮图标所不具有的功能 本节将针对一些常用的工具做简单的介绍。请在绘图窗口空白处按右键，则出现快捷菜单

右键的快捷功能

一、打开DXF文件：在文件->打开DXF中可以打开AUTOCAD12的DXF文件，打开的文件在绘图工具中可以修改，并储存成BGR文件 二、修改属性，编辑->修改属性中对已有图形修改，先选中图形，再单击编辑->修改属性 三、旋转/缩放在编辑->旋转或缩放可以对选定对象以某点为中心作旋转，或做放大/缩小的“缩放” 四、水平/垂直缩放在编辑->水平/垂直比例可对图形，如“矩形”进行水平方向或垂直方向缩放

五、水平/垂直翻滚，编辑->水平/垂直翻滚可以对图形进行水平或垂直方向的翻转 六、对齐，编辑->对齐可以对多个对象的位置进行调整。如水平或垂直方向左对齐、中间对齐、右对齐 七、分布，编辑->分布可以调整多个对象的间距，可以平均各图像之间的间距 八、弹出/按下，编辑->弹出或按下可以调整对象之间的前后的层次

九、群组/拆开，编辑->群组或拆开可以将多个对象进行合并和拆开的操作。＂群组＂组合后的图像为一个整体，＂拆开＂是＂群组＂的反操作。 十、GIF和JPEG，绘图->GIF或JPE可以将GIF或JPEG文件插入到当前的绘图区中 十一、趋势设置，动态->实时趋势可以调出＂趋势设置＂对话框，可以将多个点设置在趋势图中并配以不同的颜色。则该趋势图会随对应测点的值而变化，以时间轴为横轴，绘制出趋势图形

趋势设置

趋势设置对话框可以分别对不同的点进行趋势设置，最多可设置12个点，并且可以选择是否显示时间、选择格子类型、分界线等属性。 绘图工具内状态显示栏提示选择插入趋势图的位置，确定插入位置

插入的趋势图

保存BGR 文件

动画功能 在WebAccess 绘图工具内，按顶部工具栏动画图标 右击鼠标->动态->动画，即可打开“动画属性”对话框

“动画属性”对话框

移动：使模拟点的值连结到图形，将依比例作直线运动至某一点 旋转：使模拟点的值连结到图形，将依比例旋转 颜色：改变图形的颜色，依动态点规划时所指定 比例：依模拟点的值来放大缩小图形尺寸 水平/垂直比例：依模拟点的值来决定水平、垂直的比例 直方：以矩形表示模拟点的值，矩形可以上下左右方向移动

圆饼：以圆饼表示模拟点的值。 填充：以图形的填入颜色高度表示一个点的值 框架：依不同条件显示不同图形框的结构 文字：显示模拟点的数值文字，或数字点0/1状态文字 可选取：将多种动态点聚集在同一对象下 报警状态：报警状态下，可规划常态、报警、报警认可状态下的前景、背景等颜色及圈选是否闪烁

报警类型

报警类型：确定不同类型报警的前景、背景等颜色及圈选是否闪烁 数字状态：八种数字状态下的前景、背景等颜色及圈选是否闪烁 多状态：不同界限有不同的状态前景、背景等颜色以及圈选是否闪烁。可设定各种状态下的数值标示 I/O点：实际输入、输出点，常数点、计算点、累算点

数字状态报警和多状态报警

DAQ点：系统自身的点 LOC点：通过描述编译的点 区域：点的相关区域

建立动态点的步骤如下： 建立要与动态点连结的图形 点击 动画 ，打开动画属性对话框 在点清单内选取一个点 选择移动、旋转、颜色、文字等 选择各点的属性 点击 确认

教学要求 　１、熟练运用基本绘图工具； 　２、掌握动画功能配置； 　３、了解BGR文件的导入；

思考题和实践 思考题： 有那两种绘图的方式？ 如何建立基本的动画？ 如何插入AutoCad图形？ 实践性练习题： 练习数字量点的平移和旋转。 练习模拟量点的平移和旋转。