轻量高效的拓扑图组件
zh

使用Qunee组件制作在线地图

2014-02-28

地图是一种普遍应用,按准确度分精确地图(GIS)和示意地图(MapChart),前者支持各种地图投影与坐标系,譬如ArcGIS,后者使用相对坐标系,或者支持简单的WGS84经纬网坐标系,比如ILOG Elixir地图组件,示意地图再按图片类型分,可分为:栅格地图与矢量地图,Qunee组件适合制作矢量示意地图。 中国地图示例 数据格式 数据格式为JSON,里面包含三种类型:paths、points、labels,分别对应地图区块,地图点图元,文本标签 { paths:{ "0": { "path": "M 377.651,468.883 C 378.90893,469.42985 …

阅读更多

基于HTML5技术绘制上海地铁图

2014-02-28

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解 首先需要解决数据问题,可以从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,需要不只要记录站点的位置,还需要设置文本标签的理想位置,有时为了避免文字叠加,需要设置旋转角度……总之事在人为,想想办法,最终解决了数据问题,再加上Qunee图形组件的强大展示效果,做出来可以交互的在线地铁图 数据格式 采用JSON格式数据,分三种类型:文本标签、站点、地铁线 总的结构如下: { "labels" : [ ... …

阅读更多

使用Qunee组件展示水文观测站点

2014-02-27

中科院的某个客户遇到这样的需求:将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件,遇到几个问题:布局难以定制、节点样式难定制、交互有问题,后来改用Qunee组件,顺利解决问题。 这是一种典型应用,主要用到Qunee的布局类TreeLayouter,以及UI和交互的简单定制,下面以示例来做介绍 需求分析 按水文观测站区域与级别分五个等级,最顶层的是主站点,下面分区站点,再往下子站点,最后是实际观测点或者设备,因为站点总数量几千上万,为了便于查看,采用动态加载方式,点击站点节点的加号,动态加载子站点,并执行自动布局 最终的效果类似下面截图 示例介绍 初始化图形组件 这里将Graph组件直接嵌入 …

阅读更多

HTML5 Canvas绘制效率如何?

2013-12-16

js运行效率在提升 编程语言的效率是前提,js自然比不上native的C语言效率,所以Canvas效率无疑比不上原生的2D图形绘制,但是js效率的提升是有目共睹的,以js与as为例,基本操作(运算操作,集合操作,Map操作)已经超越ActionScript,尤其是Google Chrome浏览器与as拉开了不小的距离,甚至某些方面超过java. Canvas绘制效率不低 Canvas没有dom操作,只是简单的2D绘制,所以效率不低,Chrome浏览器下,每秒可绘制五万个基本图形元素(圆形,矩形或者线条),如果有阴影效果会慢很多,总的来说上万元素的绘制还是很轻松的 适合简单应用 因为简单,做一些像素处理,2D绘制,小游戏啥的还是很方便 …

阅读更多

HTML5之图形绘制技术(Canvas Vs SVG)

2013-12-16

HTML5中的2D图形绘制技术 Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新) Canvas vs SVG 和都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …

阅读更多

HTML5的当下与未来?

2013-12-11

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美 任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题 HTML5是什么? 侠义的HTML5 侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01和XHTML1.0标准基础上,HTML5标准增加和修改了一些标签元素,其中多媒体相关的有, , ,同时集成了SVG内容,数据内容的元素有, …

阅读更多

JavaScript类继承与属性定义

2013-05-20

Extjs的类继承——$.extend Extjs是比较早期的web企业组件,代表了面向对象编程思想在js中的实践,其中最基本的就是类的继承,通过对prototype和constructor的复制和设置实现,但实现代码并不是那么容易,看过extjs的extend代码就会明白其难度,没有相当js经验很难看懂,当年看这块儿费了不少精力,后来考虑到版权问题,以及代码简化的需要,自己实现相关功能,经历几番修改才得以稳定 下面是最简化的实现,以及测试例子,当然这个实现存在些问题,比如对于javascript 1.8中的get set不支持,需要自行改造 function extend(sb, sp) { var sbp = …

阅读更多

famo.us是什么?

2013-05-08

初次访问famo.us,被他的动画和交互效果所震撼,研究过其代码后,发现用到三种技术:matrix3d变换,requestAnimationFrame实现动画,以及物理运动引擎,单从技术上看三者都不难实现,但事物表面背后往往隐藏深意,famo.us的由来和目标却是野心勃勃。 创始人为web apps性能低下困扰已久,后受到Twitter Bootstrap的启发,试图提供一种用于开发本地级运行效率的web app框架,什么Sencha touch, jQuery Mobile等都是低效的代名词,这些为website而生的东西不适合复杂的web apps应用,应绕开浏览器固有的一些缺陷(document 渲染机制,CSS3导致的性能问 …

阅读更多