qunee for html5,Qunee for HTML5（一）

1、Qunee for HTML5(以下简称Qunee)是一套基于HTML5技术的图形组件产品，使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易。

Qunee - 发音为“kjuːni”，寓意优雅轻巧

2、Qunee可用于拓扑图，流程图，组织图，机房平面图，组态软件的开发，具有轻量、高效、灵活扩展的特点，支持目前主流浏览器(Safari, Firefox, Chrome, IE9+)，可运行在不同操作系统(Windows, Mac, Linux......)和移动终端(iOS，Android，Windows Phone......)，借助PhoneGap之类的移动开发框架，可以开发移动应用程序。

Qunee提供Web图形解决方案：地图 - 地铁图、统计地图拓扑图 - 社交网络图、网络管理图其他 - 组织图、思维导图、流程图

Qunee组件的特点：

轻巧、高性能 - 支持上万图元，流畅操作矢量图形 - 支持矢量图形，无极缩放交互体验 - 漫游交互，改进交互事件、支持手持设备注重细节 - GIF动画，丰富渐变，层次控制等

3、Qunee主要提供Graph组件，Graph中可以加入不同类型的图元(Node, Edge, Group, ShapeNode, Text, Bus ...)，图元可以配置不同的呈现样式，或者挂载或者添加不同的UI元素(LabelUI, ImageUI ...)，通过组合和布局，实现丰富的呈现效果，满足多种应用场景：

地图 - 地铁图、统计地图

Qunee提供的丰富矢量图形，对于点线之类数据的展现，能得心应手得解决，可运用于地铁、管线这样的应用Qunee支持漫游交互、无极缩放、不限制坐标范围，这很适合地图的呈现，加上多边形丰富的样式，可用于解决地图背景、以及统计地图之类的问题

拓扑图 - 社交网络图、网络管理图

支持节点、连线、分组等图元类型，具有良好的层次控制，支持上万图形元素，并且流畅操作，带来轻快、高效的视觉体验，适合解决网状数据的呈现与交互问题

其他 - 组织图、思维导图、流程图

借助强大的树形布局器，可以解决树形结构数据的自动布局问题，可运用于组织图、思维导图等提供丰富的基本图形与箭头样式，支持弯曲、正交等连线类型，加上包含关系的控制，可以解决流程图之类的问题

先介绍一个简单的Hello Qunee程序。

Hello Qunee for HTML5

/**

* This file is part of Qunee for HTML5.

* Copyright (c) 2016 by qunee.com

**/

if(!window.getI18NString){getI18NString = function(s){return s;}}

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);

只要懂英文，内容应该是不难理解的，程序创建了一个hello 和Qunee节点，还有一条edge线，后面就是设置edge的样式。运行结果为

Paste_Image.png