一、简介

mxGraph是一个用Javascript编写的绘图web应用程序，可以在网页中设计/编辑 流程图、图表、普通图形、UML图等等。可以使用 mxClient.VERSION查看mxGraph的当前版本，我用的是3.6.0.0版本。

> mxClient.VERSION
< "3.6.0.0"

二、mxGraph包结构

1、editor

包含一些实现图形编辑器必须的类，主类为：mxEditor。

2、view、model

实现了graph的组件，以mxGraph为代表。

  • mxGraphModel

包含多个mxCell，并通过mxGraphView缓存cells的状态。cells通过mxCellRenderer基于mxStylesheet提供的样式绘制。

  • mxUndoManager

实现重做操作

  • mxCellOverlay

在画布上显示一个图标(icon)时可能被用到

  • mxMultiplicity

定义验证规则

3、handler、layout、shape

分别包含事件监听、布局算法和图形。shape包下提供了各种图形，它们都是mxShape的子类。图形事件监听包括：

  • mxRubberband

实现框线选择

  • mxTooltipHandler

实现提示(tooltip)

  • mxGraphHandler

实现基础的cell的修改

  • mxCompactTreeLayout

实现一种树形布局算法

4、util

提供多功能的工具类，包括：

  • mxClipboard

提供粘贴、复制功能

  • mxDatatransfer

提供拖拽功能

  • mxConstants

提供样式的key和value

  • mxEvent、mxUtils

提供跨浏览器事件处理和通用的工具函数

  • mxResource

提供国际化支持

  • mxLog

提供控制台输出

5、io

提供一个通用的mxObjectCodec类，将Javascript对象转换为XML，主要的类是mxCodec;mxCodecRegistry是注册自定义转换器的全局注册器。

三、mxGraph事件

mxGraph中的事件主要包括：

  • 原生DOM事件，mxEvent中提供了一些有用的方法

  • 用mxEventSource触发的mxEventObjects

  • 在mxGraph中触发的mxMouseEvents

mxGraph中的大多数事件的实现是使用mxEventSource，它的监听器发送了mxEventObject的函数。另外，mxGraph类中触发特有的mxMouseEvents去处理鼠标事件。

四、mxGraph配置

可以使用下面的全局变量在客户端加载前指定language、base path等：

  • mxBasePath：mxClient.basePath
  • mxImageBasePath：mxClient.imageBasePath
  • mxLanguage：mxClient.language
  • mxDefaultLanguage：mxClient.defaultLanguage
  • mxLoadResources：指定所有的资源是否都应该被加载，默认是true
  • mxLoadStylesheets：指定所有的样式是否都应该被加载，默认是true

五、mxGraph保留字

mx前缀被用来作为mxGraph中所有类和对象的前缀。以下的字段不能在对象中使用：

  • mxObjectId
  • as
  • id
  • mxListenerList
  • window._mxDynamicCode
  • _mxJavaScriptExpression

六、mxGraph内置图像

所有的图象都是从mxClient.imageBasePath路径加载，此路径以及以下图象变量都可以按需修改：

  • mxGraph.prototype.collapsedImage
  • mxGraph.prototype.expandedImage
  • mxGraph.prototype.warningImage
  • mxWindow.prototype.closeImage
  • mxWindow.prototype.minimizeImage
  • mxWindow.prototype.normalizeImage
  • mxWindow.prototype.maximizeImage
  • mxWindow.prototype.resizeImage
  • mxPopupMenu.prototype.submenuImage
  • mxUtils.errorImage
  • mxConstraintHandler.prototype.pointImage

七、mxGraph资源文件

mxEditor、mxGraph在类加载时给mxResources添加以下资源：

  • resources/editor*.properties
  • resources/graph*.properties
附：