2024年4月16日发(作者：微生燕岚)

第

32

卷第

4

期

2020

年

12

月

武汉工程职业技术学院学报

Journal

of

Wuhan

Engineering

Institute

Vol.

32

No.

4

December

2020

基于

mxGraph

的组态设计器设计方案

孔晓阳代真虎

（

上海宝信软件股份有限公司上海

"

01900

）

摘

要

在生产监控类项目的实施过程中

，

利用组态设计器软件

，

项目实施人员可通过拖拽

、

配置

和编写少量代码的方式

，

快速搭建一套满足生产现场需求的监控系统

。

通过对

JavaScript

图形库

mxGraph

的应用，设计实现了

一个纯

BS

架构的组态设计器

。

用户无需安装任何客户端软件或插

件

，只需要打开浏览器页面即可进行组态画面设计，

包括基本图形绘制

、

图元制作

、

数据绑定

、

脚本

逻辑编写以及画面预览等功能

。

通过该设计器

，

解决了原

CS

架构组态设计器难以部署维护

、

难以

与其他系统无缝集成

、

无法快速扩展到移动端等问题

，

给予了工业企业进行现场监控系统升级的强

力技术支撑

％

关键词

mxGraph

；

BS

组态

；

JavaScript

；

SVG

中图分类号

:

TP393

文献标识码

：

A

文章编号

：

1671-3524

（

2020

）

04-0022-05

随着

HTML5

标准的发布

，

在

Web

浏览器前端

可以完成的功能

，

其性能水平与

CS

J

组态设计器工具的设计方案

，

通过该设计器工具用

户可以所

所

图元

、

与底层数采

组

、

创建可复用

的前端软件之间的差距

、

前端解决方

。同时众

关

数据点

、

编写业务逻

厂商先后发布基于

H5

标准的产品

，

一时间各种前

本以及最终运

，

满足了工业现场对

BS

J

放

。

工业

组

，

此类软件与

第

的组

器软件的需求

。

软件大多基于

CS

三方

成

、

成以及多屏自适应等方面

1

1

mxGraph

1

有诸多不便

，

难以适应目前工业互联网国家战略下

对于工业领域

IT

系统的融合要求

，

各工业企业也

于寻找对自身

类软件的改

路径

。

mxGraph

是一个基于

SVG

和

HTML

技术进

组态设计器软件向来是工业

SCADA

系统的核

心部件

，

是工业

BS

的组

行渲染的

JavaScript

图形库

，

通过它

的

场实施的重要工具

。

实

API,

可以进行图形绘制

、

与图形交互以及与图形相

器软

，

对工业

关常用操作

。

mxGraph

提供了

一套

不同

L

的软

先

，

BS

署方式

、

实施方案等产生重大影响

。

首

的组态设计器将大大

要有

器差异的

JavaScript

库

，

通过进行完善的抽象和封

装提供给用户一致的

、

简洁的

API

。

mxGraph

还提

供一

器原型

mxEditor,

让使用者

图

形应用

（

的

方

是基于

mxEditor

进行构建

。

mxGraph

主要功能全部包含在一个

JavaScript

文件中

，

通过在

HTML

户端部署的

杂度

，

用户

器便可以进行项目实施

，

也无需考虑客户端版

维护的问题

；

其次

，

基于

H5

标准和互联网最新技术构建的组态工具

，

可以

中引用该文

的通

满足工业互联

求

，

方便支

的大

、

高强度的访问请

的

，

便可以进

关图形操作

，

结合与

向扩展

、

系统高可用等特性

；

还有面

器能够与

数据联通

、

文件管理等功能

，可以完成一个最

的图形绘制应用

。

图

1

是

mxGraph

全局架构图

。

1.

2

SVG

SVG

是指

Scalable

Vector

Graphics

，

即可缩放

对大融合的工业互联要求

，

BS

第三方系统

、

移动应用等进

成

。

本文介绍了一种基于

mxGraph

开源图形库的

收稿日期

：

2020-09-18

修回日期

：

2020-10-20

作者简介

：

孔晓阳

（

1984

〜

）

，

男

，

硕士

，

软件工程师

.

E-mail

:

kongxiaoyang

@

baosight.

com

22

孔晓阳

代真虎

：

基于

mxGraph

的组态设计器设计方案

收到画面运行态加载请求后

，

将转换好格式的画面

内容发送到前端,前端运

对

内容进行解析

，

要对数

、

用户

进

取

，

置内

容进

数

新和接受用户事件

。

的矢量图形

，

用

SVG

描述的图形无论如何缩放都不

损失

的

。

它基于

XML

，

通

性

的

图形内容

，

与通常的位图有着

区别

。

SVG

图形可以支持用户交互

，

基于

器用

户事件可以完成众

互相关功能

；

SVG

直接支持

HTML

的

DOM

操作

，

可以通过

JavaScript

语言动

态改变

SVG

内容;

SVG

自身提供动画操作元素

，

可

以很方便完成动画过程

。

SVG

对于

JaaScript

和

DOM

的支持

，

极大地扩展了其使用

和

性

，

展属性

，

2.2

设计器搭建过程

mxGraph

的

GraphEditor

示例是一个相对完

同时还可以

CSS

样式表对

SVG

图形进

式

置

，

更重要的是

SVG

各种配置信息和数

支持自

的前

器

，

通

示

对于组态画面这样的复杂图形

，

通

展属性可以

数据刷

应的

Web

工程中

，

并对后台对接

进

应调

息

，

再结合

JaaScript

前端组

整

，

便可以初步运行起来

。

