<!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. golang 操作ceph object storage

    ceph的object storage 提供了和amazon s3兼容的接口以供客户访问. 在ceph的官网上,可以看到它提供了多种语言的访问范本,例如python的(http://docs.ceph ...

  2. k8s 管理机密信息

    一.启动应用安全信息的保护: Secret介绍: 应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 ...

  3. Microsoft Hackathon 2019 留念

    参加今年微软的 Hackathon 是 2019 年 7 月份的事情,但是后来各种各样的事情,考托.考G.网申……就给耽搁了.我本来以为自己的记忆力足够好,几个月以后也能写很多东西,然鹅……现在发现好 ...

  4. 5分钟了解OWL本体建模语言

    一.概念: 定义:一种定义和实例化web本体的语言   本体:与xml schema不同,是知识表示,而不是一种消息格式   优点:可以推理   开放世界的假设:本体信息只增加,可以存在矛盾冲突的事实 ...

  5. C++ min函数

    min 是c++标准库头文件中的一个重要的函数.它的功能是一个最小值的函数,比较两个数值的大小,返回他们的之间最小值. #include <algorithm> int a=2; int ...

  6. sops的配置过程

    0.demo关键 1.关键信息,不能用5.1.6版本的,还有很多坑 蓝鲸版本: 标准运维:bk_sops_V3.1.39.tar 2.简单理解: 标准运维实际上调用作业平台job的API去执行 要跑通 ...

  7. [转帖] 基于telegraf, influxdb, grafana 建立 esxi 监控

    [系统集成] 基于telegraf, influxdb, grafana 建立 esxi 监控 https://www.cnblogs.com/hahp/p/7677420.html 之前在 nagi ...

  8. SQL SERVER DATEDIFF函数

    定义: DATEDIFF() 函数返回两个日期之间的时间间隔. 语法: DATEDIFF(datepart,startdate,enddate) 参数: ①datepart 参数可以是下列的值: da ...

  9. MySQL_bigint(20) 是什么意思？

    MySQL_bigint(20) 是什么意思? MySQL的整型类型有这样几种:   类型 存储空间 M默认值(显示宽度) 数据大小(无符号:unsigned) 描述 1 tinyint(M) 1 t ...

  10. Java实现二叉树地遍历、求深度和叶子结点的个数

    一.分析 二叉树是n个结点所构成的集合,它或为空树,或为非空树.对于非空树,它有且仅有一个根结点,且除根结点以外的其余结点分为两个互不相交的子集,分别称为左子树和右子树,它们本身又都是二叉树. 显而易 ...