<!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 流动的关系的更多相关文章

  1. 美团客户端响应式框架EasyReact开源啦

    前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题. 目前 EasyReact 已在美团和大众点评客户端的部分业务中进行了实践,并且持续 ...

  2. 互联网金融研究组:P2P借贷平台：性质、风险与监管（上）

    互联网金融研究组(): P2P借贷平台:性质.风险与监管(上) 目 录 一.性质与合法性 1.  P2P网络借贷 1.1  概念重新界定 1.2  发展概况与特点 2.  延伸模式及其合法性浅析 2. ...

  3. LGP7167题解

    考试的一道题,因为某些原因sb了常数翻了好几倍/px 首先我们发现,一个水池的水只会向它下边第一个直径比它大的水池流. 我们把这些流动的关系连边,很容易发现是一棵树. 问水最后会到哪个水池相当于在问最 ...

  4. java语言：Linux与JVM的内存关系分

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m.从表面上,物理内存应该 ...

  5. 转： 关于Linux与JVM的内存关系分析

    转自: http://tech.meituan.com/linux-jvm-memory.html Linux与JVM的内存关系分析 葛吒2014-08-29 10:00 引言 在一些物理内存为8g的 ...

  6. 浅析ODS与EDW关系（转载）

    浅析ODS与EDW 关系 刘智琼 (中国电信集团广州研究院广州510630) 摘要 本文重点介绍了企业运营数据仓储(ODS)和企业数据仓库(EDW )的概念,并对ODS与EDW 之间的关系,包括两者相 ...

  7. Android 设计随便说说之简单实践(消息流动)

    在上面两篇分别说明了设计中较为简单也是很关键的实践点. 第一模块划分,它是根据每个模块所承载的业务,进行划分,是应用程序一个静态的描述. 第二合理组合,它是是将每个模块调动起来,共同实现业务,是一个准 ...

  8. Spark RDD概念学习系列之rdd的依赖关系彻底解密（十九）

    本期内容: 1.RDD依赖关系的本质内幕 2.依赖关系下的数据流视图 3.经典的RDD依赖关系解析 4.RDD依赖关系源码内幕 1.RDD依赖关系的本质内幕 由于RDD是粗粒度的操作数据集,每个Tra ...

  9. Linux与JVM的内存关系分析

    引言 在一些物理内存为8g的server上,主要执行一个Java服务,系统内存分配例如以下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约600m,Linux自身使用大约800m. 从表面 ...

随机推荐

  1. Junit单元测试学习

    一.首先选择学习工具是IDEA 1>官网下载IDEA 1:官网地址IntelliJ IDEA,官网上对于不同的操作系统(windows,macOS,Linux)都有两个版本可供下载| 其中蓝色下 ...

  2. Visual Studio Code的设置及插件同步

    Visual Studio Code的设置及插件同步 使用Visual Studio Code开发有一段时间了,用起来是极其的顺手,但是唯独一点不爽的就是,Visual Studio Code不像Vi ...

  3. Elasticsearch全文检索引擎。什么是elasticsearch？ 有什么特点？ 怎么使用？

    什么是ElasticSearch? Elasticsearch是一个基于Lucene的搜索引擎.它提供了具有HTTPWeb界面和无架构JSON文档的分布式,多租户能力的全文搜索引擎.Elasticse ...

  4. 在vue中使用Normalize初始化样式

    参考链接:https://www.jianshu.com/p/34533b45aac1

  5. 论文阅读 | TextBugger: Generating Adversarial Text Against Real-world Applications

    NDSS https://arxiv.org/abs/1812.05271 摘要中的创新点确实是对抗攻击中值得考虑的点: 1. effective 2. evasive    recognized b ...

  6. java8函数式接口(Functional Interface)

    介绍 函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口. 函数式接口可以被隐式转换为 lambda 表达式(箭头函数). 函数式接口代 ...

  7. 22.把hive表中数据导入到mysql中

    先通过可视化工具链接mysql,在链接的时候用sqoop 用户登录 在数据库userdb下新建表 保存,输入表名upflow 现在我们需要把hive里面的数据通过sqoop导入到mysql里面 sqo ...

  8. 【Python】【demo实验32】【回文数的确认】

    原题: 我的代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- #判断一个数字是否为回文数 即 12345654321 x = ...

  9. Android Application的Gradle说明

    //引入插件 apply plugin: 'com.android.application' android { compileSdkVersion 29 buildToolsVersion &quo ...

  10. 关于php性能优化

    php性能优化 1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方 ...