如果需要对后台对应的

处理

，

便可基于此

新以

服务

，比如画面保存服务

、

画面打开服务进行相应修

改,则需要对与后台交互部分的

展示等功能

。

进

；

如果

要前

器

能

、

式

等

，

要对前

2

组态设计器架构

2.1

整体流程

所实现的组态设计器为

BS

架构应用程

JavaScript

A

CSS

等文件内容进行修改

。

2.2.1

初始运行设计器

GraphEditor

示例在

mxGraph

程序包中的

/javascript/examples/grapheditor

目录下

，

其

P/ja

­

序

，

基于

mxGraph

图形库的

GraphEditor

示例来搭

，

示例中包

、

元素边栏

%

台通信接口等

。

一

器的各项基

器

能

，

并

、工具

以及

va

目录中是两个

Java

程序，

分别负责启动一个

HTTP

以

一

打

，

方

中

HTTP

月艮务由

Tomcat

容器运行

，

画面打开

、

保存等

支

展

。

主要包括

％

、

画面内

后台服务参考

GraphEditor

的

Java

示例实现

。

拷贝

/javascript/examples/grapheditor/

目

录下

器整体流程

（

见图

2

）

描述如下

：

通过

GraphEditor

完成图形绘制生成内部的基于

XML

的

/www

要的路径

。

所示

。

Web

工程下

，

目

为

如图

3

方案中的

器目

语法的画面表述文本

，

重写画面保存接口

，将画面文

本发送到后台服务进行画面内容保存和

，画面

为

基

于

*

designer

的

index.

html

为组

要

是

内

形

式

的

展示以及数

器

，

此

运

Tomcat

容器加载

Web

工

程后

，

通过浏览器访问

/console/designer

路径可以

SVG

的形式

，

同

加用户

等重要功能

，最终

新

。

'转

方便前

式

，

器运

看

器

运行成功

，

如果需要

器界

内容进

台存

，

台

接

面的展示语言

，

可以通过修改

mxLanguage=

，

zh

，

23

武汉工程职业技术学院学报

2020.4

▼

N

WebContent

Toolbar,

js

中

添

加工具栏中的按钮入口或者在

/js/

Menus,

js

中添加菜单入口

，

然后通过

ft/js/Ac

­

▼

N

console

▼

N

designer

►

■

css

►

■

images

A

■

js

►

■ jscolor

►

■

jseditor

►

■

resources

►

■

stencils

►

■

styles

/*

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

图

3

设计器目录结构

组件

，

可以

自

器样式

。

中对于

器

右侧的

Diagram

容器、

菜单容器以及左边栏容器都

来指定使用中文

，同时在

/resources

文件夹下增加

进

应的

，

图

6

为最终设计器

。

grapheditor_zh.

txt

文件

，

内容可以参考/

resources/

grapheditor.

txt

文件

。

设计器初始界面如图

4

所

□

■

-

0

□

□

C

0

-

O

>

0

O

0

I

口

B

E

e

Ka

D

a

口

D

D

屮

^

z

/

口

/

/

/

w

心

讹

图

6

设计器界面样式

如果对于原有的

div

容器需要进行删除

修

改等

操作

，

可以直接在

createDivs

方法中进

图

4

设计器初始界

面

，

在该

方法中创建的

div

容器是各个

UI

的

容器

o

图

7

是

createDivs

方法截图

o

2.2.2

调整后台交互

GraphEditor

示例的后端交互请求主要有以下

几种类型

，

包括画面新建

、

画面保存与画面打开

，

本

文通过对前

器

的请求进

，

同

>

i

/**

*

Creates

the

required

containers.

*/

EditorUi

.

prototype

.

createDivs

function

()

改后台

Java

接口的实现方式

，

对原新建

、

保存等操

作进

重新

，

并新

、

等后

this.

menubarContainer

t/

)

Div(

'geMenubarContainer

1

);

this

.toolbarcontainer

this

・

createDiv(

'geToolbarContainer

1

);

this.

sidebarContainer

t

Div(

'geSidebarContainer

1

);

//this

.

diag

ramContaine

r

=

Div('geDiagramContainer'

);

this.

footercontainer

=

Divf

'geFooterContainer'

);

this.

hsplit

this.

createDivf

'

geHsplit

1

);

图

7

创建

div

容器

接口

。

以画面保存为例

，

其调用发起是在

/j

s/Edi-

torUI.

js

文件的

EditorUi.

prototype.

save

函数中

，

通过修改

save

函数的

Ajax

请求地址以及参数

，

可

如

同时

，

本文设计器还对整体样式进行了调整

，

比

器整体色系、

字体等

。

GraphEditor

示

以

保存内容

的

保存功能

。

台

中

，

从而

自

对于

所

有

式

的

都

/

styles

/

grapheditor.

css

文件中

，

通

器功能

，

本文还对设计器画

可以

查

看

器中已有

UI

为

加

的所有配置

classed

信息

，

从而可以方便地进

面提供

、

画面查错等功能

，

需要同时对前端

式

，

对于新增的

UI

式等

。

，

也可以自

-相

器

和后

台

进

。

首先通过

/js/

关的

class

、

24

孔晓阳

代真虎

：

基于

mxGraph

的组态设计器设计方案

2.3

画面静态结构

由于组

状态和运行状态其功能有

到后台进行处理

。

画面脚本在编辑态以

”

元素唯一名称

_

事件

=

function

。

｛

4

的形式存储

，

纟

一定差异

，

比如

此进

要能保留用户操作步骤以

要支持触发用

户

事

的

形

式

