文章目錄
通過上一篇文章MxGraph從入門到精通之1：運行HelloWorld示例程序，我們已經把MxGraph運行起來，通過查看hellloworld.html可以總結該程序運行的核心步驟主要有以下幾步：
- 創建一個div元素，作爲MxGraph渲染圖形的容器
- 在div元素上創建一塊畫布(graph)
- 在畫布上繪製頂點(Vertex)和邊(Edge)
- 把畫布及其頂點和邊更新渲染出來
整個示例代碼分析如下：
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- basepath變量用於告訴MxGraph從哪裏加載它的資源 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 導入MxGraph庫文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<script type="text/javascript">
// 主程序入口
// container是一個通過document.getElementById獲取到的DOM節點
function main(container)
{
// 檢查瀏覽器是否支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// 創建畫布，mxGraph是整個MxGraph的核心類
var graph = new mxGraph(container);
new mxRubberband(graph);
// 獲取根節點，後面的頂點和邊都要作爲子節點加入到根節點中
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try
{
// 插入頂點
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
// 創建一條邊把v1和v2兩個頂點連起來
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
graph.getModel().endUpdate(); // 把畫布及其頂點和邊更新渲染出來
}
}
};
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<!-- 用於渲染MxGraph圖形的div，類似於畫布 -->
<!-- 注意：如果想要畫布具有滾動條效果，樣式要把overflow:hidden改成overflow:auto -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
MxGraph通過以下方式創建了一塊畫布，即graph對象：
var container = document.getElementById('graphContainer')
var graph = new mxGraph(container);
graph對象是整個程序的核心，後續的圖形都需要繪製在這個畫布之上。
以下代碼在畫布上進行頂點的繪製：
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
其中，第一個參數表示該頂點附屬於哪個父節點，第二個參數我們暫時忽略，第3個參數爲頂點的名稱，會顯示在頂點上面，後面4個參數表示頂點的位置。
以下代碼在兩個頂點之間繪製一條邊把它們連起來：
var e1 = graph.insertEdge(parent, null, '', v1, v2);
類似的，第一個參數表示該邊附屬於哪個父節點，第二個參數我們暫時忽略，第3個參數爲邊的名稱，會顯示在邊上，後面2個參數表示該邊連接的兩個頂點。