|
<script language=javascript>
</script>
<script type=text/javascript>
</script>
序：在 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 的人來說使用這個圖形庫也是非常容易的，另外，使用這個圖形庫畫出的圖形是完全被優化到像素級的！
★ 試着由給定的參數畫幾個圖形 (Try it out)
★ 性能（ Performance ）
在 HTML 中並沒有提供類似於線、圓、橢圓或其它非矩形的圖形表現元素。在工作區中，我們可以利用、並設置具有背景顏色的 Div （或 Layer ）元素，並且把這些 Div 元素縮小到與像素相似的大小，每一個 Div 元素代表了一個像素，然後用 Div 元素在網頁上進行繪製。我們在使用這些 Div 模型來畫矢量圖形的時候，要儘可能避免一些冗餘的接連處，看下面的圖：
<script type=text/javascript>
</script>
Image dynamically drawn with the Draw Shapes Library
unfavourable
better
optimal
|
從左至右，最左邊的是最不好的畫法，仔細看一下會發現階梯狀的每一行的連接處都會有一個 Div 連接，這個 Div 是沒有用的，應該被刪除；中間的畫法已經很不錯了，但應該再優化一下，以第一行爲例：用三個 Div 表現水平的一行是多餘的，應合爲一個，同樣垂直方向的 Div 也應合併（例如階梯的末尾）。
按 Walter Zorn 所言，在畫矢量圖形時爲獲得更好的性能，並儘可能避免上述的一些冗餘，他用了最好、最快速的算法，只用最少、最必要的 Div 元素來繪製圖形。
需要說明的是，不要把這個圖形庫與用 Java 語言或其它語言開發的圖形應用程序相比較，要知道，受基本的 HTML 和瀏覽器約束，採用 Javascript 腳本語言創建 Div 元素是非常慢的，在這裏能達到圖形繪製的最優化都已經是最好的結果。在使用這個圖形庫時，所繪製的圖形像素最好不要超過 600 － 1000 像素。
是否應該選擇 SVG? 目前具有 SVG 能力的瀏覽器或使用 SVG 插件的瀏覽器仍然是少數，所以如果你要畫一些簡單的矢量圖形，使用這個矢量圖形庫還是一個不錯的選擇。
★ 瀏覽器的兼容性
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> 之間）： |
|
|
<script type="text/javascript" src="wz_jsgraphics.js"></script> |
|
|
| |
2 ．使用層（ div 或 layer ）作爲畫布（ canvases ）
如果是當頁面正被載入時，直接在 html 頁面中繪製，那麼這個步驟不是必須的。
如果在頁面加載完成後繪製，應該設置幾個具有絕對座標的層，作爲你的畫布，每一個層應該有一個唯一的 id:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div> |
| |
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(); 的構造參數，像下面這樣： |
|
<script type="text/javascript">
<!--
var jg = new jsGraphics("myCanvas");
//-->
</script> |
|
| |
如果有多個 div 元素，每一個 div 都需要有它自已的 jsGraphics 對象： |
|
<script type="text/javascript">
<!--
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
//-->
</script> |
|
|
| |
b ）在頁面載入的時候繪製
（在 Netscape 4 和 Opera 5/6 可以執行）
只需要將構造參數設爲空： |
|
|
<script type="text/javascript">
<!--
var jg_doc = new jsGraphics();
//-->
</script> |
|
你可以選擇 jg,jg2 或 jg_doc 其它的變量名，只要不違反 Javascript 的命名規則就可以。 |
| |
|
2. 圖形繪製函數
|
爲確保所有瀏覽器能正確執行， 這裏選擇頁面載入時進行繪製，即上文的 b 方式
一旦產生這些圖形對象（在這個示例中 jg, jg2 或 jg_doc ），就可以使用它來調用繪製圖形的方法。由圖形對象所繪製的圖形將會在相關的 div 元素上顯示（採用上文 a 方式構造圖形對象）： |
|
|
<script type="text/javascript">
<!--
function myDrawFunction()
{
jg_doc.setColor("#00ff00"); // 選擇綠色
jg_doc.fillEllipse(100, 200, 100, 180); // 座標點相對於文檔 (document)
jg_doc.setColor("maroon");
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
jg_doc.paint(); // 注意：直接在文檔上繪製，而不與某個 div 關聯 ,
jg.setColor("#ff0000"); // 選擇紅色
jg.drawLine(10, 113, 220, 55); // 座標點相對於 div 元素 "myCanvas"
jg.setColor("#0000ff"); // 選擇藍色
jg.fillRect(110, 120, 30, 60);
jg.paint();
jg2.setColor("#0000ff"); // 選擇藍色
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();
}
var jg_doc = new jsGraphics(); // 直接在文檔上繪製
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
myDrawFunction();
//-->
</script> |
|
|
| |
開始畫時應首先選擇畫筆顏色，否則，畫筆的顏色取默認值－黑色。座標值作爲繪製圖形方法的參數，如果採用上文的 a 方式構造圖形對象，那麼座標值是相對於 div 元素的左上角的。每一個畫布（圖形對象），它的 paint 方法必須被顯示的調用以產生 html 格式的圖形，否則，在你的屏幕上什麼都不會發生。 |
|
| 函數名（方法） |
示例代碼（用 jg 圖形對象） | |
setColor( "#HexColor" );
指定畫筆顏色，一旦設置後，這個顏色會一直保留，直到下一次再重新指定畫筆顏色，這個顏色值可以類似於 html 中的 #rrggbb 顏色表示，用名稱表示顏色也可以，例如：“ maroon ” |
jg.setColor("#ff0000");
or with identical result
jg.setColor("red"); | |
setStroke( Number );
指定畫筆採用的線厚度，這個厚度一旦被設置，會一直保留，直到下一次重新指定一，默認厚度是 1px.
要設置點劃線型，需要傳 Stroke.DOTTED 參數，點劃線型同樣適用於矩形，多邊型，折線和橢圓。
|
jg.setStroke(3);
or
jg.setStroke(Stroke.DOTTED); | |
drawLine( X1, Y1, X2, Y2 );
畫線。從第一個座標點到第二個座標點，線的厚度由 setStroke 設置。 |
jg.drawLine(20,50,453,40); | |
drawPolyline( Xpoints, Ypoints );
一條折線是一系列線段的集合， Xpoints 和 Ypoints 是每個點的 x 座標和 y 座標的數組集合，必須像下面這樣聲明：
var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5); |
var Xpoints = new Array(10,85,93,60);
var YPoints = new Array(50,10,105,87);
jg.drawPolyline(Xpoints,Ypoints); | |
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 );
多邊形。 Xpoints 和 Ypoints 是每個點的 x 座標和 y 座標的數組集合，必須像下面這樣聲明：
var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);
如果始點和終點末被指定，多邊線將會自動閉合。 |
var Xpoints = new Array(10,85,93,60);
var Ypoints = new Array(50,10,105,87);
jg.drawPolygon(Xpoints, Ypoints);
Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names. | |
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);
or
jg.drawOval(20,50,70,140); | |
fillEllipse( X, Y, width, height );
填充橢圓。參數見 drawEllipse() |
jg.fillEllipse(20,50,71,141);
or
jg.fillOval(20,50,71,141); | |
drawString( "Text", X, Y );
寫文本至由 x 和 y 座標指定的位置。不同於 Java ，座標值是第一行文本的左上角座標值。如果文本中包含有 HTML 標記將被轉義，舉個例子：
"Some Text<br>more Text" 會被轉義爲兩行
setFont( "font-family", "size+unit", Style );
在 drawString() 之前調用。指定字體，大小，樣式，字體和大小可以是與 HTML 中指示的一樣，至於樣式，可以使用的有：
Font.PLAIN 默認樣式，非粗體和斜體
Font.BOLD 粗體
Font.ITALIC 斜體
它們可以結合使用 |
jg.setFont("arial","15px",Font.BOLD);
jg.drawString("Some Text",20,50); | |
drawImage( "src", X, Y, width, height );
在指定的位置畫圖像， ”src” 參數指定圖像所在路徑， width 和 height 參數允許調整圖像寬高。 |
jg.drawImage("friendlyDog.jpg", 20,50,100,150); | |
paint();
必須顯示調用，才能真正在 html 頁面上畫圖形，不推薦每隔一段（每畫一個圖形）就調用一次。
像下面這樣的調用應該避免 :
jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...
像下面這樣的調用性能會很高 :
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*... 還有其它畫的方法 ... */
jg.paint(); // 最後調用 paint() |
jg.paint(); | |
clear();
與圖形對象關聯的 div 畫布中的圖形被清除（在 div 中不是由這個圖形對象創建的內容是不會被改變的） |
jg.clear();
| |
setPrintable( true );
默認情況下，打印這些圖形是不太可行的，因爲瀏覽器的默認打印設置中會關閉打印背景，調用 setPrintable() ，並設置參數爲 true ，將重置圖形爲可打印的（至少在 Mozilla/Netscape 6+ and IE 中） |
jg.setPrintable(false);
|
<script type=text/javascript>
</script>
|