也有所不同

（

台解析

具体

作

，

而运

元素的事

应关联

数上

，

同

所有用户

件等,所以其各自状

脚本加入到页面

Vscript

〉

标签中返回到前台

。

这

内容以

mxGraph

图形库的文档结构为基础

，

运行阶段便可以对各种用户事件进

的处

。

应

为

mxGraphModel

，

所有图形

都是一

个

mxCell

标签

，

在

mxCell

标签中通过

parent

属性

表明父子关系

，

通过

mxGeometry

明该元素

的

式

要是为

方

用户

作

，

侧重于图形绘制

、

置等

，

对于展示

、

用户事

式基于

的位置大

息

，

如图

8

所示

。

以及性能等

SVG

缺

。

运

，配合用户事件处

与数

新

:

数据变化触发各种

可以展示实时数据

，

并基于

动画

。

10

所示

（

台

的运

式

如图

hModeiipageWidth=

1440'

pageHeight='

900

'.

..

style='

x='

type=Rectangle;name=Rectangle0001;.

10'

y=*10'

width='200'

height='1007>

.

id='1

parent=O>

—

^

..

style=

type=Text;name=TextOOO2;tagtext=

1

;

id='2

parent^O'

x='400'

ys'300'

width='300'

heighu'200

/>

图

8

mxGraph

文档基本结构

在组态画面搭建过程中的所有配置属性全部体

中

，

比如

于

mxCell

可以

颜色

、

填充比例等

，

对

的范围

，

比如图

要将这些自

1

的属性内容

，

可以直接进

1

属

修改

图

10

编辑态与运行态文档格式对比

置

，

如果不属于

mxCell

可

、

文本替换规则等

，

性全部添加到

style

属性中

，

并通

要对所有已配置属性进行解析

，

置

和展示这些内容

。

后续再次打开该画面内容时

，

需

应的属性

2.

4

画面运行

用户

置

中

。

基本的

式如图

9

所示

。

页面全局配置

，

包括页面尺寸

、

缩放比例

、

是否

-支持缩放

、

自适应策略等

的画面在设计器中以

mxGraph

的格

方便地支持动画控制

、

元素

式进行存储,但是为

新

、

支持图元以

单个元素配置

，

自定义属性全部在

style

属性中

配置

，

以

key=value;

的形式保存

，

包括了元素

类型

、

元素

ID

、

填充颜色

、

旋转角度

grid^l"

gridSize=

M

10"

guides="l"

tooLtips="r'

connect=

H

l

H

id="0

,

”

7>

idM'lparent="0'7>

id="2

M

value=""

styles"shape=SVGImage;link=Blowers/Cool%20fan

x="300"

y="150"

width="100"

height="100"

as="geometry"/:

id="4

M

value=""

style="rounded=l;whiteSpace=wrap;editable^®

;t

ry

x="370"

y="360"

width="120"

height=

H

60"

as=

H

geometry"/>

id="5

M

value="Text"

style="text

;

align=center

;

verticalAlign=mi

x=

M

430H

y="275"

width="120"

height=

H

30

H

as="geometry"/>

分

自适应等功能

，

在

运行态按照

HTML5

+

SVG

规范进行画面组织和

展现

，

结合运行态

JavaScript

进

台数据获取以

新

。

整体处理流程如图

11

所示

。

mxGeometry

表明位置和大小信息

图

9

编辑态文档结构

事件处理是组态画面的重要功能

，

通过在编辑

与用户事件的关联关系以及处

的图形展示

。

用户事件处理内容并不与

I

数

，

以此提供组态画面交互特性

，

而不仅仅只是简单

共

同存储在同一文档中

，

这是因为

mxGraph

的文档格

式并不支持

JavaScript

要

存储

。

所以当用户进行

器中缓存脚本内容

画面

图

11

画面运行流程

进行保存时,将脚本内容与

内容一

「

递

25

武汉工程职业技术学院学报

2020.4

画面数据结构（

见图

11

左侧表格

）

的构建是运

新的基础

，

首先通过对

Vsvg

〉

慧交通

、石化化工

、

工程土建等

，

截止目前共计实现

销售

60

多套

。

通过引入基于

HTML5

标准构建的

的

所有

进

归查找

（

对应组合的

"

抽取所

组态技术

，

加

用户现场项目实施的效

的

度

，

同时可将一套

有配置了数据点的元素属性；其次创建数据点到画

展

；

种

和属性的对应关系

。

有了这样的数

F

构

，

终端进行无损展示

，

包括

、

微

等

，

大大降

通

台数据刷新获取的变化点值和名称

，

便

低了第三方

成的难度

。

图

12

是重

道交

可以找到对应的画面元素

，

最终通过

SVG

的

通

路的综合

项目截图展示

。

Set

Attribute

方法更新元素属性

，

从而实现动态的

画面刷新效果

。

用该产品进

的现场

项目

，

为实

施

CS

客户端软件的安装与维护工作

，

、

手机

画面制作一次便可以在

PC

工作站

、

大

3

实施效果

基于本文所描述的组态设计器方案构建的组态

产品

,

移动端进行多屏自适应展示

，

基于

SVG

与

H5

的画

效果比

CS

第三方信息

业现场

力口

，

同时与

能够方便进

成

，

满足了

业

进 地应用部署

，

涉及智

的融合要求

。

图

12

重庆轨交综合监控画

面

面表示方式全部为

XML

形式

，

随着画面复杂度提

4

总结

本文描述了一种基于开源前端图形库

mx-

高

，

其嵌套

的

和属性个数都会非常庞大

