mxGraph初品 - 一

11年前
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');//最后一个参数用来修饰边即节点间的连线
    }
    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样例就完成了,代码结构清晰,初次感觉良好。