mxGraph初品 - 一

yuerthe9 11年前發布 | 1K 次閱讀 Makulu Linux

mxGraph:一款基于web的繪制流程圖的javascript庫工具（http://www.mxgraph.com/）
js中對于graph的操作本人粗略分為兩類，一類是給藝術家使用的（例如：raphael），你可以使用此類工具用代碼來繪畫。另一類是給技術工程人員使用的（例如：mxGraph），應用場景有工作流程圖、UML圖、電路路、組織架構圖等。

之所以關注mxGraph是因為我要做流程圖設計器，看到open-open越來越酷就想到把自己學習技術的脈絡略記一二于此，方便大家相互交流學習。

mxGraph初品：

一、頭文件引入
<script type="text/javascript" src="mxClient.js"></script>

二、js代碼
function main(container){
    //校驗瀏覽器是否支持顯示
    if (!mxClient.isBrowserSupported()){
        mxUtils.error('Browser is not supported!', 200, false);
    }else{
        mxRectangleShape.prototype.crisp = true;
        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,'fillColor=green;fontStyle=1');//最后一個參數用來修飾節點
     var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30,'fillColor=blue;fontStyle=1');
     var e1 = graph.insertEdge(parent, null, '', v1, v2,'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=3');//最后一個參數用來修飾邊即節點間的連線</span>
    }
    finally
    {
     // Updates the display
     graph.getModel().endUpdate();
    }
}}；

三、js代碼調用
<body onload="main(document.getElementById('graphContainer'))">

四、定義容器（graph的舞臺——container）
<div id="graphContainer"
  style="overflow:hidden;width:321px;height:241px;background:url('grid.gif');cursor:default;">
</div>

一個hello，world樣例就完成了，代碼結構清晰，初次感覺良好。