，

后台基于

性能会有所

。

少

点嵌套

、

合并属性个数等改进方法

，

将整体性能提

升作为

产品研发的重点方向

。

Gaph

的组

加上对

器工具的

方案

，

利用

mx-

Graph

已有的图形语义表达方式来描述组态画面

，

器示例的改造

，

添加

、

数据

参考文献

郑慧娟

，

夏智娟•基于

mxGraph

和

Spring

MVC

的水利工程综

绑定等业务功能

；

运行态通过

JavaScript

语言解析

运

数

，

，

数

变化数据

新

。

基于

地项目中进

合管控系统

Web

在线界面图形组态研究与实现水电厂自

周期性更新所有元素属性内容

动化

，

2014

，

（

2

）

：54

—

58.

刘一田

，

刘士奇

•

可视化

Web

设计器计算机系统应用

，

方案构建的组态产品

，

E

2015

，

（

10

）

：

80

—

84.

佟宇涵

，

朱欣彤

，

张文静•基于

SVG

、

Echarts

的数据可视化分

析:

J

'

.

湖北农机化

,2020

，

（

2

）

：

124.

应用

为

业用户

新的

场

施方

非常复杂

用户肯定

。

但是该方

的

（

超过一

）

，

其后台

的

式

（

下转第

52

页）

效率不高

，

对用户体验有一

，

这是因为画

26

武汉工程职业技术学院学报

2020.4

流亡在大西北的牛汉

，

以丰盈的诗歌创作

，

展示

了在光明与黑暗之间

，

在苦难与希望之中挣扎求

索

的一代青年知识分子的人生选择及命运变迁的历

程

（

无论是充

满

祖灵诱惑的草原

，

抑或民族疲敝现

参考文献

&

1

'牛汉•我是怎样写

《

鄂尔多斯草原

》

的

•牛汉诗文集

（

第

3

卷

）

:

M'.

北京

：人民文学出版社

2010:173.

实命运象征的沙漠以及灵魂净化与生命皈依之所的

“

黄土

0

诗人牛汉都自觉地将诗歌的触角深入到历

：

2

：

牛汉.沙漠散歌

•

牛汉诗文集

（

第

1

卷

）：

M1

北京

：

人民文学出

版社

2010

：

22

：

3

：

牛汉.绵绵土

•

牛汉诗文集

（

第

3

卷

）

：

M1

北京

：

人民文学出版

社

2010

：

3152

：

4

：

牛汉.塑造梦的泥土

•

牛汉诗文集

（

第

4

卷

）

：

M

：

.

北京

：

人民文

学

版社

2010

：

364

—

3662

：

5

：

牛汉.我仍在苦苦跋涉—

—

牛汉自述:

M

：

.±

海

：

生活

•

读书•

新知三联书店

2008:283.

史、

民众之中

，

一方面用沉

郁

的心绪去抒写那悲哀的

北方

、

逃难的人群以及残破的土地

，

在历史的图

景

中

呈现人民的苦难

；

另一方面也在诗中融合着那青春

的梦幻与激情

，

并以激荡昂扬的姿态去感怀着家国

的命运

#

展望着民族的未来新生

（

Songof@heSonof@heEar@h

+++

On@he

Triple

Images

of

Niu

Han

s

Early

Poe@ry

LiKun

(Zhixing

College#

Northwest

Normal

University#

Lanzhou

730070

#

Gansu)

Abs@rac@

:

AftertheoutbreakoftheAnti-Japanese

Warin1937

#

Niu

Han

vagranted

with

his

father

to

the

northwest

and

began

to

write

poems

with

heart

and

soul

#

which

took

him

t

o

the

initial

peak

in

his

poet

­

ry

career.

In

Niu

Han

?

s

early

poetry

,

grassland

,

desert

and

land

are

the

three

most

important

images.

TheyarerespecivelyrelaIedIoandsymbolizeIhemysIeriousIempIaIionofIhespirisofancesIors

#

Ihere-

alisIicfaIeofnaIionalexhausion

#

hreeelemenIs

are

also

the

important

components

of

Niu

Han

?

s

early

plain

,

deep

and

heavyhearted

national

poetry.

Keywords

:

Niuhan

；

journeytothenorthwest

；

nationalpoetry

；

poeticimage

(责任编辑

：

李文英)

(上接第

26

页

)

Design

Scheme

of

Configuration

Designer

Based

on

MxGraph

KongXiaoyang

DaiZhenhu

(

.

#

Shanghai201900

)

Abs@rac@

:

Intheimplementationprocessofproduction

monitoringprojects

#

projectprogrammerscan

quicklybuilda

monitoring

system

that

meetstheneedsoftheproductionsitebydragging

#

configuring

#

andthrticledesignsand

implementsapureBSarchitectureconfigurationdesignerthroughtheapplicationoftheJavaScriptgraphics

library

mxGraph.

Users

do

not

need

to

install

any

software

or

plug-ins

,

they

can

click

on

the

browser

page

todesigntheconfigurationpage

#

toachievebasicgraphicsdrawing

#

dosymbolsdesigning

#

databinding

#

licationofthisdesignerbringsanendtotaskslikethede-

ploymentand

maintenance

of

the

original

CS

architecture

configuration

designer

#

seamless

integratation

withasecondsystem

#

makingitavailabletoany

idesconsolidatedtechnicalsupport

forindustrialenterprisestoupgradeon-sitemonitoringsystems.

Key

words

：

mxGraph

；

BS

configuration

；

JavaScript

；

SVG

（

责任编辑

：

李文英

）

52

