以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

Javascript 繪圖

用 Javascript 繪製向量圖?真的假的?不信?先試試吧!

x1 y1 x2 y2

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

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

  1. 將 wz_jsgraphics.js 連結到文件中,例如:
    <script language="JavaScript" src="wz_jsgraphics.js"></script>
  2. 在文件中加入一個自訂的圖層,例如:
    <div id="myCanvas" style="position:absolute;height:0px;width:0px;"></div>
  3. 確定文件所有內容都載入了,加入以下程式碼
<script type="text/javascript">
<!--
var cnv = document.getElementById("myCanvas");
var jg = new jsGraphics(cnv);
//-->
</script>

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

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

<script language="JavaScript" src="wz_jsgraphics.js"></script>

<div id="myCanvas" style="position:absolute;height:0px;width:0px;"></div>
<script type="text/javascript">
<!--
var cnv = document.getElementById("myCanvas");
var jg = new jsGraphics(cnv);
jg.setColor('#0000FF');
jg.setStroke(3);
jg.drawLine(50,-300,500,800);
jg.paint();
//-->
</script>

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'

以下為文章回應區

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

Alex   2011/6/9 上午 09:56:00

請問版主,
我執行到 var jg = new jsGraphics(cnv);
這段時,就會出現"必須要有物件",但我DIV有給ID呀.在中斷的地方,也有看到帶入的DIV的ID.
但為何還是出現這樣的錯誤?

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

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

mousemove
drawline

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