用wz_jsgraphics.js(javascript圖形庫)進行畫矢量圖,兼容多瀏覽器
Posted on 2010-07-14 11:22 幻海藍夢 閱讀(6702) 評論(0) 編輯 收藏 所屬分類: JS 、Ajax 、網管--拓撲圖
原文:
http://squll.blogbus.com/logs/3932957.html
序:在
www.sitepoint.com
上看了 Simon 的一篇 BLOG ,引導我去了一個很棒的 Web 開發站點
http://www.walterzorn.com/
,并在那里獲得了一個僅用 DHTML 和 Javscript 技術開發的一個高性能的矢量圖形庫 wz_jsgraphics.js (感謝 Walter Zorn 開發了這個圖形庫),使用它就可以在你的網頁上畫出漂亮的矢量圖形了。進入這個圖形庫的介紹頁面
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
,映入眼簾的是折線、多邊形、圓等常見的一些幾何圖形,起初我以為不過是一些圖片罷了,當我看到這行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后,并細細閱讀了關于它的說明后,才意識到除了VML 和 SVG可以在 網頁上繪制顯示矢量圖形,僅用DHTML 和 Javascript 同樣可以做到這一切!是不是覺得很吃驚呢?(雙擊一下這個文檔,看看放大后的矢量圖形吧),ok!廢話少說,下面我將詳細介紹一下這個圖形庫。
★ 總覽 (overview)
該圖形庫使用了 DHTML 和 Javascript 技術,它可以畫線,圓,橢圓,折線,多邊形,矩形。對于一個不太了解 Javascript 的人來說使用這個圖形庫也是非常容易的,另外,使用這個圖形庫畫出的圖形是完全被優化到像素級的!
★ 瀏覽器的兼容性
Linux 系統 :
Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.
Windows 系統 :
Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.
說明:如果在網頁全部加載完成后,使用這個矢量圖形庫進行繪制,在 Opera 版本 7 以前的瀏覽器中不會執行, Netscape 版本 4 也不會執行。相反,當 HTML 頁面正在被解析時, 使用這個圖形庫進行繪制是全部瀏覽器均能做到的。
★ 怎樣使用這個矢量圖形庫?
1 .包含這個庫 插入下面的代碼到你的 html 文件的開頭部分(在 <head> 和 </head> 之間): |
|||
|
|||
2 .使用層( div 或 layer )作為畫布( canvases )
如果在頁面加載完成后繪制,應該設置幾個具有絕對坐標的層,作為你的畫布,每一個層應該有一個唯一的 id: |
|||
3 .下載并保存這個圖形庫 到這個地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下載,將解壓后的 wz_jagraphics.js 與你的 html 文件放至相同的目錄中,如果你的 wz_jagraphics.js 與 html 文件處于不同的目錄下,記得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相對路徑。 |
★ 怎樣使用這個矢量圖形庫中的繪制函數?
1 . 創建一個 jsGraphics 對象
a) 在頁面完全載入后繪制: (這種方式不會在 Netscape 版本 4 和 Opera 版本小于 7 的瀏覽器中執行) 還記得前面用 div 元素創建的畫布嗎?看下面的示例, 需要為 div 創建相應的 jsGraphics 對象,這些代碼必須插入到相關的 div 元素結束標志 </div> 后面, 但必須在 </body> 的前面, div 元素的 id 作為 new jsGraphics(); 的構造參數,像下面這樣: |
|||
|
|||
如果有多個 div 元素,每一個 div 都需要有它自已的 jsGraphics 對象: |
|||
|
|||
b )在頁面載入的時候繪制
只需要將構造參數設為空: |
|||
你可以選擇 jg,jg2 或 jg_doc 其它的變量名,只要不違反 Javascript 的命名規則就可以。 |
|||
2. 圖形繪制函數
為確保所有瀏覽器能正確執行, 這里選擇頁面載入時進行繪制,即上文的 b 方式 一旦產生這些圖形對象(在這個示例中 jg, jg2 或 jg_doc ),就可以使用它來調用繪制圖形的方法。由圖形對象所繪制的圖形將會在相關的 div 元素上顯示(采用上文 a 方式構造圖形對象): |
|||
|
|||
開始畫時應首先選擇畫筆顏色,否則,畫筆的顏色取默認值-黑色。坐標值作為繪制圖形方法的參數,如果采用上文的 a 方式構造圖形對象,那么坐標值是相對于 div 元素的左上角的。每一個畫布(圖形對象),它的 paint 方法必須被顯示的調用以產生 html 格式的圖形,否則,在你的屏幕上什么都不會發生。 |
函數名(方法) | 示例代碼(用 jg 圖形對象) |
setColor( "#HexColor" ); |
jg.setColor("#ff0000"); |
setStroke( Number ); |
jg.setStroke(3); |
drawLine( X1, Y1, X2, Y2 ); |
jg.drawLine(20,50,453,40); |
drawPolyline( Xpoints, Ypoints );
var Xpoints = new Array(x1,x2,x3,x4,x5); |
var Xpoints = new Array(10,85,93,60); |
drawRect( X, Y, width, height ); 一個矩形的外邊線。參照左上角的坐標點,并指定矩形的寬度和高度。 |
jg.drawRect(20,50,70,140); |
fillRect( X, Y, width, height ); 填充矩形,參照左上角的坐標點,并指定矩形的寬度和高度。 |
jg.fillRect(20,50,453,40); |
drawPolygon( Xpoints, Ypoints );
var Xpoints = new Array(x1,x2,x3,x4,x5); 如果始點和終點末被指定,多邊線將會自動閉合。 |
var Xpoints = new Array(10,85,93,60); |
fillPolygon( Xpoints, Ypoints ); 填充矩形。參數作用見 drawPolygon() |
jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87)); |
drawEllipse( X, Y, width, height ); 畫橢圓邊線。參照橢圓的外接矩形, x 和 y 是這個外接矩形的左上角坐標 |
jg.drawEllipse(20,50,70,140); |
fillEllipse( X, Y, width, height ); |
jg.fillEllipse(20,50,71,141); |
drawString( "Text", X, Y ); 寫文本至由 x 和 y 坐標指定的位置。不同于 Java ,坐標值是第一行文本的左上角坐標值。如果文本中包含有 HTML 標記將被轉義,舉個例子: "Some Text<br>more Text" 會被轉義為兩行
它們可以結合使用 |
jg.setFont("arial","15px",Font.BOLD); |
drawImage( "src", X, Y, width, height ); |
jg.drawImage("friendlyDog.jpg", 20,50,100,150); |
paint();
像下面這樣的調用應該避免 :
像下面這樣的調用性能會很高 : |
jg.paint(); |
clear(); 與圖形對象關聯的 div 畫布中的圖形被清除(在 div 中不是由這個圖形對象創建的內容是不會被改變的) |
jg.clear(); |
setPrintable( true ); 默認情況下,打印這些圖形是不太可行的,因為瀏覽器的默認打印設置中會關閉打印背景,調用 setPrintable() ,并設置參數為 true ,將重置圖形為可打印的(至少在 Mozilla/Netscape 6+ and IE 中) |