最近研究了关于web流程图设计的一个开源项目mxgraph.docVIP

最近研究了关于web流程图设计的一个开源项目mxgraph 最近研究了关于web流程图设计的一个开源项目mxgraph 博客分类：WEB应用 WebprototypeVisio咨询数据结构 领导有一个搞内控流程优化的思路，找我问问有没有什么想法。想将公司后台的风险库，控制库，组织机构等与内控流程联系起来，用的比较普遍的流程图设计软件就visio了。有没有一个办法可以把visio嵌入到B/S系统中呢。 带着这个疑问到网络上试着搜索着。突然一个词进入我的视线--mxgraph。B/S结构，可以加泳道，多种图形形状和图片，支持导出图片等支持一定让这个web流程设计项目增色不少。于是决定找了一个破解版本下来研究研究。 在本机搭好环境后，拿给咨询部的同事看了看，觉得不错，要是支持visio里德标准流程图的图元就好了。于是仔细看了看它底层画图用的是vml，就有一点信心按照自己的想法画些图元出来了。说干就干。于是就开始了图元创造。 mxclient.js这个文件是mxgraph的核心的js文件。那些图元及编辑器等就是在这里边定义的。 首先声明几个形状 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?---------- 让这些形状继承默认的形状 Js代码 //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?-------------------------------- 下面是这些形状的具体画法的方法 Js代码 //create?shape?by?ryan?start---------------------------------------- function?mxRyan(bound