【卜維丰】Javascript 繪圖

Javascript 繪圖

用 Javascript 繪製向量圖？真的假的？不信？先試試吧！

這裡就單單舉個畫直線的例子，原作為 Walter Zorn 展示及下載頁面，請點選這裡。

下載的文件中，只有一個檔案，名為 wz_jsgraphics.js，使用方法則為：

將 wz_jsgraphics.js 連結到文件中，例如：
<script language="JavaScript" src="wz_jsgraphics.js"></script>
在文件中加入一個自訂的圖層，例如：
<div id="myCanvas" style="position:absolute;height:0px;width:0px;"></div>
確定文件所有內容都載入了，加入以下程式碼

注意紅字的對應，必需大小寫吻合。

這套程式組中，包含了許多功能，包括畫直線、畫圓、矩形等等，一個簡單的例子是：

setColor() 是用來指定顏色，以十六進位值代入；setStroke() 則是指定線條粗細，傳入數字即可，剩下的重點則是各種繪圖方法，例如 drawLine() 是畫直線，drawRect() 是繪製矩形等等，詳情請查看展示頁。

原作者提醒各位，使用時，真正執行動作的是 paint() 方法，所有指定的繪圖方法都設計完成，再一次執行 paint() 方法，以下是正確範例：

jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*...其他的繪製方法... */
jg.paint();

而以下則是不良使用方法：

jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();

神奇吧！

最近忙的要死，連松崗的新書邀約也都不敢答應下來，怎麼有時間研究這種東西呢？簡單講是匠子：我設計了一個 AJAX 下拉式選單，只要把目錄的 XML 內容寫好，就能使用了，聽起來不錯厚？改日再把這程式公布給各位（正計劃作個下載區），然後問題來了！那麼使用者怎麼自己設計 XML 呢？難不成要使用者用記事本來編輯？這對很多人而言，是一件痛苦的事，所以呢，又寫了個 XML 生成的程式，本來想作成 site map 的製作方式，拉一拉，點一點，一目瞭然，就 site map 之間的線，是個問題，看一下半半半成品吧！（不要新增太多功能，會 Lag 很兇，因為不停在繪圖）

就這東西了！是拿先前Javascript 拖拉放的程式，加上這個繪圖功能組成的，結論是：放棄以 site map 方式設計 XML 產生器了！

卜維丰 10/31 07'

同意轉載，不過麻煩看一下轉載需知

handan 2008/7/3 下午 06:51:00

这种画图方法如果是动态的画图有问题

mousemove
drawline

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

Javascript 繪圖

以下為文章回應區