客戶端Web繪圖VML與SVG
上篇介紹的伺服器端繪圖，有一個很重要的缺點，就是如果圖形有變化，比如要將圓移動到另外一個位置，必須回傳到伺服器重新繪製。頁面回傳會造成螢幕閃爍，使用起來很不舒服。
那麼有沒有不需回傳的辦法呢？答案就是客戶端繪圖。ActiveX是一種解決方案，我曾經做過一套電力操作票系統，使用，可以實 現任意需要的互動效果，且無重新整理。但是，其安全性是個大問題，即使使用了數字簽名很多瀏覽器也不允許執行，要讓客戶降低瀏覽器安全級別允許ActiveX 執行太難了。
值得慶幸的是，目前瀏覽器開發廠商也在考慮Web繪圖的功能，目前使用類似html指令碼繪圖的有SVG和VML。SVG是一個國際標準，可惜的是如果讓IE支援，客戶端需要安裝一個元件。VML是微軟標準，但IE支援就足夠了，畢竟目前IE市場份額最大，壟斷啊。
言歸正傳，下面看一下VML繪圖。
1．VML繪圖入門
新建網站，在Default.aspx源模式下，修改成如下程式碼：
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head runat="server">
<title>無標題頁</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body>
<form id="form1" runat="server">
<div>
<v:Oval fillcolor='red' style='width:100;height:150'/>
<v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150">
</v:oval>
<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>
包含<b>內容</b>
</v:roundrect>
</div>
</form>
</body>
</html>
執行，會看到畫了一個紅色實心圓（oval是圓）、一個藍色空心圓和一個圓角矩形。注意程式碼中我將aspx最上面兩行程式碼刪除了，包括那個page，否則圖形顯示不出來。
從程式碼看，與html程式碼沒有什麼區別，我們只要瞭解用哪些標籤就可以了。下面我們先看一下移動效果。
2．圖形移動
下面我們讓藍色空心圓用滑鼠點選後，可以跟隨滑鼠移動。程式碼如下：
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head runat="server">
<title>無標題頁</title>
<STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
</head>
<body onmouseup="mouseUp(event);">
<script language="javascript">
var enableMove = false;
function mouseMove()
{
if(enableMove)
{
x.style.posLeft=event.x;
x.style.posTop=event.y;
}
}
function mouseDown(oEvent)
{
enableMove = true;
document.onmousemove=mouseMove;
}
function mouseUp(oEvent)
{
enableMove = false;
}
</script>
<form id="form1" runat="server">
<div>
<v:Oval fillcolor='red' style='width:100;height:150'/>
<v:oval strokecolor=blue style="position:absolute;z-index:2;left:300;top:100;width:100;height:150" id="x" onmousedown="mouseDown(event);">
</v:oval>
<v:RoundRect FILLCoLOr=green strokecolor=blue style=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>
包含<b>內容</b>
</v:roundrect>
</div>
</form>
</body>
</html>
注意陰影部分程式碼。藍色空心圓我們給了一個id為x，並將mousedown事件設定為函式mouseDown。該函式先將全域性變數enableMove置為true，在mouseMove中，如果該變數為true，則x的位置跟隨滑鼠移動。Body中增加onmouseup事件，即滑鼠鬆開滑鼠後將變數置回false。
可以執行看一下效果。
3．常用VML標籤
標籤 圖形
Line 直線
Oval 圓
Rect 矩形
RoundRect 圓角矩形
Arc 圓弧
Image 圖片
Polyline 多邊形
Fill 填充
Textbox 文字框
4．VML特有屬性
屬性名 預設值 值型別/範圍 用途
strokeweight 0.75pt=1px number 描述圖形的邊框粗度
strokecolor black color 描述圖形的邊框顏色
stroked true boolean 描述圖形是否使用邊框
fillcolor white color 描述圖形的背景顏色
filled true boolean 描述圖形是否使用背景
print true boolean 描述圖形是否允許被印表機列印
coordsize 1000,1000 Vector2D 暗示圖形與容器空間的大小比例
coordorigin 0,0 Vector2D coordinate at top-left corner of element
wrapcoords null string outline to use for tight text wrapping
VML支援id、name、class、title、style等html通用屬性。