当前位置 : 主页 > 网页制作 > html >

qunee 流动的关系

来源:互联网 收集:自由互联 发布时间:2021-06-12
! 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.mi
<!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://img.558idc.com/uploadfile/allimg/210612/1133233634-0.jpg"></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>

 分享图片

网友评论