2024年4月16日发(作者：微生燕岚)

第

32

卷第

4

期

2020

年

12

月

武汉工程职业技术学院学报

Journal

of

Wuhan

Engineering

Institute

Vol.

32

No.

4

December

2020

基于

mxGraph

的组态设计器设计方案

孔晓阳代真虎

（

上海宝信软件股份有限公司上海

"

01900

）

摘

要

在生产监控类项目的实施过程中

，

利用组态设计器软件

，

项目实施人员可通过拖拽

、

配置

和编写少量代码的方式

，

快速搭建一套满足生产现场需求的监控系统

。

通过对

JavaScript

图形库

mxGraph

的应用，设计实现了

一个纯

BS

架构的组态设计器

。

用户无需安装任何客户端软件或插

件

，只需要打开浏览器页面即可进行组态画面设计，

包括基本图形绘制

、

图元制作

、

数据绑定

、

脚本

逻辑编写以及画面预览等功能

。

通过该设计器

，

解决了原

CS

架构组态设计器难以部署维护

、

难以

与其他系统无缝集成

、

无法快速扩展到移动端等问题

，

给予了工业企业进行现场监控系统升级的强

力技术支撑

％

关键词

mxGraph

；

BS

组态

；

JavaScript

；

SVG

中图分类号

:

TP393

文献标识码

：

A

文章编号

：

1671-3524

（

2020

）

04-0022-05

随着

HTML5

标准的发布

，

在

Web

浏览器前端

可以完成的功能

，

其性能水平与

CS

J

组态设计器工具的设计方案

，

通过该设计器工具用

户可以所

所

图元

、

与底层数采

组

、

创建可复用

的前端软件之间的差距

、

前端解决方

。同时众

关

数据点

、

编写业务逻

厂商先后发布基于

H5

标准的产品

，

一时间各种前

本以及最终运

，

满足了工业现场对

BS

J

放

。

工业

组

，

此类软件与

第

的组

器软件的需求

。

软件大多基于

CS

三方

成

、

成以及多屏自适应等方面

1

1

mxGraph

1

有诸多不便

，

难以适应目前工业互联网国家战略下

对于工业领域

IT

系统的融合要求

，

各工业企业也

于寻找对自身

类软件的改

路径

。

mxGraph

是一个基于

SVG

和

HTML

技术进

组态设计器软件向来是工业

SCADA

系统的核

心部件

，

是工业

BS

的组

行渲染的

JavaScript

图形库

，

通过它

的

场实施的重要工具

。

实

API,

可以进行图形绘制

、

与图形交互以及与图形相

器软

，

对工业

关常用操作

。

mxGraph

提供了

一套

不同

L

的软

先

，

BS

署方式

、

实施方案等产生重大影响

。

首

的组态设计器将大大

要有

器差异的

JavaScript

库

，

通过进行完善的抽象和封

装提供给用户一致的

、

简洁的

API

。

mxGraph

还提

供一

器原型

mxEditor,

让使用者

图

形应用

（

的

方

是基于

mxEditor

进行构建

。

mxGraph

主要功能全部包含在一个

JavaScript

文件中

，

通过在

HTML

户端部署的

杂度

，

用户

器便可以进行项目实施

，

也无需考虑客户端版

维护的问题

；

其次

，

基于

H5

标准和互联网最新技术构建的组态工具

，

可以

中引用该文

的通

满足工业互联

求

，

方便支

的大

、

高强度的访问请

的

，

便可以进

关图形操作

，

结合与

向扩展

、

系统高可用等特性

；

还有面

器能够与

数据联通

、

文件管理等功能

，可以完成一个最

的图形绘制应用

。

图

1

是

mxGraph

全局架构图

。

1.

2

SVG

SVG

是指

Scalable

Vector

Graphics

，

即可缩放

对大融合的工业互联要求

，

BS

第三方系统

、

移动应用等进

成

。

本文介绍了一种基于

mxGraph

开源图形库的

收稿日期

：

2020-09-18

修回日期

：

2020-10-20

作者简介

：

孔晓阳

（

1984

〜

）

，

男

，

硕士

，

软件工程师

.

E-mail

:

kongxiaoyang

@

baosight.

com

22

孔晓阳

代真虎

：

基于

mxGraph

的组态设计器设计方案

收到画面运行态加载请求后

，

将转换好格式的画面

内容发送到前端,前端运

对

内容进行解析

，

要对数

、

用户

进

取

，

置内

容进

数

新和接受用户事件

。

的矢量图形

，

用

SVG

描述的图形无论如何缩放都不

损失

的

。

它基于

XML

，

通

性

的

图形内容

，

与通常的位图有着

区别

。

SVG

图形可以支持用户交互

，

基于

器用

户事件可以完成众

互相关功能

；

SVG

直接支持

HTML

的

DOM

操作

，

可以通过

JavaScript

语言动

态改变

SVG

内容;

SVG

自身提供动画操作元素

，

可

以很方便完成动画过程

。

SVG

对于

JaaScript

和

DOM

的支持

，

极大地扩展了其使用

和

性

，

展属性

，

2.2

设计器搭建过程

mxGraph

的

GraphEditor

示例是一个相对完

同时还可以

CSS

样式表对

SVG

图形进

式

置

，

更重要的是

SVG

各种配置信息和数

支持自

的前

器

，

通

示

对于组态画面这样的复杂图形

，

通

展属性可以

数据刷

应的

Web

工程中

，

并对后台对接

进

应调

息

，

再结合

JaaScript

前端组

整

，

便可以初步运行起来

。

