建站
咨詢
售后
建站咨詢
新聞中心
最近一直在研究瀏覽器端的圖形圖表繪制技術(shù)，從種類上可以分為兩種：
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括新華網(wǎng)站建設(shè)、新華網(wǎng)站制作、新華網(wǎng)頁(yè)制作以及新華網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，新華網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到新華省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
一類是矢量圖形繪制API，典型代表是微軟的VML與W3C主推的SVG
另外一類是基于像素的繪制API，典型代表是HTML5 Canvas
背景介紹：
VML是微軟推出的基于IE的矢量圖形繪制API，注意VML只能在IE中支持，而SVG是W3C
推出的矢量圖型API，顯然IE不待見它，所以只能在非IE的瀏覽器上支持，IE上要想顯示
SVG格式的圖形，必須額外安裝插件。
HTML5 Canvas是W3C推出的新一代瀏覽器端繪圖API，微軟從IE9+開始支持HTML5
Canvas渲染技術(shù)，其它主流瀏覽器都支持該技術(shù)。
技術(shù)優(yōu)缺點(diǎn)：
VML是基于XML方式來(lái)組織繪制對(duì)象，支持相對(duì)與絕對(duì)定位方式，同時(shí)支持group元素，
可以將一組元素對(duì)象繪制在一個(gè)group元素上，group上默認(rèn)支持絕對(duì)定位方式繪制圖形
VML技術(shù)繪制的圖形每個(gè)都是元素對(duì)象，可以任意添加鼠標(biāo)監(jiān)聽事件，而且每個(gè)元素對(duì)
象內(nèi)置支持tooltip功能，但是VML本身不支持動(dòng)畫。不支持單獨(dú)的文字繪制，文字繪制
必須依附其它頂級(jí)的VML 元素。同時(shí)微軟在IE8時(shí)候的改動(dòng)，導(dǎo)致VML在不同的IE瀏覽
器版本上使用略有不同。一個(gè)最常用的支持VML調(diào)用JavaScript腳本如下：
vare=["shape","shapetype","group","background","path","formulas",
"handles","fill","stroke","shadow","textbox","textpath","imagedata","line",
"polyline","curve","roundrect","oval","rect","arc","image"],
s=document.createStyleSheet();
for(vari=0; i s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml"); } VML支持2D與3D渲染技術(shù)，可以繪制出效果非常好的圖行。當(dāng)前支持VML技術(shù)繪制的 開源的前端圖表庫(kù)有很多，可能大家最熟悉就是JQuery的圖表庫(kù)與Highchart的圖表庫(kù) SVG技術(shù)與VML技術(shù)都是提供矢量圖形繪制元素，繪制圖形上每個(gè)元素都支持鼠標(biāo)監(jiān)聽 SVG比VML做的好地方就是文本繪制，直接支持文本對(duì)象，不得不說(shuō)VML的文本繪制太 TMD的變態(tài)。SVG也是基于XML文本描述的，這點(diǎn)跟VML非常相似。值得稱贊的是SVG 的JavaScript調(diào)用非常的容易與簡(jiǎn)潔。同樣IE6～I(xiàn)E8都不支持SVG渲染與顯示，解決辦 法就自己裝個(gè)adobe的SVG Viewer插件，IE9+之后版本支持SVG，所以說(shuō)IE才是最坑 爹的瀏覽器，而且是在中國(guó)使用人數(shù)最多的瀏覽器，這都拜微軟捆綁銷售所賜。 HTML5 Canvas是W3C推出來(lái)用來(lái)替代SVG的前端圖形技術(shù)，Canvas是基于像素的渲 染技術(shù)實(shí)現(xiàn)，所以它跟SVG與VML相比，放大與縮小很麻煩，位圖大家都懂。但是 Canvas相比VML與SVG還是有很多優(yōu)點(diǎn)，第一個(gè)廢除了每個(gè)繪制元素都是對(duì)象的做法， 浪費(fèi)資源??！支持操作圖像像素，可以支持Base64編碼，在前端就可以保存為圖像， 這個(gè)都是SVG與VML做不到的啊，Canvas借鑒編程語(yǔ)言圖形庫(kù)的設(shè)計(jì)思想，對(duì)有圖形 開發(fā)經(jīng)驗(yàn)的人掌握起來(lái)非常容易。而VML與SVG是基于XML的設(shè)計(jì)，只能通過(guò) JavaScript來(lái)操作元素，只有對(duì)每個(gè)元素指定一個(gè)ID，你才可以獲取到它，而Canvas支 持擦除與重繪制非常的方便。 最后想瞎掰一下那些開源的前端圖表庫(kù) 名頭最嚇人的應(yīng)該是Google推出的google chart開源前端圖表庫(kù)，據(jù)它自己說(shuō)基于 HTML5與SVG技術(shù)，在老版本的IE上使用VML技術(shù)。 功能最強(qiáng)大的應(yīng)該是HighChart圖表庫(kù)，官方說(shuō)它們是基于SVG與VML技術(shù)，下一 個(gè)版本將融入HTML5技術(shù) canvasXpress自己說(shuō)是完全標(biāo)準(zhǔn)的HTML5技術(shù)實(shí)現(xiàn)的圖表庫(kù)，但是如果想在IE9之 下版本支持必須額外包括FlashCanvas 或者ExplorerCanvas,而且還說(shuō)IE上面運(yùn)行很 慢，建議IE上使用時(shí)安裝Google iframe框架。 RGraph自己說(shuō)是完全HTML5技術(shù)實(shí)現(xiàn)，實(shí)際上是VML 與HTML Canvas混合實(shí)現(xiàn)， 支持大多數(shù)主流瀏覽器。 這些都國(guó)外的，國(guó)內(nèi)淘寶有個(gè)開源的前端圖表庫(kù)，但是支持的功能實(shí)在有限，通用性 有待提高。 SVG, VML, HTML5 Canvas三種前端圖形渲染技術(shù)，沒有一種是可以支持全部瀏覽 器的，這個(gè)就給實(shí)際項(xiàng)目中使用帶來(lái)不變，一般都會(huì)借助開源的圖表框架實(shí)現(xiàn)跨瀏覽 器支持。 轉(zhuǎn)載請(qǐng)注明-gloomyfish
分享標(biāo)題：瀏覽器端圖表渲染技術(shù)SVG,VMLHTMLCanvas
轉(zhuǎn)載來(lái)源：http://fisionsoft.com.cn/article/giicpc.html
