最近研究了关于web流程图设计的一个开源项目mxgraph
????? 领导有一个搞内控流程优化的思路，找我问问有没有什么想法。想将公司后台的风险库，控制库，组织机构等与内控流程联系起来，用的比较普遍的流程图设计软件就visio了。有没有一个办法可以把visio嵌入到B/S系统中呢。
????? 带着这个疑问到网络上试着搜索着。突然一个词进入我的视线--mxgraph。B/S结构，可以加泳道，多种图形形状和图片，支持导出图片等支持一定让这个web流程设计项目增色不少。于是决定找了一个破解版本下来研究研究。
????? 在本机搭好环境后，拿给咨询部的同事看了看，觉得不错，要是支持visio里德标准流程图的图元就好了。于是仔细看了看它底层画图用的是vml，就有一点信心按照自己的想法画些图元出来了。说干就干。于是就开始了图元创造。
mxclient.js这个文件是mxgraph的核心的js文件。那些图元及编辑器等就是在这里边定义的。
首先声明几个形状
//create shape by ryan start ----------SHAPE_RYAN: 'ryan',SHAPE_STORAGE: 'storage', SHAPE_RECORD : 'record',SHAPE_TAPE : 'tape',SHAPE_HANDINPUT : 'handinput',SHAPE_HANDOPERATOR : 'handoperator',SHAPE_DATA: 'data',SHAPE_CIRCULATION: 'circulation',SHAPE_CARD: 'card',SHAPE_PREFLOW : 'preflow',SHAPE_INTERNALSTORAGE : 'internalstorage',//create shape by ryan end ----------
?让这些形状继承默认的形状
//create shape by ryan start --------------------------------mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_RYAN] = mxRyan;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_STORAGE] = mxStorage;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_RECORD] = mxRecord;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_TAPE] = mxTape;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_HANDINPUT] = mxHandInput;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_HANDOPERATOR] = mxHandOperator;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_DATA] = mxData;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_CIRCULATION] = mxCirculation;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_CARD] = mxCard;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_PREFLOW] = mxPreflow;mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_INTERNALSTORAGE] = mxInternalStorage;//create shape by ryan end --------------------------------
?下面是这些形状的具体画法的方法
//create shape by ryan start----------------------------------------function mxRyan(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxRyan.prototype = new mxActor();mxRyan.prototype.constructor = mxActor;mxRyan.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, h);//start from path.lineTo(0, 0);// line to path.lineTo(w, 0);// line topath.lineTo(w, h);//line topath.curveTo(w * 0.4, h - w * 0.20 , 2.4 * w * 0.20, h + w * 0.20 , 0, h);// radian path.close();};function mxTape(bounds, fill, stroke, strokewidth){this.bounds = bounds;this.fill = fill;this.stroke = stroke;this.strokewidth = strokewidth || 1;};mxTape.prototype = new mxActor();mxTape.prototype.constructor = mxActor;mxTape.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, h);path.lineTo(0, 0);path.curveTo(w * 0.4, w * 0.20 , 2.8 * w * 0.20, - w * 0.20 , w, 0);path.lineTo(w, h);path.curveTo(w * 0.4, h - w * 0.20 , 2.4 * w * 0.20, h + w * 0.20 , 0, h);path.close();};function mxStorage(bounds, fill, stroke, strokewidth){this.bounds = bounds;this.fill = fill;this.stroke = stroke;this.strokewidth = strokewidth || 1;};mxStorage.prototype = new mxActor();mxStorage.prototype.constructor = mxActor;mxStorage.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, 0);path.curveTo(0, 0, -0.26 * w, 0.50 * h, 0, h);path.lineTo(w, h);path.curveTo(w, h, 0.74 * w, 0.50 * h, w, 0);path.lineTo(w, 0); path.close();};function mxRecord(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxRecord.prototype = new mxActor();mxRecord.prototype.constructor = mxActor;mxRecord.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, 0);path.curveTo(0, 0, -0.26 * w, 0.50 * h, 0, h);path.lineTo(w, h);path.curveTo(w, h, 0.74 * w, 0.50 * h, w, 0);path.curveTo(w, 0, 1.24 * w, 0.50 * h, w, h);path.curveTo(w, h, 0.74 * w, 0.50 * h, w, 0); path.close();};function mxHandInput(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxHandInput.prototype = new mxActor();mxHandInput.prototype.constructor = mxActor;mxHandInput.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, h/2);path.lineTo(0, h);path.lineTo(w, h);path.lineTo(w, 0); path.close();};function mxHandOperator(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxHandOperator.prototype = new mxActor();mxHandOperator.prototype.constructor = mxActor;mxHandOperator.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, 0);path.lineTo(w * 0.25, h);path.lineTo(w * 0.75, h);path.lineTo(w, 0); path.close();};function mxData(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxData.prototype = new mxActor();mxData.prototype.constructor = mxActor;mxData.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(w * 0.125, 0);path.lineTo(-w * 0.125, h);path.lineTo(w * 0.875, h);path.lineTo(w * 1.125, 0); path.close();};function mxCirculation(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxCirculation.prototype = new mxActor();mxCirculation.prototype.constructor = mxActor;mxCirculation.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, h / 3);path.lineTo(0, h);path.lineTo(w, h);path.lineTo(w, h /3);path.lineTo(w /5 * 4, 0);path.lineTo(w /5, 0); path.close();};function mxCard(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxCard.prototype = new mxActor();mxCard.prototype.constructor = mxActor;mxCard.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, h / 3);path.lineTo(0, h);path.lineTo(w, h);path.lineTo(w, 0);path.lineTo(w /5, 0); path.close();};function mxPreflow(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxPreflow.prototype = new mxActor();mxPreflow.prototype.constructor = mxActor;mxPreflow.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, 0);path.lineTo(0, h);path.lineTo(w, h);path.lineTo(w, 0);path.lineTo(0, 0);path.moveTo(w /7 , 0);path.lineTo(w /7 , h);path.moveTo(w /7 * 6 , 0);path.lineTo(w /7 * 6 , h); path.close();};function mxPreflow(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxPreflow.prototype = new mxActor();mxPreflow.prototype.constructor = mxActor;mxPreflow.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, 0);path.lineTo(0, h);path.lineTo(w, h);path.lineTo(w, 0);path.lineTo(0, 0);path.moveTo(w /7 , 0);path.lineTo(w /7 , h);path.moveTo(w /7 * 6 , 0);path.lineTo(w /7 * 6 , h); path.close();};function mxInternalStorage(bounds, fill, stroke, strokewidth){ this.bounds = bounds; this.fill = fill; this.stroke = stroke; this.strokewidth = strokewidth || 1;};mxInternalStorage.prototype = new mxActor();mxInternalStorage.prototype.constructor = mxActor;mxInternalStorage.prototype.redrawPath = function(path, x, y, w, h){path.moveTo(0, 0);path.lineTo(0, h);path.lineTo(w, h);path.lineTo(w, 0);path.lineTo(0, 0);path.moveTo(w /7 , 0);path.lineTo(w /7 , h);path.moveTo(0 , w / 7);path.lineTo(w, w / 7); path.close();};//create shape by ryan end ----------?
?然后我们再GraphEditor.js中添加到库中
?
//create shape by ryan insertVertexTemplate(library, graph, '文档', 'images/ryan.gif', 'shape=ryan', 80, 60);insertVertexTemplate(library, graph, '数据', 'images/data.gif', 'shape=data', 80, 60);insertVertexTemplate(library, graph, '存储数据', 'images/storage.gif', 'shape=storage', 80, 60);insertVertexTemplate(library, graph, '直接数据', 'images/record.gif', 'shape=record', 80, 60);insertVertexTemplate(library, graph, '纸带', 'images/tape.gif', 'shape=tape', 80, 60);insertVertexTemplate(library, graph, '手动输入', 'images/handinput.gif', 'shape=handinput', 100, 50);insertVertexTemplate(library, graph, '手动操作', 'images/handoperator.gif', 'shape=handoperator', 80, 60);
?
1 楼 zwfflying 2011-06-02 兄弟，看一下这个效果：