如果需要对后台对应的

处理

，

便可基于此

新以

服务

，比如画面保存服务

、

画面打开服务进行相应修

改,则需要对与后台交互部分的

展示等功能

。

进

；

如果

要前

器

能

、

式

等

，

要对前

2

组态设计器架构

2.1

整体流程

所实现的组态设计器为

BS

架构应用程

JavaScript

A

CSS

等文件内容进行修改

。

2.2.1

初始运行设计器

GraphEditor

示例在

mxGraph

程序包中的

/javascript/examples/grapheditor

目录下

，

其

P/ja

­

序

，

基于

mxGraph

图形库的

GraphEditor

示例来搭

，

示例中包

、

元素边栏

%

台通信接口等

。

一

器的各项基

器

能

，

并

、工具

以及

va

目录中是两个

Java

程序，

分别负责启动一个

HTTP

以

一

打

，

方

中

HTTP

月艮务由

Tomcat

容器运行

，

画面打开

、

保存等

支

展

。

主要包括

％

、

画面内

后台服务参考

GraphEditor

的

Java

示例实现

。

拷贝

/javascript/examples/grapheditor/

目

录下

器整体流程

（

见图

2

）

描述如下

：

通过

GraphEditor

完成图形绘制生成内部的基于

XML

的

/www

要的路径

。

所示

。

Web

工程下

，

目

为

如图

3

方案中的

器目

语法的画面表述文本

，

重写画面保存接口

，将画面文

本发送到后台服务进行画面内容保存和

，画面

为

基

于

*

designer

的

index.

html

为组

要

是

内

形

式

的

展示以及数

器

，

此

运

Tomcat

容器加载

Web

工

程后

，

通过浏览器访问

/console/designer

路径可以

SVG

的形式

，

同

加用户

等重要功能

，最终

新

。

'转

方便前

式

，

器运

看

器

运行成功

，

如果需要

器界

内容进

台存

，

台

接

面的展示语言

，

可以通过修改

mxLanguage=

，

zh

，

23

武汉工程职业技术学院学报

2020.4

▼

N

WebContent

Toolbar,

js

中

添

加工具栏中的按钮入口或者在

/js/

Menus,

js

中添加菜单入口

，

然后通过

ft/js/Ac

­

▼

N

console

▼

N

designer

►

■

css

►

■

images

A

■

js

►

■ jscolor

►

■

jseditor

►

■

resources

►

■

stencils

►

■

styles

/*

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

图

3

设计器目录结构

组件

，

可以

自

器样式

。

中对于

器

右侧的

Diagram

容器、

菜单容器以及左边栏容器都

来指定使用中文

，同时在

/resources

文件夹下增加

进

应的

，

图

6

为最终设计器

。

grapheditor_zh.

txt

文件

，

内容可以参考/

resources/

grapheditor.

txt

文件

。

设计器初始界面如图

4

所

□

■

-

0

□

□

C

0

-

O

>

0

O

0

I

口

B

E

e

Ka

D

a

口

D

D

屮

^

z

/

口

/

/

/

w

心

讹

图

6

设计器界面样式

如果对于原有的

div

容器需要进行删除

修

改等

操作

，

可以直接在

createDivs

方法中进

图

4

设计器初始界

面

，

在该

方法中创建的

div

容器是各个

UI

的

容器

o

图

7

是

createDivs

方法截图

o

2.2.2

调整后台交互

GraphEditor

示例的后端交互请求主要有以下

几种类型

，

包括画面新建

、

画面保存与画面打开

，

本

文通过对前

器

的请求进

，

同

>

i

/**

*

Creates

the

required

containers.

*/

EditorUi

.

prototype

.

createDivs

function

()

改后台

Java

接口的实现方式

，

对原新建

、

保存等操

作进

重新

，

并新

、

等后

this.

menubarContainer

t/

)

Div(

'geMenubarContainer

1

);

this

.toolbarcontainer

this

・

createDiv(

'geToolbarContainer

1

);

this.

sidebarContainer

t

Div(

'geSidebarContainer

1

);

//this

.

diag

ramContaine

r

=

Div('geDiagramContainer'

);

this.

footercontainer

=

Divf

'geFooterContainer'

);

this.

hsplit

this.

createDivf

'

geHsplit

1

);

图

7

创建

div

容器

接口

。

以画面保存为例

，

其调用发起是在

/j

s/Edi-

torUI.

js

文件的

EditorUi.

prototype.

save

函数中

，

通过修改

save

函数的

Ajax

请求地址以及参数

，

可

如

同时

，

本文设计器还对整体样式进行了调整

，

比

器整体色系、

字体等

。

GraphEditor

示

以

保存内容

的

保存功能

。

台

中

，

从而

自

对于

所

有

式

的

都

/

styles

/

grapheditor.

css

文件中

，

通

器功能

，

本文还对设计器画

可以

查

看

器中已有

UI

为

加

的所有配置

classed

信息

，

从而可以方便地进

面提供

、

画面查错等功能

，

需要同时对前端

式

，

对于新增的

UI

式等

。

，

也可以自

-相

器

和后

台

进

。

首先通过

/js/

关的

class

、

24

孔晓阳

代真虎

：

基于

mxGraph

的组态设计器设计方案

2.3

画面静态结构

由于组

状态和运行状态其功能有

到后台进行处理

。

画面脚本在编辑态以

”

元素唯一名称

_

事件

=

function

。

｛

4

的形式存储

，

纟

一定差异

，

比如

此进

要能保留用户操作步骤以

要支持触发用

户

事

的

形

式

