Qunee组件制作思维导图

发表于 & 归档在 HTML, HTML5, JavaScript, Web, 案例.

客户常常提到思维导图,喜欢它的结构展示方式,和交互的友好,从图论的角度看,思维导图本质上是一种树,有一个根节点(主题)出发,联想到其他话题,于是分支开花,再分支,有时候也会构成网络结构,由子分支联想到另一个已有分支,但通常不破坏原有结构

qunee组件制作思维导图

使用Qunee组件制作在线地图

发表于 & 归档在 HTML, HTML5, JavaScript, Web, 地图, 案例.

地图是一种普遍应用,按准确度分精确地图(GIS)和示意地图(MapChart),前者支持各种地图投影与坐标系,譬如ArcGIS,后者使用相对坐标系,或者支持简单的WGS84经纬网坐标系,比如ILOG Elixir地图组件,示意地图再按图片类型分,可分为:栅格地图与矢量地图,Qunee组件适合制作矢量示意地图。

maps

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

发表于 & 归档在 HTML, HTML5, Web, 案例.

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下:

Screen Shot 2014-02-28 at 12.11.10 PM

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

发表于 & 归档在 HTML, HTML5, JavaScript, 案例.

中科院的某个客户遇到这样的需求:将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件,遇到几个问题:布局难以定制、节点样式难定制、交互有问题,后来改用Qunee组件,顺利解决问题。
这是一种典型应用,主要用到Qunee的布局类TreeLayouter,以及UI和交互的简单定制

树形布局效果

HTML5 Canvas绘制效率如何?

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas没有dom操作,只是简单的2D绘制,所以效率不低,Chrome浏览器下,每秒可绘制五万个基本图形元素(圆形,矩形或者线条),如果有阴影效果会慢很多,总的来说上万元素的绘制还是很轻松的

因为简单,做一些像素处理,2D绘制,小游戏啥的还是很方便的,国际上有javascript 1k作品大赛(http://js1k.com/),用1024字节的js代码,实现丰富的效果,基本上都用到canvas,所以在轻量小巧方面很有优势

附上SVG与Canvas的适用范围

canvas_or_SVG

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

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)

Canvas_Vs_SVG1

HTML5的当下与未来?

发表于 & 归档在 CSS, HTML, HTML5, JavaScript, Web.

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美

任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题
HTML5