正文
qunee 流动的关系
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!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 = {width: 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\nQunee", 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>
