领导有一个搞内控流程优化的思路，找我问问有没有什么想法。想将公司后台的风险库，控制库，组织机构等与内控流程联系起来，用的比较普遍的流程图设计软件就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 to
path.lineTo(w, h);//line to
path.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);
- 大小: 82.4 KB
分享到：
相关推荐
"mxgraph1.02WEB图形设计"是一个基于EXTJS扩展的开源图形设计工具，主要用于构建Web环境下的流程图和其他图表。这个工具的核心是mxGraph库，它提供了一套强大的JavaScript API，允许开发者在Web浏览器中创建、编辑和...
mxGraph是一款强大的JavaScript库，专为在Web环境中创建和编辑流程图、图表和其他图形而设计。这个库提供了丰富的功能，使开发者能够轻松地构建交互式的绘图应用。下面将详细介绍mxGraph的核心特性、使用方法以及它...
总的来说，mxGraph是一个强大的工具，适合需要在Web应用中实现图形编辑和流程图展示的场景。通过熟练掌握mxGraph，开发者可以创建出功能丰富、用户友好的图形界面，提高业务流程的可视化和效率。
通过学习和掌握mxGraph，开发者可以创建出功能强大且用户友好的Web流程图应用，提高工作效率，简化工作流程。同时，由于mxGraph是开源项目，开发者可以根据自身需求对其进行扩展和定制，以满足特定场景的需求。
MXGRAPH通常指的是一个开源的JavaScript图形库，用于创建可交互的图表和流程图，但它与音乐文件无关。如果您需要关于MXGRAPH的详细信息，我可以提供如下内容： MXGRAPH是一个强大的图形编辑框架，主要用于创建富...
而基于mxgraph的流程建模JavaScript框架则为开发者提供了一个强大且灵活的工具，使得在Web环境中创建交互式流程图成为可能。mxgraph是一个开源的图形库，支持多种图形绘制，包括流程图、网络拓扑图等，它以其高效...
总结起来，mxGraph-eval-1_0_2_8.zip是WEB流程开发工具的一个重要版本，提供了丰富的资源和工具，旨在帮助开发者实现高效、直观的图形编辑解决方案。通过深入研究和实践，开发者可以充分利用mxGraph的功能，打造...
通过研究`drawio-master`项目，可以更深入地理解mxGraph如何被用于构建一个完整的图形编辑应用。 总结，mxGraph是JavaScript领域强大的图形库，提供了丰富的API和实例，能够满足复杂的图形绘制需求。通过深入学习和...
mxGraph是一个用JavaScript编写的开源图形库，专门用于在Web应用中实现交互式的图形编辑。它提供了丰富的API，可以绘制复杂的图形结构，支持多种图形操作，如拖放、连接、缩放和平移。mxGraph的核心特性包括： 1. *...
mxGraph 是一款强大的开源图形库，主要用于在 Web 应用程序中创建交互式的图表和流程图。它由 Java 编写，通过 JavaScript 进行前端展示，并且支持 HTML5 Canvas 和 SVG 渲染。mxGraph 提供了丰富的功能，包括形状...
mxgraph 是一个强大的开源图形库，主要应用于创建交互式图形界面，例如流程图、网络拓扑图、UML模型等。这个库支持JavaScript和Java两种语言，允许开发者在Web浏览器或者服务器端进行图形编辑。由于它的灵活性和可...
在Flex中，画流程图是一项重要的功能，尤其在业务流程管理和系统设计中尤为常见。流程编辑器允许用户直观地设计和修改流程，这对于提高工作效率和理解复杂逻辑非常有帮助。 标题所提及的“flex 画流程图 流程编辑”...
mxGraph 是一个强大的开源JavaScript库，专用于在Web上创建和编辑图形，尤其适用于构建交互式图表、流程图和组织结构图。它以其高度可定制性、高性能和易用性而受到开发者的青睐。在本篇文章中，我们将深入探讨如何...
mxGraph是一款强大的JavaScript图形库，主要用于创建交互式和可自定义的图表、流程图和模型。这个开源项目，"huiger123-mxgraph-master.zip"，包含了mxGraph的源代码，允许开发者深入理解其内部工作原理并进行扩展。...
mxGraph 是一个强大的开源JavaScript库，专用于在Web应用程序中创建和编辑图形。这个"mxgraph-eval-1_4_0_9"版本可能是mxGraph的一个特定发行版，版本号为1.4.0.9，可能包含了该库的一些改进和特性。下面将详细介绍...
4. mxGraph：mxGraph是一个Java图形库，提供了图形绘制和布局的功能。 5.拓扑图自动绘制：拓扑图自动绘制是指通过计算机程序自动生成拓扑图的过程，通常用于表示网络拓扑结构、机房拓扑结构等。 6. Java Applet技术...
MXGraph是一个强大的开源JavaScript库，它允许开发者创建交互式的图表和图形编辑器，非常适合用于实现工作流的可视化设计。下面将详细探讨这个主题。 MXGraph的核心功能包括： 1. **图形绘制**：MXGraph提供了丰富...
mxGraph是一个强大的JavaScript图形库，专为绘制和编辑图形图表设计，如流程图、网络图和攻击树。在这个项目中，mxGraph用于渲染和交互式操作攻击树。它提供了丰富的API，支持自定义节点样式、连接线、事件监听等，...
`mxGraphic` 是一个基于 `ExtJS` 的开源框架，它专门设计用于创建动态工作流、网络拓扑图和Visio风格的图形。这个框架提供了强大的图形绘制和编辑功能，使得开发者可以轻松地在Web应用中实现复杂的可视化需求。`...