<!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. (转)Linux用户登录记录日志和相关查看命令汇总

    原文地址:http://www.cnblogs.com/lizhaoxian/p/5981029.html # 1 utmp.wtmp.btmp文件 Linux用户登录信息放在三个文件中: 1 /va ...

  2. 在java开发环境中,快捷键的使用及用法

    (1)Ctrl+M切换窗口的大小 (2)Ctrl+Q跳到最后一次的编辑处 (3)F2当鼠标放在一个标记处出现Tooltip时候按F2则把鼠标移开时Tooltip还会显示即Show Tooltip De ...

  3. SaCa CDC产品简介

    1.1 产品简介   东软SaCa™ CDC实时增量数据捕获平台(以下简称SaCa™ CDC)是一款高度可扩展.可靠和易于配置的异构实时事务复制软件,能够提供异构环境下数据的实时捕捉和交付数据,以独立 ...

  4. $nextTick的使用

    原文地址 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 疑问: DOM 更新循环是指什么? 下次更新循环是什么时候 ...

  5. 这可能是你少有的能get到测试用例编写精髓的机会！

    自动化测试用例的编写是实现项目自动化的核心,合理的用例设计是保证自动化效益和实用性的关键,也直接决定了自动化脚本是否具备可扩展和可维护性.由此,本篇文章主要为大家介绍了测试用例编写的规范和注意事项. ...

  6. 直方图均衡化与直方图规定化的MATLAB实现

    目录 1.直方图均衡化 2.直方图规定化 @ 1.直方图均衡化 对图像进行非线性拉伸,重新分配图像像元值,使一定灰度范围内像元值的数量大致相等就是直方图的均衡化.原来直方图中间的峰顶部分对比度得到增强 ...

  7. 【Web】如何注释？

    HTML 形式:<!-- 注释内容 --> 实例: <!-- <p>这是第一段</p> --> CSS 形式:/* 注释内容 */ 实例: /* 选中i ...

  8. Java 基础篇之IO

    IO Java IO 流使用了一种装饰器设计模式,它将 IO 流分成底层节点流和上层处理流,其中节点流用于和物理节点直接关联,程序可以把不同物理节点流包装成统一的处理流,从而允许程序使用统一的输入.输 ...

  9. APP安全_Android反编译

    反编译 Android的反编译工具:apktool,JEB等. Apk 文件的结构,如下: META-INF:签名文件 res:资源文件,里面的 xml 格式文件在编译过程中由文本格式转化为二进制的 ...

  10. FTL-SLC&MTC&TLC

    1.博客 SLC.. http://diybbs.zol.com.cn/67/231_661182.html 2.FTL --作者在普及了一些FTL基本知识后,主要分析了在linux上实现的途径 ht ...