qunee 流动的关系

最新推荐文章于 2024-01-31 17:13:13 发布

weixin_30390075

最新推荐文章于 2024-01-31 17:13:13 发布

阅读量178

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/aaronthon/p/11559524.html

版权

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