作者:empty 页数:127 出版社:empty |
Qu nee for HTML 5(以下简称Qu nee) 是一套基于HTML 5技术的图形组件产品, 使用HTML 5Canvas技术, 绘制清新、流畅的网络图, 可用于社交网络图、拓扑图、流程图、地图等需求,JS組件封装,藏繁琐于简洁,轻松构建优雅的互联网应用与企业应用,让数据的在线可视化变得容易。①Qu nee官网:gunee.com本文将详细介绍Qu nee的开发和使用Copyright O 2016上海酷利软件有限公司Shanghai Kuli Software Co., Ltd.All right reservedQu nee-发音为“kju:ni”, 寓意优雅轻巧
HTML 5使用HTML 5技术, 学习Qu nee前需了解相关的背景知识, 如Web, HTML 5, Canvas, Javascript, CSS等,此外作为一种Web图形解决方案, Qu nee有其特定的适用范围和产品特点, 了解这些特性有助于用户更好的选择和使用。Qu nee可用于拓扑图, 流程图, 组织图, 机房平面图, 组态软件的开发, 具有轻量、高效、灵活扩展的特点,支持目前主流浏览器(Safari, Firefox, Chrome, IE 9+) , 可运行在不同操作系统(Windows, Mac,Linux.) 和移动终端(iOS, Android, WindowsPhone.) , 借助Phone Gap之类的移动开发框架, 可以开发移动应用程序。Qu nee提供Web图形解决方案:·地图-地铁图、统计地图·拓扑图-社交网络图、网络管理图·其他-组织图、思维导图、流程图Qu nee组件的特点:·轻巧、高性能-支持上万图元,流畅操作Copyright O 2016上海酷利软件有限公司Shanghai Kuli Software Co., Ltd.All right reservedPage 6
为什么选择HTML 5技术?Qu nee for HTML 5 Developer Guide以前富客户端应用主要通过插件技术实现, 比如Adobe Flash, Microsoft Silver light, JavaApplet, 都存在些问题(需要安装插件, 不支持移动平台等) , 相比之下HTML 5的优势是:·不需要安装插件跨平台,支持主流浏览器和移动设备·w3c的国际标准CD OCT VEne[ Cavs>随着技术的发展, 主流浏览器对HTML 5支持越来越完善, 网页不再只是展示文字和图片, 使用HTML 5技术组合, 可以实现更多的功能:实时通讯、本地存储、图形绘制, 借助Canvas, 5VG以及C5S 3技术, 可以实现丰富的图形界面和动画有了这些技术的支撑, 网页中呈现专业的图形组件成为了可能, Qu nee for HTML 5选择HTML 5技术, 将这种可能性变为现实,降低了技术门槛,使得高效、丰富、动态的图形展示变的容易,Copyright O 2016上海酷利软件有限公司Shanghai Kuli Software Co., Ltd.All right reservedPage 9Qu nee for HTML 5Qu nee for HTML 5 Developer GuideHTML 5 Canvas> Canvas>是HTML 5标准中新增的标签元素, 在HTML 5标准之前就已经出现, 最早由Apple的Safari浏览器引入, 用于提供一组纯粹的2D绘图API, 目前主流浏览器都已支持, Qu nee forHTML 5主要使用Canvas技术展示图形界面。Canvas元素对应的是HTML Canvas Element类, 继承自标准的HTMLElement类型, 与普通的网页标签元素一样, 存在于HTML DOM树中, 可通过CSS设置相应的布局位置和样式属性, 我们称之为画布元素, 通过脚本语言可以在上面绘制2D图形使用Canvas技术, 用到最多的类是Canvas Rendering Context 2D, 表示绘制上下文, 相当于Java2D中的java.awL Graphics 2D类, 提供绘制的相关函数, 如线条绘制, 图形填充, 文字绘制, 坐标变化, 缩放等等。Canvas相关类有十几个, 涵盖了基本的2D绘图操作, 其提供的API比较底层, Qu nee for HTML 5内核会用到这些API, 并做抽象和封装, 提供更高级的图形元素, 使用Qu nee开发应用可以直接使用这些高级对象, 而不需要使用那些底层的API, 这会使开发变得容易。当然如果你想更深入的定制, 可以学习更多Canvas的底层API, 可参阅下面的链接:
Canvas和SVG是HTML 5中主要的2D图形技术, 前者提供画布标签和绘制API, 后者是一整套独立的矢量图形语言, 成为W3C标准已经有十多年(2003.1至今) , 总的来说, Canvas技术较新, 从很小众发展到广泛接受, 注重概格图像处理, SVG则历史悠久, 很早就成为国际标准, 复杂, 发展缓慢(Adobe SVG Viewer近十年没有大的更新)Canvas vs5VG canvas>和 svg>部是HTML 5推荐使用的图形技术, Canvas基于像素, 提供2D绘制函数, 是一种HTML元素类型, 依赖于HTML, 只能通过脚本绘制图形; SVG为矢量, 提供一系列图形元素(Rect, Path, Circle, Line…) , 还有完整的动画, 事件机制, 本身就能独立使用, 也可以嵌入到HTML中, SVG很早就成为了国际标准, 目前的稳定版本是1.1-http://www.w3.org/TR/SVG/,两者的主要特点见下面的表格:SVG转CanvasSVG是一种古老技术, 有很多已有的SVG图片、图标, 这些资源我们也可以用到Canvas中, 比如使用Canvas RenderingContext2D#drawImage() 可以实现在Canvas中可以绘制SVG图片, 另外也有第三方类库(can vg.js) 支持对SVG子元素进行解析, 并使用Canvas来绘制, 如果你想将SVG文件转换成Canvas代码, 可以使用SVG2 Canvas在
1.2.1.1为什么选择HTML 5技术?
1.2.1.2HTML 5 Canvas>
1.2.1.3Canvasvs5VG.
1.2.1.4为什么选择Canvas技术?
1.2.2 Graph组件介绍
1.2.3Qunee组件特性.
1.3快速上手.
1.3.1开发环境.
1.3.2开发流程.
1.4图形元素.
1.3.2.1数据采集
1.3.2.2数据转换
1.3.2.3数据呈现
1.3.2.4交互与操作
1.4.1图元基类.
1.4.1.1图元事件支持
1.4.1.2图元属性支持
1.4.1.3图元父子关系
1.4.1.4添加UI组件
1.4.2节点图元.
1.4.2.1创建节点
1.4.2.2节点位置
1.4.2.3节点的拓扑属性.
1.4.2.4节点跟随.:
1.4.2.5节点图片
1.4.2.5.1图片注册
1.4.2.6节点文字.
1.4.2.7节点样式属性.
1.4.3连线图元.
1.4.3.1连线基本属性.
1.4.3.2连线拓扑关系.
1.4.3.3连线外观
1.4.3.4总线效果
1.4.4分组图元.
1.4.4.1分组样式
1.4.4.2分组背景图片
1.4.5子网类型.
1.5图元容器.
1.5.1图元管理.
1.5.2事件处理.
1.5.3选中管理容器
1.5.4按树图遍历.
1.5.5按图历.
1.6 Graph组件.
1.6.1.1 Graph的图层结构.
1.6.1.2 Graph的坐标系统
1.6.1.3 Graph的图元操作
1.6.1.4平移缩放操作.
1.6.2界面交互.
1.6.2.1交互事件类型.
1.6.2.2添加交互监听.
1.6.2.3 Graph交互模式.
1.6.3常用属性与方法.
1.6.4选中过滤、移动过滤
1.6.5其他属性与方法.
1.6.6图元默认样式表.
1.6.7导航面板类型.
1.6.8延迟绘制.
1.7自动布局.
1.7.1弹簧布局.
1.7.2树形布局
1.7.3气泡布局.
1.8样式列表.
1.9常见问题
Qu nee技术博客:blg.qunee.cm
在线文档:dc.qunee.cm
在线演示:dem.qunee.cm
Hell Qu nee
'概述
*快速上手
!图形元素
图元容器
’Gra