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>
巴特西

qunee 流动的关系

最新文章

热门文章