也有所不同

（

台解析

具体

作

，

而运

元素的事

应关联

数上

，

同

所有用户

件等,所以其各自状

脚本加入到页面

Vscript

〉

标签中返回到前台

。

这

内容以

mxGraph

图形库的文档结构为基础

，

运行阶段便可以对各种用户事件进

的处

。

应

为

mxGraphModel

，

所有图形

都是一

个

mxCell

标签

，

在

mxCell

标签中通过

parent

属性

表明父子关系

，

通过

mxGeometry

明该元素

的

式

要是为

方

用户

作

，

侧重于图形绘制

、

置等

，

对于展示

、

用户事

式基于

的位置大

息

，

如图

8

所示

。

以及性能等

SVG

缺

。

运

，配合用户事件处

与数

新

:

数据变化触发各种

可以展示实时数据

，

并基于

动画

。

10

所示

（

台

的运

式

如图

hModeiipageWidth=

1440'

pageHeight='

900

'.

..

style='

x='

type=Rectangle;name=Rectangle0001;.

10'

y=*10'

width='200'

height='1007>

.

id='1

parent=O>

—

^

..

style=

type=Text;name=TextOOO2;tagtext=

1

;

id='2

parent^O'

x='400'

ys'300'

width='300'

heighu'200

/>

图

8

mxGraph

文档基本结构

在组态画面搭建过程中的所有配置属性全部体

中

，

比如

于

mxCell

可以

颜色

、

填充比例等

，

对

的范围

，

比如图

要将这些自

1

的属性内容

，

可以直接进

1

属

修改

图

10

编辑态与运行态文档格式对比

置

，

如果不属于

mxCell

可

、

文本替换规则等

，

性全部添加到

style

属性中

，

并通

要对所有已配置属性进行解析

，

置

和展示这些内容

。

后续再次打开该画面内容时

，

需

应的属性

2.

4

画面运行

用户

置

中

。

基本的

式如图

9

所示

。

页面全局配置

，

包括页面尺寸

、

缩放比例

、

是否

-支持缩放

、

自适应策略等

的画面在设计器中以

mxGraph

的格

方便地支持动画控制

、

元素

式进行存储,但是为

新

、

支持图元以

单个元素配置

，

自定义属性全部在

style

属性中

配置

，

以

key=value;

的形式保存

，

包括了元素

类型

、

元素

ID

、

填充颜色

、

旋转角度

grid^l"

gridSize=

M

10"

guides="l"

tooLtips="r'

connect=

H

l

H

id="0

,

”

7>

idM'lparent="0'7>

id="2

M

value=""

styles"shape=SVGImage;link=Blowers/Cool%20fan

x="300"

y="150"

width="100"

height="100"

as="geometry"/:

id="4

M

value=""

style="rounded=l;whiteSpace=wrap;editable^®

;t

ry

x="370"

y="360"

width="120"

height=

H

60"

as=

H

geometry"/>

id="5

M

value="Text"

style="text

;

align=center

;

verticalAlign=mi

x=

M

430H

y="275"

width="120"

height=

H

30

H

as="geometry"/>

分

自适应等功能

，

在

运行态按照

HTML5

+

SVG

规范进行画面组织和

展现

，

结合运行态

JavaScript

进

台数据获取以

新

。

整体处理流程如图

11

所示

。

mxGeometry

表明位置和大小信息

图

9

编辑态文档结构

事件处理是组态画面的重要功能

，

通过在编辑

与用户事件的关联关系以及处

的图形展示

。

用户事件处理内容并不与

I

数

，

以此提供组态画面交互特性

，

而不仅仅只是简单

共

同存储在同一文档中

，

这是因为

mxGraph

的文档格

式并不支持

JavaScript

要

存储

。

所以当用户进行

器中缓存脚本内容

画面

图

11

画面运行流程

进行保存时,将脚本内容与

内容一

「

递

25

武汉工程职业技术学院学报

2020.4

画面数据结构（

见图

11

左侧表格

）

的构建是运

新的基础

，

首先通过对

Vsvg

〉

慧交通

、石化化工

、

工程土建等

，

截止目前共计实现

销售

60

多套

。

通过引入基于

HTML5

标准构建的

的

所有

进

归查找

（

对应组合的

"

抽取所

组态技术

，

加

用户现场项目实施的效

的

度

，

同时可将一套

有配置了数据点的元素属性；其次创建数据点到画

展

；

种

和属性的对应关系

。

有了这样的数

F

构

，

终端进行无损展示

，

包括

、

微

等

，

大大降

通

台数据刷新获取的变化点值和名称

，

便

低了第三方

成的难度

。

图

12

是重

道交

可以找到对应的画面元素

，

最终通过

SVG

的

通

路的综合

项目截图展示

。

Set

Attribute

方法更新元素属性

，

从而实现动态的

画面刷新效果

。

用该产品进

的现场

项目

，

为实

施

CS

客户端软件的安装与维护工作

，

、

手机

画面制作一次便可以在

PC

工作站

、

大

3

实施效果

基于本文所描述的组态设计器方案构建的组态

产品

,

移动端进行多屏自适应展示

，

基于

SVG

与

H5

的画

效果比

CS

第三方信息

业现场

力口

，

同时与

能够方便进

成

，

满足了

业

进 地应用部署

，

涉及智

的融合要求

。

图

12

重庆轨交综合监控画

面

面表示方式全部为

XML

形式

，

随着画面复杂度提

4

总结

本文描述了一种基于开源前端图形库

mx-

高

，

其嵌套

的

和属性个数都会非常庞大

