首页 > 代码库 > 用zrender实现工作流图形化设计（附范例代码）
用zrender实现工作流图形化设计（附范例代码）
公司研发的管理系统有工作流图形化设计和查看功能，这个功能的开发历史比较久远。在那个暗无天日的年月里，IE几乎一统江湖，所以顺理成章地采用了当时红极一时的VML技术。
后来的事情大家都知道了，IE开始走下坡路，VML这个技术现在早已灭绝，导致原来的工作流图形化功能完全不能使用，所以需要采用新技术来重写工作流图形化功能。
多方对比之后，决定采用zrender库来实现（关于zrender库的介绍，请看http://ecomfe.github.io/zrender/），花了一天的时间，终于做出了一个大致的效果模型，如下图所示：
流程图由两类部件组成：活动部件和连接弧部件，每一类部件包含多个性状不同的部件。
以活动部件为例，圆形的是开始活动，平行四边形是自动活动，长方形是人工活动，等等。
在代码实现上，定义了Unit（部件基类），所有的部件都继承自这个基类。通过Graph类来管理整个流程图，包括所有部件、上下文菜单等等都由Graph来统一管理和调度，代码如下：
var Libra = {};Libra.Workflow = {};Libra.Workflow.Graph = function(type, options){ var graph = this, activities = {}, transitions = {}; var zrenderInstance, contextMenuContainer; this.type = type; this.addActivity = function(activity){ activity.graph = graph; activities[activity.id] = {object:activity}; }; this.getActivity = function(id){ return activities[id].object; }; this.addTransition = function(transition){ transition.graph = graph; transitions[transition.id] = {object:transition}; }; function modElements(shapes){ shapes.each(function(shape){ zrenderInstance.modElement(shape); }); return shapes; } // 当前正在拖放的节点 var dragingActivity = null; // 活动节点拖放开始 this.onActivityDragStart = function(activity){ dragingActivity = activity; }; // 活动节点拖放结束 this.onActivityDragEnd = function(){ if(dragingActivity) refreshActivityTransitions(dragingActivity); dragingActivity = null; }; // 拖动过程处理 function zrenderInstanceOnMouseMove(){ if(dragingActivity != null) refreshActivityTransitions(dragingActivity); } // 刷新活动相关的所有连接弧 function refreshActivityTransitions(activity){ var activityId = activity.id; for(var key in transitions){ var transition = transitions[key].object; if(transition.from === activityId || transition.to == activityId){ zrenderInstance.refreshShapes(modElements(transition.refresh(graph))); } } } // 当前选中的部件 var selectedUnit = null; this.onUnitSelect = function(unit){ if(selectedUnit) zrenderInstance.refreshShapes(modElements(selectedUnit.unselect(graph))); zrenderInstance.refreshShapes(modElements(unit.select(graph))); selectedUnit = unit; }; // 记录当前鼠标在哪个部件上，可以用来生成上下文相关菜单 var currentUnit = null; this.onUnitMouseOver = function(unit){ currentUnit = unit; }; this.onUnitMouseOut = function(unit){ if(currentUnit === unit) currentUnit = null; }; // 上下文菜单事件响应 function onContextMenu(event){ Event.stop(event); if(currentUnit) currentUnit.showContextMenu(event, contextMenuContainer, graph); } this.addShape = function(shape){ zrenderInstance.addShape(shape); }; // 初始化 this.init = function(){ var canvasElement = options.canvas.element; canvasElement.empty(); canvasElement.setStyle({height: document.viewport.getHeight() + ‘px‘}); zrenderInstance = graph.type.zrender.init(document.getElementById(canvasElement.identify())); for(var key in activities){ activities[key].object.addTo(graph); } for(var key in transitions){ transitions[key].object.addTo(graph); } // 创建上下文菜单容器 contextMenuContainer = new Element(‘div‘, {‘class‘: ‘context-menu‘}); contextMenuContainer.hide(); document.body.appendChild(contextMenuContainer); Event.observe(contextMenuContainer, ‘mouseout‘, function(event){ // 关闭时，应判断鼠标是否已经移出菜单容器 if(!Position.within(contextMenuContainer, event.clientX, event.clientY)){ contextMenuContainer.hide(); } }); // 侦听拖动过程 zrenderInstance.on(‘mousemove‘, zrenderInstanceOnMouseMove); // 上下文菜单 Event.observe(document, ‘contextmenu‘, onContextMenu); }; // 呈现或刷新呈现 this.render = function(){ var canvasElement = options.canvas.element; canvasElement.setStyle({height: document.viewport.getHeight() + ‘px‘}); zrenderInstance.render(); };};/* * 部件（包括活动和连接弧） */Libra.Workflow.Unit = Class.create({ id: null, title: null, graph: null, // 当前是否被选中 selected: false, // 上下文菜单项集合 contextMenuItems: [], initialize: function(options){ var _this = this; _this.id = options.id; _this.title = options.title; }, createShapeOptions: function(){ var _this = this; return { hoverable : true, clickable : true, onclick: function(params){ // 选中并高亮 _this.graph.onUnitSelect(_this); }, onm ouseover: function(params){ _this.graph.onUnitMouseOver(_this); }, onm ouseout: function(params){ _this.graph.onUnitMouseOut(_this); } }; }, addTo: function(graph){}, // 刷新显示 refresh: function(graph){ return []; }, // 选中 select: function(graph){ this.selected = true; return this.refresh(graph); }, // 取消选中 unselect: function(graph){ this.selected = false; return this.refresh(graph); }, // 显示上下文菜单 showContextMenu: function(event, container, graph){ container.hide(); container.innerHTML = ‘‘; var ul = new Element(‘ul‘); container.appendChild(ul); this.buildContextMenuItems(ul, graph); // 加偏移，让鼠标位于菜单内 var offset = -5; var rightEdge = document.body.clientWidth - event.clientX; var bottomEdge = document.body.clientHeight - event.clientY; if (rightEdge < container.offsetWidth) container.style.left = document.body.scrollLeft + event.clientX - container.offsetWidth + offset; else container.style.left = document.body.scrollLeft + event.clientX + offset; if (bottomEdge < container.offsetHeight) container.style.top = document.body.scrollTop + event.clientY - container.offsetHeight + offset; else container.style.top = document.body.scrollTop + event.clientY + offset; container.show(); }, // 创建上下文菜单项 buildContextMenuItems: function(container, graph){ var unit = this; unit.contextMenuItems.each(function(item){ item.addTo(container); }); }});zrender默认已经支持了对图形的拖动，所以活动部件的拖动只需要设置dragable属性为真即可。不过虽然活动部件可以拖动，但活动部件上的连接线不会跟着一起动，这需要侦听拖动开始事件、拖动结束事件以及拖动过程中的鼠标移动事件，来实现连接线的实时重绘。在Graph中侦听鼠标移动事件，就是为了实现连接线等相关图形的实时重绘。
每个部件都规划了八个连接点，默认情况下，连接弧不固定与某个连接点，而是根据活动部件的位置关系，自动找出最近的连接点，所以在拖动活动部件的时候，可以看到连接弧在活动部件上的连接点在不断变化。
上面只是以最简化的方式实现了工作流图形化设计的基本功能，完善的图形化设计应包含曲线、连接点的拖放等等，如下图所示：
上面是公司产品中的工作流图形化设计功能，功能相对于上面的范例要完善许多，但基本原理不变，无非就是细节处理更多一些。
特别是在画的地方花了很多时间，中学的平面几何知识几乎都忘记了，所以做起来花了不少功夫，这部分准备以后专门写篇文章来详谈。
本文的结尾会给出前期建模测试阶段的完整代码下载，是前期代码，不是最终代码，原因你懂的，见谅。
http://files.cnblogs.com/files/rrooyy/WorkflowGraphic.zip
用zrender实现工作流图形化设计（附范例代码）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。