<!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. js如何控制select展开

    找了一圈也没找到靠谱的方案,后来通过动态的控制select的size属性实现了. 这也算是一种方法吧. 先判断option的数量n,然后把select的size调整到n,当用户选择后,再把size设置 ...

  2. mysql innodb阻塞分析

    http://blog.csdn.net/hw_libo/article/details/39080809

  3. python3.6下pycharm连接mysql

    由于python3.x里面没有了MysqlDB,所以使用python3.6+django连接不上mysql,会报错 no modul "MysqlDB".于是就有了一个替代品,叫p ...

  4. centos 7 cloudera-manager5.16.2,CDH5.16.2安装升级spark2.4.0

    1.在已经安装好系统的linux服务器上关闭selinux和iptables 2.在所有linux服务器上配置ntp服务并设置ntp时间同步 3.在所有linux服务器上安装好cm和cdh版本所需要对 ...

  5. # G++出现cannot open output file … : Permission denied问题

    G++出现cannot open output file - : Permission denied问题 这是因为之前的编译运行程序没有退出,导致下一次编译运行无法进行,这应该是命令行下运行才可能出现 ...

  6. django初步了解4

    django单表查询 必知必会13条 1.all() 查询所有 QuerySet res=models.Book.objects.all()#惰性查询 print(res) for i in res: ...

  7. linux + qt 环境搭建

    下载地址 install qt huqian@huqian-Lenovo-IdeaPad-Y400:~/XRF$ ls qt-opensource-linux-x64-.run SourceFile ...

  8. nginx + uwsgi 部署django项目

    因项目需求,需要部署django项目,这里是基础的nginx配合uwsgi部署django,后续会采用docker部署的方式 环境: centos7 python3.5.4 django2.1.4 u ...

  9. asp.net 8 Request,Response,Server

    Request成员: 1.Request.UrlReferrer 获取请求的来源,可以防盗链 Response.Write(Request.Url.ToString());//获取当前请求的URL地址 ...

  10. 数据库数据导入/导出报错：无法在只读列“Id”中插入数据。

    本文仅供小白参考,大佬请随意...... 本例是:从vs 2017自带的localDB数据库的数据---导出到---->Sql Server 2008中的相应数据库中 1. 导出数据库: 2. ...