使用前準備

  mxBasePath變數用來定義庫資源的目錄。這個變數必須在載入庫前就定義好。　　

　　<script type="text/javascript">
        　　mxBasePath = 'javascript/src/';
　　</script>

　　//mxClient.js包含該類庫的全部所需程式碼。
    <script type="text/javascript" src="/js/mxClient.js"></script>

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

檢查瀏覽器是否支援　　

if (!mxClient.isBrowserSupported()) {
　　//如果瀏覽器不支援，則顯示錯誤資訊
   alert('該瀏覽器不支援');
 }
 

Container容器

  頁面用一個dom節點將graph與JavaScript結合。它可以使用document.getElementById在body中取得或者直接動態建立（如createElement）。

var container = document.getElementById('id-of-graph-container');
//建立Graph物件
var graph = new mxGraph(container); 

• 1
• 2
• 3

• 1
• 2
• 3

部分基礎屬性　　

　　graph.setCellsResizable(false); //節點不可改變大小
　　mxGraphHandler.prototype.setMoveEnabled(true
 
); //是否可以移動
　　mxGraphHandler.prototype.guidesEnabled = true; //顯示細胞位置標尺
　　graph.setEnabled(false);//是否只讀
　　graph.setConnectable(false);//cell是否可以連線

　　graph.setCellsLocked(true);//是否可以移動連線，重新連線其他cell，主要用來展現中用
　　graph.setConnectable(true); // 是否允許Cells通過其中部的連線點新建連線,false則通過連線線連線
　　/*禁用節點雙擊，防止改變資料 */
　　graph.dblClick = function
 
 (evt, cell) {
　　　　var model = graph.getModel();
　　　　if (model.isVertex(cell)) {
　　　　　　return false;
　　　　}
　　};
　　// 節點是否解析html
　　graph.setHtmlLabels(true);
　　// 連線的樣式
　　var style = graph.getStylesheet().getDefaultEdgeStyle();
　　style[mxConstants.STYLE_ROUNDED] = true;//圓角連線
　　style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; //自己拐彎的連線
部分方法
　　getCellAt(x,y,parent,vertices,edges)
　　//單擊事件
　　graph.click = function (me) {
　　　　var x = me.graphX;
　　　　var y = me.graphY;
　　　　var graph = this.GetmxGraph();
　　　　var model = graph.getModel();
　　　　var cell = graph.getCellAt(x, y);
　　　　if (model.isVertex(cell)) {
　　　　　　alert("環節ID：" + cell.id);
　　　　} else {
　　　　　　return false;
　　　　}
　　}
　　//新增雙擊事件
　　graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
　　　　var cell = evt.getProperty('cell');
　　　　mxUtils.alert('Doubleclick: '+((cell != null) ? 'Cell' : 'Graph'));
　　　　evt.consume();
　　});
　　//刪除選中Cell或者Edge
　　var keyHandler = new mxKeyHandler(graph);
　　keyHandler.bindKey(46, function (evt) {
　　　　if (graph.isEnabled()) {
　　　　　　graph.removeCells();
　　　　}
　　});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

新增節點和連線線

  程式需要在beginUpdate和endUpdate中來插入節點和連線（更新圖形）。endUpdate應放在finally-block中以確保endUpdate一直執行。但beginUpdate不能在try-block中，這樣如果beginUpdate失敗那麼endupdate永遠不會執行。 
  beginUpdate和endUpdate方法不僅提供了顯示功能，而且它能夠當做undo/redo標記的邊界（也就是說，beginUpdate和endUpdate之間操作會作為undo、redo的原子操作，要麼同時被redo或undo， 相當於資料庫中的事務）。

var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
　　//引數：節點顯示的內容、X、Y、寬度、高度，X、Y是相對於DOM節點中的位置
　var v1 = graph.insertVertex(parent, null, '節點一', 20, 100, 300,145, 'rounded;strokeColor=none;fillColor=none;');
　var v2 = graph.insertVertex(parent, null, '節點二', 20, 400, 300, 145, 'rounded;strokeColor=none;fillColor=none;');
　　//圓形節點
　var v3 = graph.insertVertex(parent, null, 'B', 80, 100, 100, 100, 'shape=ellipse;perimeter=ellipsePerimeter');
　　//三角形節點
var v4 = graph.insertVertex(parent, null, 'C', 190, 30, 100, 60, 'shape=triangle;perimeter=trianglePerimeter;direction=south');
　　//節點是否可以摺疊
　　graph.getModel().setCollapsed(v2, 1);
　　var html = '<div>html</div>';
　　//更新節點顯示的內容
　　graph.getModel().setValue(v1, html);
　　//連線線，連線線上顯示的內容，連線的兩個節點，連線線的樣式
　var e1 = graph.insertEdge(parent, null, '我1連2', v1, v2, "strokeWidth=3;labelBackgroundColor=white;fontStyle=1");
　　//直角連線 
　var e2 = graph.insertEdge(parent, null, '', v1, v2, 'edgeStyle=orthogonalEdgeStyle;');
　　//曲折連線
var e2 = graph.insertEdge(parent, null, '', v3, v2, 'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;entryPerimeter=1;');
　　//虛線連線
　　graph.insertEdge(parent, null, null, step1, step2, 'crossover');
}
finally {
　　graph.getModel().endUpdate();
} 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

style的使用，插入背景圖

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'IMGUrl';
graph.getStylesheet().putCellStyle('image4gray', style);
//插入CELL中使用image4gray;即可
cell = graph.insertVertex(parent, null, name, x, y, cellWidth, cellHeight, 'image4gray;rounded=true;strokeColor=none;fillColor=yellow;');

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

獲取畫布中的所有元素

　　var mxGraph = this.GetmxGraph();
　　var parent = mxGraph.getDefaultParent();
　　var parentChildren = parent.children;
　　var arrEdge = [];   //連線線
　　var arrVertex = []; //節點
　　//獲取所有資訊
　　for (var i = 0; i < parentChildren.length; i++) {
　　　　var child = parentChildren[i];
　　　　if (!child.isVisible()) {
　　　　　　continue;
　　　　}
　　　　//區分連線線、節點
　　　　if (child.isEdge()) {
　　　　　　var obj = new Object();
　　　　　　obj.ID = child.id;
　　　　　　obj.SourceID = child.source.id;
　　　　　　obj.TargetID = child.target.id;
　　　　　　arrEdge.push(obj)
　　　　} else if (child.isVertex()) {
　　　　　　var obj = new Object();
　　　　　　obj.ID = child.id;
　　　　　　obj.Name = child.value;
　　　　　　obj.LeftTopX = child.geometry.x;
　　　　　　obj.LeftTopY = child.geometry.y;
　　　　　　arrVertex.push(obj);
　　　　}
　　}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27