，

后台基于

性能会有所

。

少

点嵌套

、

合并属性个数等改进方法

，

将整体性能提

升作为

产品研发的重点方向

。

Gaph

的组

加上对

器工具的

方案

，

利用

mx-

Graph

已有的图形语义表达方式来描述组态画面

，

器示例的改造

，

添加

、

数据

参考文献

郑慧娟

，

夏智娟•基于

mxGraph

和

Spring

MVC

的水利工程综

绑定等业务功能

；

运行态通过

JavaScript

语言解析

运

数

，

，

数

变化数据

新

。

基于

地项目中进

合管控系统

Web

在线界面图形组态研究与实现水电厂自

周期性更新所有元素属性内容

动化

，

2014

，

（

2

）

：54

—

58.

刘一田

，

刘士奇

•

可视化

Web

设计器计算机系统应用

，

方案构建的组态产品

，

E

2015

，

（

10

）

：

80

—

84.

佟宇涵

，

朱欣彤

，

张文静•基于

SVG

、

Echarts

的数据可视化分

析:

J

'

.

湖北农机化

,2020

，

（

2

）

：

124.

应用

为

业用户

新的

场

施方

非常复杂

用户肯定

。

但是该方

的

（

超过一

）

，

其后台

的

式

（

下转第

52

页）

效率不高

，

对用户体验有一

，

这是因为画

26

武汉工程职业技术学院学报

2020.4

流亡在大西北的牛汉

，

以丰盈的诗歌创作

，

展示

了在光明与黑暗之间

，

在苦难与希望之中挣扎求

索

的一代青年知识分子的人生选择及命运变迁的历

程

（

无论是充

满

祖灵诱惑的草原

，

抑或民族疲敝现

参考文献

&

1

'牛汉•我是怎样写

《

鄂尔多斯草原

》

的

•牛汉诗文集

（

第

3

卷

）

:

M'.

北京

：人民文学出版社

2010:173.

实命运象征的沙漠以及灵魂净化与生命皈依之所的

“

黄土

0

诗人牛汉都自觉地将诗歌的触角深入到历

：

2

：

牛汉.沙漠散歌

•

牛汉诗文集

（

第

1

卷

）：

M1

北京

：

人民文学出

版社

2010

：

22

：

3

：

牛汉.绵绵土

•

牛汉诗文集

（

第

3

卷

）

：

M1

北京

：

人民文学出版

社

2010

：

3152

：

4

：

牛汉.塑造梦的泥土

•

牛汉诗文集

（

第

4

卷

）

：

M

：

.

北京

：

人民文

学

版社

2010

：

364

—

3662

：

5

：

牛汉.我仍在苦苦跋涉—

—

牛汉自述:

M

：

.±

海

：

生活

•

读书•

新知三联书店

2008:283.

史、

民众之中

，

一方面用沉

郁

的心绪去抒写那悲哀的

北方

、

逃难的人群以及残破的土地

，

在历史的图

景

中

呈现人民的苦难

；

另一方面也在诗中融合着那青春

的梦幻与激情

，

并以激荡昂扬的姿态去感怀着家国

的命运

#

展望着民族的未来新生

（

Songof@heSonof@heEar@h

+++

On@he

Triple

Images

of

Niu

Han

s

Early

Poe@ry

LiKun

(Zhixing

College#

Northwest

Normal

University#

Lanzhou

730070

#

Gansu)

Abs@rac@

:

AftertheoutbreakoftheAnti-Japanese

Warin1937

#

Niu

Han

vagranted

with

his

father

to

the

northwest

and

began

to

write

poems

with

heart

and

soul

#

which

took

him

t

o

the

initial

peak

in

his

poet

­

ry

career.

In

Niu

Han

?

s

early

poetry

,

grassland

,

desert

and

land

are

the

three

most

important

images.

TheyarerespecivelyrelaIedIoandsymbolizeIhemysIeriousIempIaIionofIhespirisofancesIors

#

Ihere-

alisIicfaIeofnaIionalexhausion

#

hreeelemenIs

are

also

the

important

components

of

Niu

Han

?

s

early

plain

,

deep

and

heavyhearted

national

poetry.

Keywords

:

Niuhan

；

journeytothenorthwest

；

nationalpoetry

；

poeticimage

(责任编辑

：

李文英)

(上接第

26

页

)

Design

Scheme

of

Configuration

Designer

Based

on

MxGraph

KongXiaoyang

DaiZhenhu

(

.

#

Shanghai201900

)

Abs@rac@

:

Intheimplementationprocessofproduction

monitoringprojects

#

projectprogrammerscan

quicklybuilda

monitoring

system

that

meetstheneedsoftheproductionsitebydragging

#

configuring

#

andthrticledesignsand

implementsapureBSarchitectureconfigurationdesignerthroughtheapplicationoftheJavaScriptgraphics

library

mxGraph.

Users

do

not

need

to

install

any

software

or

plug-ins

,

they

can

click

on

the

browser

page

todesigntheconfigurationpage

#

toachievebasicgraphicsdrawing

#

dosymbolsdesigning

#

databinding

#

licationofthisdesignerbringsanendtotaskslikethede-

ploymentand

maintenance

of

the

original

CS

architecture

configuration

designer

#

seamless

integratation

withasecondsystem

#

makingitavailabletoany

idesconsolidatedtechnicalsupport

forindustrialenterprisestoupgradeon-sitemonitoringsystems.

Key

words

：

mxGraph

；

BS

configuration

；

JavaScript

；

SVG

（

责任编辑

：

李文英

）

52