武汉工程职业技术学院学报Journal of Wuhan Engineering Institute
Vol.32No.4 December2020
第32卷第4期
2020年12月
基于mxGraph的组态设计器设计方案
孔晓阳代真虎
（上海宝信软件股份有限公司上海"01900）
摘要在生产监控类项目的实施过程中，利用组态设计器软件，项目实施人员可通过拖拽、配置和编写少量代码的方式，快速搭建一套满足生产现场需求的监控系统。通过对JavaScript图形库mxGraph的应用，设计实现了一个纯BS架构的组态设计器。用户无需安装任何客户端软件或插件，只需要打开浏览器页面即可进行组态画面设计，包括基本图形绘制、图元制作、数据绑定、脚本逻辑编写以及画面预览等功能。通过该设计器，解决了原CS架构组态设计器难以部署维护、难以与其他系统无缝集成、无法快速扩展到移动端等问题，给予了工业企业进行现场监控系统升级的强力技术支撑％
关键词mxGraph；BS组态；JavaScript；SVG
中图分类号:TP393文献标识码：A文章编号：1671-3524（2020）04-0022-05
随着HTML5标准的发布，在Web浏览器前端可以完成的功能，其性能水平与CS J 的前端软件之间的差距。同时众关厂商先后发布基于H5标准的产品，一时间各种前、前端解决方放。工业组软件大多基于CS，此类软件与第三方成、成以及多屏自适应等方面有诸多不便，难以适应目前工业互联网国家战略下对于工业领域IT系统的融合要求，各工业企业也于寻对自身类软件的改路径。
组态设计器软件向来是工业SCADA系统的核心部件，是工业场实施的重要工具。实BS的组器软，对工业的软署方式、实施方案等产生重大影响。首先，BS的组态设计器将大大户端部署的杂度，用户要有器便可以进行项目实施，也无需考虑客户端版维护的问题；其次，基于H5标准和互联网最新技术构建的组态工具，可以满足工业互联的大、高强度的访问请求，方便支向扩展、系统高可用等特性；还有面对大融合的工业互联要求，BS的器能够与第三方系统、移动应用等进成。
本文介绍了一种基于mxGraph开源图形库的组态设计器工具的设计方案，通过该设计器工具用户可以所所组、创建可复用图元、与底层数采数据点、编写业务逻
本以及最终运，满足了工业现场对BS J 的组器软件的需求。
1
11mxGraph
mxGraph是一个基于SVG和HTML技术进行渲染的JavaScript图形库，通过它的API，可以进行图形绘制、与图形交互以及与图形相关常用操作。mxGraph提供了一套不同L 器差异的JavaScript库，通过进行完善的抽象和封装提供给用户一致的、简洁的API。mxGraph还提供一器原型mxEditor，让使用者图形应用（的方是基于mxEditor
进行构建。mxGraph主要功能全部包含在一个JavaScript文件中，通过在HTML中引用该文，便可以进关图形操作，结合与的通数据联通、文件管理等功能，可以完成一个最的图形绘制应用。图1是mxGraph全局架构图。
1.2SVG
SVG是指Scalable Vector Graphics，即可缩放
收稿日期：2020-09-18修回日期：2020-10-20
作者简介：孔晓阳（1984〜），男，硕士，软件工程师.E-mail:kongxiaoyang@baosight
孔晓阳代真虎：基于mxGraph的组态设计器设计方案
的矢量图形，用SVG描述的图形无论如何缩放都不损失。它基于XML，通性的图形内容，与通常的位图有着的区别。SVG图形可以支持用户交互，基于器用户事件可以完成众互相关功能；SVG直接支持HTML的DOM操作，可以通过JavaScript语言动态改变SVG内容;SVG自身提供动画操作元素，可以很方便完成动画过程。SVG对于JaaScript和DOM的支持，极大地扩展了其使用和性，同时还可以CSS样式表对SVG图形进式置，更重要的是SVG支持自展属性，对于组态画面这样的复杂图形，通展属性可以各种配置信息和数息，再结合JaaScript
处理，便可基于此前端组数据刷新以展示等功能。
2组态设计器架构
2.1整体流程
所实现的组态设计器为BS架构应用程序，基于mxGraph图形库的GraphEditor示例来搭，示例中包一器的各项基能，并支展。主要包括器％、工具、元素边栏%、画面内以及台通信接口等。
器整体流程（见图2）描述如下：通过GraphEditor完成图形绘制生成内部的基于XML 语法的画面表述文本，重写画面保存接口，将画面文本发送到后台服务进行画面内容保存和，画面要是内形式的为基
于SVG的形式，同加用户等重要功能，最终方便前器运展示以及数新。'转式，内容进台存，台接收到画面运行态加载请求后，将转换好格式的画面内容发送到前端，前端运对内容进行解析，要对数、用户进取，置内容进数新和接受用户事件。
2.2设计器搭建过程
mxGraph的GraphEditor示例是一个相对完的前器，通示
应的Web工程中，并对后台对接进应调整，便可以初步运行起来。如果需要对后台对应的服务，比如画面保存服务、画面打开服务进行相应修改，则需要对与后台交互部分的进；如果要前器能、式等，要对前JavaScript A CSS等文件内容进行修改。
2.2.1初始运行设计器
GraphEditor示例在mxGraph程序包中的/javascript/examples/grapheditor目录下，其P/java目录中是两个Java程序，分别负责启动一个HTTP以一打，方中
HTTP月艮务由Tomcat容器运行，画面打开、保存等后台服务参考GraphEditor的Java示例实现。
拷贝/javascript/examples/grapheditor/目录下的/www Web工程下，目为要的路径。方案中的器目如图3所示。
*designer的index.html为组
器，此运Tomcat容器加载Web工程后，通过浏览器访问/console/designer路径可以看器运行成功，如果需要器界面的展示语言，可以通过修改mxLanguage=，zh，
武汉工程职业技术学院学报
2020.4
▼ N WebContent
▼ N console ▼ N designer ► ■ css ► ■ images A ■ js ► ■ jscolor ► ■ jseditor ► ■ resources ► ■ stencils ► ■ styles /* designer.css
<> index.html <> open.html <> viewer.html
图3设计器目录结构
来指定使用中文，同时在/resources 文件夹下增加
grapheditor_zh. txt 文件，内容可以参考/resources/ grapheditor. txt 文件。设计器初始界面如图4所
0 C I B Ka D z /--O 0■ 口 0口 屮^/ □0>e
a 口/ 心□ □O E D D / w 讹
图4设计器初始界面
2.2.2 调整后台交互
GraphEditor 示例的后端交互请求主要有以下
几种类型，包括画面新建、画面保存与画面打开，本 文通过对前 器
的请求进 ，同 >
改后台Java 接口的实现方式，对原新建、保存等操 作进 重新 ，并新
、 等后
接口。
svg图形以画面保存为例，其调用发起是在/j s/Edi-
torUI. js 文件的 EditorUi. prototype. save 函数中，
通过修改save 函数的Ajax 请求地址以及参数，可
以 保存内容
台 中，从而 自
的 保存功能。
为 加 器功能，本文还对设计器画
面提供 、画面查错等功能，需要同时对前端器 和后台 进 。首先通过/js/
Toolbar, js 中添加工具栏中的按钮入口或者在/js/
Menus, js 中添加菜单入口，然后通过ft/js/Ac
tions. js 中定义对应的action 操作，从而实现设计
器的自
能 （图5是 器的自 -
工具栏。
令矽血 +臾Q B & Q Q Verdana 12 辜 B z u $ A 么0, / e —朮 层 呻 豪 gi
图5设计器工具栏
2.2.3 设计器样式调整
首先需要明确对于整体设计器的布局是通过
/js/EditorUI. js 文件来进行定义，该文件通过ere- ateDivs 和createUI 两个方法创建了整个设计器的
样式内容，调整该方法中的div 容器创建和相应UI
组件，可以自 器样式。 中对于 器
右侧的Diagram 容器、菜单容器以及左边栏容器都
进 应的 ，图6为最终设计器 。
图6设计器界面样式
如果对于原有的div 容器需要进行删除修改等
操作，可以直接在createDivs 方法中进
，在该
方法中创建的div 容器是各个UI 的 容器o 图7是createDivs 方法截图o
/**
* Creates the required containers.*/
EditorUi prototype createDivs function i
this.t/)is.createDiv( 'geMenubarContainer 1this this ・createDiv('geToolbarContainer 1this.ateDiv('geSidebarContainer 1//this .diag ramContaine r = ateDiv('geDiagramContainer'); ateDivf 'geFooterContainer'ateDivf 'geHsplit 1图7创建div 容器
同时，本文设计器还对整体样式进行了调整，比
如
器整体系、字体等。GraphEditor 示
对于 所 有 式 的 都
/styles /grapheditor.
css 文件中，通
可以查看 器中已有UI
的所有配置classed 信息，从而可以方便地进
式 ，对于新增的UI
，也可以自 -相
关的class 、
式等。
孔晓阳 代真虎：基于mxGraph 的组态设计器设计方案
2.3画面静态结构
由于组
状态和运行状态其功能有
一定差异，比如 要能保留用户操作步骤以
此进
作，而运 要支持触发用户事
件等，所以其各自状 的
形式也有所不同（
内容以mxGraph 图形库的文档结构为基础， 为mxGraphModel ，所有图形 都是一
个mxCell 标签，在mxCell 标签中通过parent 属性 表明父子关系，通过mxGeometry
明该元素
的位置大 息， 如图8所示。图8 mxGraph 文档基本结构
在组态画面搭建过程中的所有配置属性全部体
中，比如
颜、填充比例等，对于mxCell 可以
的属性内容，可以直接进 1
置，如果不属于mxCell 可
的范围，比如图 1
、文本替换规则等，
要将这些自
属性全部添加到style 属性中，并通 置
修改
和展示这些内容。后续再次打开该画面内容时，需
要对所有已配置属性进行解析，
应的属性
置 中。基本的 式如图9所示。
页面全局配置，包括页面尺寸、缩放比例、是否
-支持缩放、自适应策略等
grid^l" gridSize=M 10" guides="l" tooLtips="r' connect=H l H id="0,7>idM'l ” parent="0'7>id="2M value="" styles"shape=SVGImage;link=Blowers/Cool%20fan x="300" y="150" width="100" height="100" as="geometry"/:id="4M value="" 370" y="360" width="120" height=H 60" as=H geometry"/>单个元素配置，自定义属性全部在style 属性中 配置，以key=value；的形式保存，包括了元素 类型、元素ID 、填充颜、旋转角度id="5M value="Text" 275" width="120" height=H 30H as="geometry"/>
mxGeometry 表明位置和大小信息
图9编辑态文档结构
事件处理是组态画面的重要功能，通过在编辑
与用户事件的关联关系以及处
I
数，以此提供组态画面交互特性，而不仅仅只是简单
的图形展示。用户事件处理内容并不与
共
同存储在同一文档中，这是因为mxGraph 的文档格
式并不支持JavaScript
存储。所以当用户进行要
器中缓存脚本内容
画面
进行保存时，将脚本内容与 内容一 「递
到后台进行处理。
画面脚本在编辑态以”元素唯一名称_事件=
function 。｛ 4的形式存储，纟
台解析 具体
元素的事 应关联 数上，同 所有用户
脚本加入到页面Vscript 〉标签中返回到前台。这
运行阶段便可以对各种用户事件进
应
的处 。
的 式 要是为 方 用户
作，侧重于图形绘制、 置等，对于展示、用户事
以及性能等
缺。运
式基于
SVG
，配合用户事件处 与数 新 ：可以展示实时数据，并基于 数据变化触发各种
动画。
台 的运 式 如图
10所示（
hModeii p ageWi d th=1440' pageHeight='900'.<mxCell .. style='t ype=Rectangle;name=Rectangle0001;.. id='1 parent =O > <mxGeometry x ='10' y=*10' width='200' height='1007><ymxCel l >— ..style=t y pe=Text;n ame=TextOOO2;t a gtext=t e stds.t a g 1; id='2parent^O'^<mxGeometry x ='400' ys'300' width='300' heighu'200 />
</scnpt> </body>
图10编辑态与运行态文档格式对比
2. 4 画面运行
用户
的画面在设计器中以mxGraph 的格
式进行存储，但是为 方便地支持动画控制、元素
新、支持图元以
分 自适应等功能，在
运行态按照HTML5 + SVG 规范进行画面组织和
展现，结合运行态JavaScript 进 台数据获取以
新。整体处理流程如图11所示。
图11画面运行流程
武汉工程职业技术学院学报
2020.4
画面数据结构（见图11左侧表格）的构建是运
新的基础，首先通过对Vsvg 〉
的
所有 进 归查（对应组合的 "抽取所有配置了数据点的元素属性；其次创建数据点到画 和属性的对应关系。有了这样的数 F 构，
通 台数据刷新获取的变化点值和名称，便
可以到对应的画面元素，最终通过SVG 的
Set A ttribute 方法更新元素属性，从而实现动态的
画面刷新效果。
3实施效果
基于本文所描述的组态设计器方案构建的组态 产品,
业 进 地应用部署，涉及智图12重庆轨交综合监控画面
4总结
本文描述了一种基于开源前端图形库mx-
Gaph 的组
器工具的 方案，利用mx-
Graph 已有的图形语义表达方式来描述组态画面，
加上对
器示例的改造，添加
、数据
绑定等业务功能；运行态通过JavaScript 语言解析
运
数 ，，
变化数据周期性更新所有元素属性内容
数
新。基于方案构建的组态产品，E
地项目中进
应用 为 业用户 新的 场 施方
用户肯定。但是该方
非常复杂
的 （超过一 ），其后台 的 式
效率不高，对用户体验有一 ，这是因为画
慧交通、石化化工、工程土建等，截止目前共计实现 销售60多套。通过引入基于HTML5标准构建的
组态技术，加 用户现场项目实施的效
的 度，同时可将一套
展 ；种
终端进行无损展示，包括 、微 等，大大降
低了第三方 成的难度。图12是重 道交
通 路的综合 项目截图展示。
用该产品进 的现场 项目，为实
施 CS 客户端软件的安装与维护工作，
画面制作一次便可以在PC 工作站、大
、手机
移动端进行多屏自适应展示，基于SVG 与H5的画 效果比 CS 力口 ，同时与
第三方信息 能够方便进 成，满足了
业现场
的融合要求。
面表示方式全部为XML 形式，随着画面复杂度提
高，其嵌套
和属性个数都会非常庞大，后台基于的
性能会有所
。
少
点嵌套、合并属性个数等改进方法，将整体性能提 升作为
产品研发的重点方向。
参考文献
郑慧娟，夏智娟•基于mxGraph 和Spring MVC 的水利工程综
合管控系统Web 在线界面图形组态研究与实现水电厂自
动化，2014，（2）：54 — 58.
刘一田，刘士奇•可视化Web 设计器计算机系统应用，
2015，（10）：80 — 84.
佟宇涵，朱欣彤，张文静•基于SVG 、Echarts 的数据可视化分 析:J '.湖北农机化,2020，（2）：124.
（下转第52页）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论