qunee 流动的关系_html-js-css

概述<!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.j

<!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>