Mxgraph 使用教程（2）：mxgraph常用方法介绍

1.mxgraph常用包（这个js类库被分成了8个包。）

1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。

2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。

3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。

4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoManager实现了撤销历史功能。如果要在graph中显示一个图标，可以使用mxCellOverlay。mxUtilplicity定义了校验规则。

5.handler，layout和shape包分别包含了事件处理，布局运算，以及形状。

6.graph的事件监听包括mxRubberhand（rubberhand选定）、工具提示mxTooltipHandler和基本cell修改处理mxGraphHandler。

7.mxCompactTreeLayout实现了树布局运算、shape包提供了大量的形状，他们都是mxShape的子类。

8. util包提供了很多有用的类，包括：实现复制粘贴的mxClipboard，拖拽的mxDatatransfer，键值对的样式表mxConstants，mxEvent和mxUtils实现了跨浏览器的事件处理和生成目标函数，mxResources实现了国际化（语言），mxLog实现了控制台打印输出。

2.mxgraph常用类

• mxGraph

这个类应该是我们最常用到的了，每次我们开始一个mxGraph的项目，都必定会运行一遍 new mxGraph([DOM 容器]) 创建一个新的mxGraph对象。我们接下来所有的操作都要在拥有这个对象的基础上进行。我们一般会用这个对象设置一些全局的回调或者是设置一些全局的定值。

• mxCell

这个类也是我们遇到的比较多的类，但刚开始写mxGraph的时候，可能很多人会问这个类在哪啊，我怎么没见过啊，其实我们每次调用 mxGraph.insertVertex() 方法创建图形时的返回值就是实例化自这个类。我们一般会通过这个对象获得一些其他的对象，比如说下面会说到的mxCellState和mxGeometry。当然这个类除了被做为跳板之外，还有一些比较实用的方法，比如说设置一个图形的可见性，是否可以被连接等。

• mxCellState

可以通过mxGraph.view.getState([cell])得到，从中可以获取到关于一个图形的基本位置信息，包括相对于Graph容器的位置信息和相对于浏览器的位置信息，还有等等有用的信息，不知在多少个的晚上，是它帮我少掉了几根头发。

• mxGeometry

可以直接通过 mxCell.geometry 得到，可以从中获取到图形基本的信息，比如长度，高度，x，y等等，而且可以通过直接修改这些值来改变图形，为我们省了很多事，效果堪比生发剂啊。

3.mxgraph常用属性介绍

• mxEvent.disableContextMenu(this.$refs.mxgraph) //禁用鼠标右键

• graph.setConnectable(true) //设置这个属性后节点之间才可以连接

• graph.setCellsResizable(false) //开启节点不可改变大小

• graph.setDisconnectOnMove(false) //边被拖时，始终保持连接

• graph.setTooltips(true) //开启tooptip提示

• mxGraphHandler.prototype.guidesEnabled = true // 启用对齐线帮助定位

• graph.setEnabled(true) // 设置启用,就是允不允许你改变CELL的形状内容。

具体更加详细的大家可以去官网api库查看。
地址： 官方api