<!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> <meta charset="utf-8"> </head> <body> <div style="height: 500px;" id="canvas"></div> <script src="./qunee/qunee-min.js"></script> <script type="text/javascript" src="./qunee/jquery.min.js"></script> <!--<script src="http://demo.qunee.com/js/common/Overview.js"></script>--> <script src="Overview.js"></script> <script> /** * This file is part of Qunee for HTML5. * Copyright (c) 2016 by qunee.com **/ if (!window.getI18NString) { getI18NString = function (s) { return s; } } function FlowingSupport(graph) { this.flowMap = {}; this.graph = graph; } FlowingSupport.prototype = { flowMap: null, length: 0, gap: 40, graph: null, addFlowing: function (edgeOrLine, count, byPercent) { var flowList = this.flowMap[edgeOrLine.id]; if (!flowList) { flowList = this.flowMap[edgeOrLine.id] = []; this.length++; } count = count || 1; while (--count >= 0) {
// 这里的图片可以自己设置flow.png var ui = new Q.ImageUI("flow.png"); ui.layoutByPath = true; ui.position = {x: 0, y: 0}; ui.size = { 20}; ui.renderColor = "#F00"; flowList.push(ui); flowList.byPercent = byPercent; edgeOrLine.addUI(ui); } }, removeFlowing: function (id) { var flowList = this.flowMap[id]; if (!flowList) { return; } var edgeOrLine = this.graph.getElement(id); if (edgeOrLine) { flowList.forEach(function (ui) { edgeOrLine.removeUI(ui); }) } this._doRemove(id); }, _doRemove: function (id) { delete this.flowMap[id]; this.length--; }, timer: null, perStep: 10, stop: function () { clearTimeout(this.timer); }, start: function () { if (this.timer) { clearTimeout(this.timer); } var offset = 0; var scope = this; scope.timer = setTimeout(function A() { if (!scope.length) { scope.timer = setTimeout(A, 2000); offset = 0; return; } offset += 1; for (var id in scope.flowMap) { var ui = scope.graph.getUI(id); if (!ui) { scope._doRemove(id); continue; } var lineLength = ui.length; if (!lineLength) { continue; } var flowList = scope.flowMap[id]; if (flowList.byPercent) { var x = offset * 2; var gap = 15; scope.flowMap[id].forEach(function (ui) { ui.position = {x: (x % 100) / 100, y: 0}; x += gap; }); } else { var x = offset * scope.perStep; scope.flowMap[id].forEach(function (ui) { ui.position = {x: x % lineLength, y: 0}; x += scope.gap; }); } scope.graph.invalidateUI(ui); //dashed line var data = ui.data; if (data instanceof Q.Edge) { if (data.getStyle(Q.Styles.EDGE_LINE_DASH)) { data.setStyle(Q.Styles.EDGE_LINE_DASH_OFFSET, -offset); } } else if (data instanceof Q.ShapeNode) { if (data.getStyle(Q.Styles.SHAPE_LINE_DASH)) { data.setStyle(Q.Styles.SHAPE_LINE_DASH_OFFSET, -offset); } } } scope.timer = setTimeout(A, 200); }, 200); } }; // 创建画布 var graph = new Q.Graph(canvas);
// 创建图元 var hello = graph.createNode("Hello", -100, -50); var qunee = graph.createNode("Qunee", 100, 50);
// 创建关系 var edge = graph.createEdge("Hello Qunee", hello, qunee);
// 指定关系线的颜色 edge.setStyle(Q.Styles.EDGE_COLOR, "#2898E0");
// 指定关系线是虚线，指定虚线的每一个线段的长度，和线段的数量，和虚线的距离等 edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 4, 1, 4]);
// 指定虚线是90度的，而不是直线。 // edge.edgeType = Q.Consts.EDGE_TYPE_HORIZONTAL_VERTICAL; var flowingSupport = new FlowingSupport(graph);
// 下面的方式让关系线动起来 flowingSupport.addFlowing(edge, 3); graph.callLater(function () { flowingSupport.start(); }) function destroy() { flowingSupport.stop(); } </script> </body> </html>
