mxGraph初品 - 一
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样例就完成了，代码结构清晰，初次感觉良好。
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样例就完成了，代码结构清晰，初次感觉良好。
yuerthe9 
openkk 
todayword 