一、什麼是vml
vml相當於瀏覽器的畫筆，它可以在瀏覽器中畫出任何你想要的圖形：小到直線、圓形、圓弧、曲線、矩形、圓角矩形、多邊形；大到一張圖畫、乙個動畫、甚至於乙個遊戲。題中既以標明為簡明教程，下邊我們只限於討論使用vml在瀏覽器中畫一些直線、圓形、圓弧等小圖。
vml是微軟2023年前(具體時間不詳)製作推出的，並整合到了ie5+瀏覽器，同樣也是microsoft office art(藝術圖型,如word的藝術文字)的核心結構。vml由微軟visio、autodesk、macromedia等企業推薦給w3c(www最高權利協會)，w3c採取、綜合了各方的推薦，於2023年初開始發展svg，並隨後不久推出。svg是綜合vml、gml等的改進(輸出效率、圖型質量、標記擴充套件)，被推薦為標準，但svg需要專門的影象閱讀器如(adobe svg viewer)，無法直接被瀏覽器引擎解析，以我見，svg更適合於精度向量圖型應用軟體開發、vml則適合應用在web頁，有不少文章說vml已過時，但仁者見仁、智者見智，vml我感覺相當健全(圖型質量、輸出速度)，它編寫簡單、瀏覽器可以解析、與html等語言完全相容，它更具有實際web頁應用的可行性、深層開發的可行性。但遺憾的是目前支援vml的瀏覽器僅有ie。
二、vml基礎知識
如果你熟悉html的話，那麼學vml並不是一件複雜的事，因為vml和html幾乎一樣，不僅表現在語法上，還有其對css、js的支援都和html如出一轍。
1.基本語法
•標籤以開頭結尾，也支援空標籤如
•標籤不區分大小寫
•標籤中間可巢狀其他標籤，可以是vml，也可以是html
•屬性的寫法為」parameter=value」，如，屬性值可加雙引號、單引號、也可不加
2.對css和js的支援
•對css支援：
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
第乙個vml範例title>
v/:*
o/:*
style>
head>
style="z-index:5;position:absolute;left:233;top:150"
from="0,0"
to="200,200"/>
body>
html>
•xmlns:v="urn:schemas-microsoft-com:vml"//關鍵語句，表示建立乙個叫v的xml命名空間，其中v可自行修改
•xmlns:o=」urn:schemas-microsoft-com:office:office」 //表示引用office相關的標記處理擴充套件，web中很少用，下邊不講
•v/:* //關鍵語句，指明xml名域v引用的資料是vml標記語言
.//建立一條直線，vml在瀏覽器中畫圖的語句都是寫在之間
三、通用屬性
下邊這些屬性大部分的vml標籤中都是可用的，為了便於記憶將其分成了三類，其中第二類和html相同、第三類和css相同。
1.line(直線)
a.示例：
建立一條從(0,0)到(200,200)的紅色的邊框為2px的直線
v/:*
b.專用屬性：from 起點座標；
to 終點座標
2.oval(圓)
a.示例：
建立乙個寬400高400邊框為紅色填充為綠色的圓
v/:*
b.專用屬性：無
c.其他說明：其高寬主要由style中的width和height決定
3.rect(矩形)
a.示例：
建立乙個寬100高100的矩形
v/:*
b.專用屬性：無
c.其他說明：其高寬主要由style中的width和height決定
4.roundrect(圓角矩形)
a.示例：
建立乙個圓角矩形
v/:*
b.專用屬性：arcsize 描述圓矩形四角的弧度值，0-0.5，預設值0.05
c.其他說明：其高寬主要由style中的width和height決定
5.arc(圓弧)
a.示例：
建立乙個圓弧
v/:*
b.專用屬性：startangle 圓弧的起點缺口，取值範圍-360-360，預設值-180；
endangle 圓弧的終點缺口，取值範圍-360-360，預設值null(0)
c.其他說明：其高寬主要由style中的width和height決定
6.polyline(多邊形)
a.示例：
建立乙個多邊形
v/:*
b.專用屬性：points 各折點座標，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四個點
7.curve(曲線)
建立一條曲線
v/:*
b.專用屬性：from 起點
to 終點
control1 曲線的第乙個曲度
control2 曲線的第二個曲度
c.其他說明：control1、control2可用都不用、用乙個或用兩個都用
8.shape(任意形狀)
a.示例：
建立任意曲線
v/:*
b.專用屬性：path 路徑(m 起點、 l 畫直線、 c 畫曲線、x 曲線自動閉合、 e 結束)
coordsize 比例(實際寬:width*100/coordsize第乙個值；實際高:height*100/coordsize第二個值)
type 引用模板的名稱
9.shapetype(模板)
a.示例：
模板使用示例
v/:*
b.其他說明：shapetype是專門用來定義形狀摸版的（不可見），而後在由shape標記引用、將模版例項化的按照path子屬性值輸出多邊形（可見）。
10.background(背景)
a.示例：
背景示例
v/:*
11.group(容器)
a.示例：
容器示例
v/:*
b.其他說明：當使用group後，容器內圖形的left、top、width、height等值都是相對group的值。
五、二級標記
二級標記可以看作是對有限的屬性進行擴充套件，就像css和html的關係一樣，利用它我們可以做出更漂亮的圖畫出來，如上邊background(背景)中就使用了fill二級標記，下邊我們再來看下如何利用二級標記畫一條帶箭頭的直線：
二級標記示例
v/:*
例子中的stroke即為二級標記，它可以用來設定邊框樣式，除此之外還有shadow(陰影)、fill(填充)、extrusion(立體3d)、textbox、imagedata(背景)等二級標記。二級標記也有自己的屬性，我們只須通過設定這些屬性就能畫出各種漂亮的圖來。二級標記的使用也非常簡單，直接巢狀於圖形標籤中即可
js vml 畫圖 2008-10-28 21:00
wawamind beta v1.0
v/:*
body
.wen //滑鼠按下 function msdown() { if(event.button==1){ var isclickscroll= (event.y
Flex中畫箭頭
第一種參考 畫箭頭 paramstart開始節點 paramend結束節點 paramcolor線條顏色 paramalpha透明度 paramradius箭頭的大小 publicfunctiondrawarrow start point,end point,color uint 0x000000 ...
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
iOS（CoreGraphics）畫帶箭頭的框
自己畫帶箭頭的框，需要匯入coregraphics.framwork庫 新建乙個整合uiview 的類，對uiview中的drawrect cgrect rect方法重寫如下。繪圖操作 繪製帶箭頭的矩形 void drawarrowrectangle cgrect frame 重寫繪圖，呼叫剛才繪圖...