Archive for the HTML Category

Qunee中的基本图形与箭头

图形组件的基础是图形,图形的基础是2D,如形状,路径片段,渐变填充,边框等,SVG中每个图形要素都有对应的标签元素,Canvas中则提供了一些绘制函数,路径和形状的管理需要自己实现,Qunee组件中提供了丰富的基本图形
Qunee默认图形的效果

图形与箭头

Qunee组件制作思维导图

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

qunee组件制作思维导图

使用Qunee组件制作在线地图

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

maps

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

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

Screen Shot 2014-02-28 at 12.11.10 PM

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

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

树形布局效果

HTML5 Canvas绘制效率如何?

js运行效率在提升

编程语言的效率是前提,js自然比不上native的C语言效率,所以Canvas效率无疑比不上原生的2D图形绘制,但是js效率的提升是有目共睹的,以js与as为例,基本操作(运算操作,集合操作,Map操作)已经超越ActionScript,尤其是Google Chrome浏览器与as拉开了不小的距离,甚至某些方面超过java

JavaScript性能比较

Canvas绘制效率不低

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

适合简单应用

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

附上SVG与Canvas的适用范围

canvas_or_SVG

复杂应用借助第三方开发包

对于复杂应用,需要自己来解决无效区域,局部刷新,交互选中等功能,自己实现有些难度,这时候我建议借助第三方开发包

Canvas学习资料

http://www.w3.org/TR/2dcontext/

https://developer.mozilla.org/en/docs/HTML/Canvas

http://www.w3schools.com/html/html5_canvas.asp

第三方类库

KineticJS – kineticjs.com

EaselJS – www.createjs.com/#!/EaselJS

Qunee – qunee.com

Fabric.js – fabricjs.com

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

HTML5中的2D图形绘制技术

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

Canvas_Vs_SVG1

Canvas vs SVG

<canvas>和<svg>都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 – http://www.w3.org/TR/SVG/,两者的主要特点见下面的表格:

Canvas_Vs_SVG2

SVG与Canvas主要特点

根据两者的不同特点,Canvas和SVG有各自的适用范围

Canvas适用场景

Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制

SVG适用场景

SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景

canvas_or_SVG

HTML5的当下与未来?

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

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

HTML5是什么?

侠义的HTML5

侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01和XHTML1.0标准基础上,HTML5标准增加和修改了一些标签元素,其中多媒体相关的有<video>, <audio>, <canvas>,同时集成了SVG内容,数据内容的元素有<section>, <article>, <header>, <nav>, <menu>等,还提供了新的API,如2D绘图(Canvas),离线存储(Local Storage),加强版的cookie(WebStorage),拖拽,通讯(WebSockets),浏览历史管理,文件API(上传下载本地存储),位置API(Geolocation)等。

HTML5

更多HTML5的介绍,可参阅:

http://en.wikipedia.org/wiki/HTML5

http://www.html5rocks.com

http://dev.w3.org/html5/spec

广义的HTML5

广义的HTML5包括HTML, CSS和JavaScript在内的一套技术组合,其目标是减少浏览器对于插件的依赖,提供丰富的RIA(富客户端)应用。所以CSS3, SVG, WebGL, Touch事件,动画支持等都属于HTML5技术范围

广义HTML5

相关技术

Web相关组织

W3C – 万维网联盟 - http://www.w3.org/

WHATWG – 网页超文本技术工作小组 - http://www.whatwg.org/

为什么选择HTML5技术?

互联网趋势

随着网络架构的完善,宽带提升,网速满足实时交互需求时,计算机结构也将发生变化,光驱消失,硬盘消失,内存增大,GPU愈加重要,现在B/S结构的应用越来越多,而HTML5旨在富互联网应用,能够改善B/S结构应用的用户体验,是互联网应用的趋势之一

HTML5 Vs Flash

以前富客户端应用主要通过插件技术实现,比如Adobe Flash, Microsoft Silverlight, Java Applet,存在一些问题:需要安装插件,不支持移动设备,私有技术,没有国际标准等等,当然插件技术也有优势的地方,有特定的用途,下面就Flash技术和HTML5进行比较

HTML5_Vs_Flash

HTML5的缺点

HTML5目前最大的问题有三个:功能简单且分散、浏览器支持不一

功能简单且分散

HTML5是一种技术集合,包括各种标签及其相关API,HTML,CSS,SVG,JavaScript等,没有统一的开发工具,一个完整的HTML5应用涉及到多种技术,导致开发难度大,对于企业应用,HTML5的功能有限,需要借助第三方类库

浏览器支持不一

一直以来HTML5都以跨平台著称,但实际上要实现这一目标工作量巨大,HTML5绝少一个浏览器的标杆(Webkit有希望成为),尤其目前在IE6/7/8占有率居高不下的情况下,希望用HTML5跨全平台基本是不可能的

导致的结果是用户体验不佳,那么什么时候可以选择HTML5呢?

HTML5适用范围

酷的应用

曾经有人这样形容HTML5,doing anything cool (on the web),HTML5可以做很酷的应用,无需安装插件,就可以在网页中全屏观看高清视频,玩儿轻巧的在线游戏,体验流畅的动画效果,浏览精美的网络图,收听网络电台的音乐……一些小而美的应用非常适合HTML5,企业应用中的某些模块也可以选择HTML5

非得跨平台吗?

每种编程语言和技术都有特定的适用范围,如果你的目标客户是iPhone,你只需要考虑Safari for Mobile就可以了,如果还要考虑Android平台,选择支持Webkit内核,如果目标人群是高端用户,用些新技术也是可行的,如果非得所有平台都支持,在基本功能之外,使用HTML5技术增加一些亮点,也会很有吸引力

总结

目前HTML5已经可以解决很多问题,多少可以用到一部分,而面向未来互联网,基于“云+终端”的构架,终端的HTML5的兼容解决方案必然会出现,那时候你就可以全面拥抱HTML5了。