<!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="http://demo.qunee.com/js/common/qunee-min.js"></script>

<script type="text/javascript" src="./qunee/jquery.min.js"></script> // 自己找这个js文件

<!--<script src="http://demo.qunee.com/js/common/Overview.js"></script>-->

<script src="http://demo.qunee.com/js/common/Overview.js"></script>

<script>

    var graph = new Q.Graph(canvas);

    var hello = graph.createNode("Hello", -100, -50);

    hello.image = Q.Graphs.server;

    var qunee = graph.createNode("Qunee", 100, 50);

    var edge = graph.createEdge("Hello\nQunee", hello, qunee);

    edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);

    edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);

    edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);

    edge.setStyle(Q.Styles.LABEL_BORDER, 1);

    edge.setStyle(Q.Styles.LABEL_POINTER, true);

    edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));

    edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);

    // 创建缩略图的div

    var overviewDiv = document.createElement('div');

    overviewDiv.style.width = '200px';

    overviewDiv.style.height = '200px';

    overviewDiv.style.position = 'absolute';

    overviewDiv.style.top = '10px';

    overviewDiv.style.right = '10px';

    // overviewDiv.style.backgroundColor = 'red';
    // 将创建好的div添加到graph里面

    graph.html.appendChild(overviewDiv);
    // 通过Overview方法生成缩略图

    var overview = new Q.Overview(overviewDiv, graph);

</script>

</body>

</html>

如果不生效，重新加载js。

qunee 缩略图的更多相关文章

  1. PHP-生成缩略图和添加水印图-学习笔记

    1.开始 在网站上传图片过程,经常用到缩略图功能.这里我自己写了一个图片处理的Image类,能生成缩略图,并且可以添加水印图. 2.如何生成缩略图 生成缩略图,关键的是如何计算缩放比率. 这里,我根据 ...

  2. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  3. 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

    在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...

  4. C# webform上传图片并生成缩略图

    其实里面写的很乱,包括修改文件名什么的都没有仔细去写,主要是想记录下缩略图生成的几种方式 ,大家明白就好! void UpImgs() { if (FileUpload1.HasFile) { str ...

  5. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  6. 获取文件的缩略图Thumbnail和通过 AQS - Advanced Query Syntax 搜索本地文件

    演示如何获取文件的缩略图 FileSystem/ThumbnailAccess.xaml <Page x:Class="XamlDemo.FileSystem.ThumbnailAcc ...

  7. 帝国cms内容页调用缩略图的原始尺寸图片

    在发布文章上传标题图片时,勾选"生成缩略图",将生成原图和对应的缩略图 原图的链接为[!--titlepic--]:/d/file/anlizhanshi/2016-11-25/8 ...

  8. VS2013开启滚动条缩略图和双击选中高亮，效果杠杠滴！

    1.双击代码或选中代码高亮,用以下插件,反应很灵敏,我安装的是第三个 2.代码编辑器的滚动条缩略图是VS自带的,需要打开菜单----工具----选项,如下图设置: 3.VS默认的选中颜色,需要打开菜单 ...

  9. 毫秒级的时间处理上G的图片(生成缩略图)

    测试环境: 测试图片(30M): 测试计时方法: Stopwatch sw1 = new Stopwatch(); sw1.Start(); //TODO...... sw1.Stop(); stri ...

随机推荐

  1. Hibernate三种状态：瞬时状态、持久化状态、离线状态

    三种状态及相互转化 瞬时状态(transient):刚new出来一个对象,还没有被保存到数据库中 持久化状态(persistent):已经被保存到数据库中或刚从数据库中取得 离线状态(detached ...

  2. 用事件队列来处理pixi中的场景元素入场

    在pixi中,添加一个精灵元素,你可能需要,先将贴图load进来,然后才能添加到场景中去,所以一般会这么操作 Loader.add("tree","static/imag ...

  3. 文件上传and富文本页面

    文件上传功能: 1.首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" act ...

  4. octave

    1. octave, 如何求一元二次方程的解: 例如:· -3x-9y=18  ·   4x+3y=12 命令: >>>  A=[-3 -9; 4 3]; B=[18;12]; &g ...

  5. 【LOJ】#3120. 「CTS2019 | CTSC2019」珍珠

    LOJ3120 52pts \(N - D >= 2M\)或者\(M = 0\)那么就是\(D^{N}\) 只和数字的奇偶性有关,如果有k个奇数,那么必须满足\(N - k >= 2M\) ...

  6. PAT A1019 General Palindromic Number (20 分)

    AC代码 #include <cstdio> const int max_n = 1000; long long ans[max_n]; int num = 0; void change( ...

  7. # Python3微博爬虫[requests+pyquery+selenium+mongodb]

    目录 Python3微博爬虫[requests+pyquery+selenium+mongodb] 主要技术 站点分析 程序流程图 编程实现 数据库选择 代理IP测试 模拟登录 获取用户详细信息 获取 ...

  8. python模块-paramiko-修改源码(demo实例)

    在github上下载一个paramiko,找到demos目录,复制到pycharm项目里面 这是因为python3传来得数据是bates数据类型,需要decode()一下就可以,在demos下得int ...

  9. CNN网络结点计算总结（1998）

    图 来源:Gradient-Based Learning Applied to Document Recognition 参阅CSDN:https://blog.csdn.net/dcxhun3/ar ...

  10. NHiberante的优缺点

    参考 NHiberante的优缺点 3.1 优点 (1).面向对象:NHiberante的使用时只需要操纵对象,使开发更对象化,抛弃了数据库中心的思想,完全的面向对象思想. (2).透明持久化:带有持 ...