IE里面的画笔---VML(Vector Markup Language)入门之一
生活随笔
收集整理的這篇文章主要介紹了
IE里面的画笔---VML(Vector Markup Language)入门之一
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
VML相當于IE里面的畫筆，能實現你所想要的圖形，而且結合腳本，可以讓圖形產生動態的效果。VML是微軟1999年9月附帶IE5.0發布的，在我認為， VML其實是Word和HTML結合的產物。可以將Word文檔另存為HTML，其中的文本和圖片可以很容易的轉換，但如果是手繪制的圖形在以往的IE里面就無法解釋了，如果都轉換成圖形文件又不太現實。于是微軟把Word里面的圖形控件結合到IE里面，使IE也具備了繪圖功能。
VML的全稱是Vector Markup Language(矢量可標記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量，這在制作地圖上有很大用途。為了顯示它的強大，和增加你學習VML的信心，先給你看看一個VML例子:
Hello world!
Hello VML!
在VML里面，標記使用的是XML擴張，需要一個namespace(命名空間)，你可以使用慣用的“v”作為命名空間，使用IE5.0到IE6.0通用的定義如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>
xmlns 全稱就是XML NameSpace 也就是命名空間。Behavior(行為)也是IE5.0新推出的東西，它的功能非常強大，結合樣式表，可以給任何HTML對象增加行為（新的屬性、方法、事件），而在這里，它的用處是把命名空間“v”和系統預定義的行為VML連接。這樣定義以后，你就可以使用下面的標記了，和普通的HTML標記有所區別，每個標記都增加了一個命名空間:
<v:shape></v:shape>
和其他HTML元素一樣，VML標記里面可以定義DHTML大部分屬性和事件，比如說id,name,title,onmouseover等等。在寫法上VML比較靈活，很多屬性既可以寫在標記里面，又可以獨立出一個新的標記來表示:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于下面的寫法:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
當然不是所有的屬性都可以寫成獨立的標記，常用的比如說上面的 Stroke(按我的理解可以翻譯成線性)，Path，Shadow，Fill(填充)等，VML這樣的方式可以理解為 shape 的屬性分類，使屬性更直觀。
Shape 對象派生出來的一些對象，更加直接的圖象，比如說 Rect(矩形)，RoundRect(圓邊的矩形)，Oval(圓)，Line(線)，PolyLine(不規則折線)，Image(圖形文件)等等，以后將對這些對象細細描述。
Shape是VML最基本的對象，利用它可以畫出所有你想要的圖形。在VML中，使用的坐標并不是Document的坐標，它有自己的坐標系，這樣一來，動態改變它的坐標，就可以實現放大、縮小、旋轉等功能了。shape的 CoordSize 屬性就是用來定義坐標的，它有兩個參數，<v:shape CoordSize="2800,2800" />， 這里的2800,2800 是橫縱坐標被分成了2800個點，并不是HTML里面默認像素。如果沒有設置圓點，VML默認是 0,0 （左上角），當然你也可以使用 CoordOrig 屬性設置VML的圓點坐標。
<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />
注意:定義的坐標只是相對的，真正顯示的圖形大小還需要 style="width:500;height:500" 來定義！
上面的定義后，你可用的坐標是 x(-1400到1400) y(-1400到1400) ，這樣的坐標就像數學里面的坐標了，把畫版分成了四個塊。
在解決實際問題的時候，我發現，IE會自動把可見的VML圖象放在相對的(0,0)位置，意思是說，上面兩張圖如果沒有增加兩個輔助的坐標，在IE上顯示出來是并列的兩個正方形。
shape中最主要的屬性是Path，它是個功能強大的畫筆，語法很簡單，由幾個字母組成，下面詳細講述：
m x,y:MoveTo把畫筆移動到 (x,y)；
l x,y:LineTo從當前點到(x,y)畫一條線；可以給連續的幾個點，VML會連續畫出來直到遇到 x 命令。
x:Close結束一條線；
e:End結束畫圖
shape的其他常用屬性:
FillColor:填充顏色，使用HTML中規定的顏色；例如:fillcolor=red
Filled:是否要填充圖形，如果圖形不是封閉的，也會自動封閉圖形進行填充。當Filled="true"(默認),fillcolor才有效果；
StrokeColor:線的顏色；
StrokeWeight:線的寬度；
Title:當鼠標移動到該圖形上的時候，顯示的文字，和HTML里面的alt、tilte一樣；
Type:指定該圖形屬于那個ShapeType，ShapeType可以為VML制定模版，將在以后加以描述；
前面的這些屬性，FillColor、Filled可以在<v:Fill />中使用，StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者 繼承Shape的對象中使用它。
在下面幾節，將詳細介紹 Shape 延伸出來的一些具體對象，諸如 Rect、RoundRect、Oval、Line等對象。
Line是做圖中最常用的，它有兩個特殊的屬性 from 和 to ,就是起始點和終止點坐標。
<v:line from="0,0" to="100,50" style="position:relative;"/>
●如果要改變線的樣式，LineStyle (Stroke)屬性可以做到:
Single(默認)，ThinThin，ThinThick，ThickBetweenThin
●如果要改變線的類型，可以用 DashStyle(Stroke)屬性:
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot"/>
</v:line>
Solid(默認):見上圖
ShortDash:
ShortDot:
ShortDashDot:
ShortDashDotDot:
Dot:
Dash:
LongDash:
DashDot:
LongDashDot:
LongDashDotDot:
●在畫坐標的時候，需要箭頭，VML已經定義好了箭頭，在Stroke體現:EndArrow 和 StartArrow 屬性，一個是線開始的時候有箭頭，另一個是線結束的時候有箭頭。箭頭的樣式也有不少：
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke EndArrow="Classic"/>
</v:line>
EndArrow="Block":
EndArrow="Classic":(這個看起來還比較舒服)
EndArrow="Diamond":
StartArrow="Oval":
StartArrow="Open":
PolyLine是 Line 的變形，是不規則的連續的線。它有個特殊的屬性 Points ,用來設置每個點的坐標。例如：
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
一樣可以設置它的線的樣式和類型以及箭頭 ( IE5.0中，PolyLine不支持 Arrow )
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>
用VML畫矩形，必須設置 style="width:50;height:50"，其他就沒有什么特別的。在這節，順便講講 shadow 對象和 TextBox對象：
<v:Rect style="position:relative;width:100;height:50px"/>
RoundRect顧名思義，是圓角的矩形，這種形狀在畫流程圖的時候很常用，如果加上陰影，就更好看了：
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
在VML里面，True 和 False 可以簡寫成 T 和 F。Shadow 中的 offset 屬性用來設置 偏移原圖的 x,y 值。 on 屬性用來決定是否顯示陰影。在矩形中寫字，要用到 TextBox 對象。TextBox 比較關鍵的屬性是 inset(left,top,right,bottom)，意思是隔圖形邊的上下左右多少范圍內定位文字：
<v:RoundRect style="position:relative;width:120;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect>
Hello world!
當然你也可以直接插入HTML代碼，比如說插入一個
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div>
效果是一樣的。
用VML畫圓(Oval)是非常簡單的，只要設置圓的高和寬就可以了。當然定位也是常用的：
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
還要注意的是，top和left是圓的左上角坐標，width 和 height 是圓的寬和高，不是圓的半徑。其圓心坐標是(left-width/2,top-height/2)。
說到圓，不得不想到弧(arc) VML已經定義了弧對象，它有除了圓的基本性質外，兩個特殊的屬性startangle 和 endangle ，就是起始角度和結束角度，單位是度，而不是弧度：
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
注意到沒有，0角度是從平常的90度開始的。
Image 對象從外部調用一個圖形文件，只要IE能夠顯示的格式都可以。需要注意的是，VML只用來顯示這張圖片，并沒有將這圖片矢量化，如果以后放大縮小，畫質會改變的。
<v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />
剛剛查詢 MSDN 關于VML資料的時候，左邊的相關菜單已經 Unavailable 了，這是否意味著 VML 將被 Microsoft 拋棄？因為有取VML和Flash之長處的 SVG 的崛起，VML 黯然失色，曾經問一個開花過VML軟件的老外，他都強烈建議我使用SVG。但我覺得 SVG固然強大，但它和Flash一樣，有自己的菜單，有自己固定的區域，和別的網頁元素結合的不太好（個人觀點），VML還是有其生存意義的。不過可以肯定，在IE以后的版本，對VML都是支持的。如果你要查詢一些VML的原始資料，可以訪問下面的地址：http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp?frame=true
VML的全稱是Vector Markup Language(矢量可標記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量，這在制作地圖上有很大用途。為了顯示它的強大，和增加你學習VML的信心，先給你看看一個VML例子:
Hello world!
Hello VML!
在VML里面，標記使用的是XML擴張，需要一個namespace(命名空間)，你可以使用慣用的“v”作為命名空間，使用IE5.0到IE6.0通用的定義如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>
xmlns 全稱就是XML NameSpace 也就是命名空間。Behavior(行為)也是IE5.0新推出的東西，它的功能非常強大，結合樣式表，可以給任何HTML對象增加行為（新的屬性、方法、事件），而在這里，它的用處是把命名空間“v”和系統預定義的行為VML連接。這樣定義以后，你就可以使用下面的標記了，和普通的HTML標記有所區別，每個標記都增加了一個命名空間:
<v:shape></v:shape>
和其他HTML元素一樣，VML標記里面可以定義DHTML大部分屬性和事件，比如說id,name,title,onmouseover等等。在寫法上VML比較靈活，很多屬性既可以寫在標記里面，又可以獨立出一個新的標記來表示:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于下面的寫法:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
當然不是所有的屬性都可以寫成獨立的標記，常用的比如說上面的 Stroke(按我的理解可以翻譯成線性)，Path，Shadow，Fill(填充)等，VML這樣的方式可以理解為 shape 的屬性分類，使屬性更直觀。
Shape 對象派生出來的一些對象，更加直接的圖象，比如說 Rect(矩形)，RoundRect(圓邊的矩形)，Oval(圓)，Line(線)，PolyLine(不規則折線)，Image(圖形文件)等等，以后將對這些對象細細描述。
Shape是VML最基本的對象，利用它可以畫出所有你想要的圖形。在VML中，使用的坐標并不是Document的坐標，它有自己的坐標系，這樣一來，動態改變它的坐標，就可以實現放大、縮小、旋轉等功能了。shape的 CoordSize 屬性就是用來定義坐標的，它有兩個參數，<v:shape CoordSize="2800,2800" />， 這里的2800,2800 是橫縱坐標被分成了2800個點，并不是HTML里面默認像素。如果沒有設置圓點，VML默認是 0,0 （左上角），當然你也可以使用 CoordOrig 屬性設置VML的圓點坐標。
<v:shape CoordOrig="-1400,-1400" CoordSize="2800,2800" style="width:500;height:500" />
注意:定義的坐標只是相對的，真正顯示的圖形大小還需要 style="width:500;height:500" 來定義！
上面的定義后，你可用的坐標是 x(-1400到1400) y(-1400到1400) ，這樣的坐標就像數學里面的坐標了，把畫版分成了四個塊。
在解決實際問題的時候，我發現，IE會自動把可見的VML圖象放在相對的(0,0)位置，意思是說，上面兩張圖如果沒有增加兩個輔助的坐標，在IE上顯示出來是并列的兩個正方形。
shape中最主要的屬性是Path，它是個功能強大的畫筆，語法很簡單，由幾個字母組成，下面詳細講述：
m x,y:MoveTo把畫筆移動到 (x,y)；
l x,y:LineTo從當前點到(x,y)畫一條線；可以給連續的幾個點，VML會連續畫出來直到遇到 x 命令。
x:Close結束一條線；
e:End結束畫圖
shape的其他常用屬性:
FillColor:填充顏色，使用HTML中規定的顏色；例如:fillcolor=red
Filled:是否要填充圖形，如果圖形不是封閉的，也會自動封閉圖形進行填充。當Filled="true"(默認),fillcolor才有效果；
StrokeColor:線的顏色；
StrokeWeight:線的寬度；
Title:當鼠標移動到該圖形上的時候，顯示的文字，和HTML里面的alt、tilte一樣；
Type:指定該圖形屬于那個ShapeType，ShapeType可以為VML制定模版，將在以后加以描述；
前面的這些屬性，FillColor、Filled可以在<v:Fill />中使用，StrokeColor、StrokeWeight可以在<v:Stroke />中使用。也可以在 Shape 或者 繼承Shape的對象中使用它。
在下面幾節，將詳細介紹 Shape 延伸出來的一些具體對象，諸如 Rect、RoundRect、Oval、Line等對象。
Line是做圖中最常用的，它有兩個特殊的屬性 from 和 to ,就是起始點和終止點坐標。
<v:line from="0,0" to="100,50" style="position:relative;"/>
●如果要改變線的樣式，LineStyle (Stroke)屬性可以做到:
Single(默認)，ThinThin，ThinThick，ThickBetweenThin
●如果要改變線的類型，可以用 DashStyle(Stroke)屬性:
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot"/>
</v:line>
Solid(默認):見上圖
ShortDash:
ShortDot:
ShortDashDot:
ShortDashDotDot:
Dot:
Dash:
LongDash:
DashDot:
LongDashDot:
LongDashDotDot:
●在畫坐標的時候，需要箭頭，VML已經定義好了箭頭，在Stroke體現:EndArrow 和 StartArrow 屬性，一個是線開始的時候有箭頭，另一個是線結束的時候有箭頭。箭頭的樣式也有不少：
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke EndArrow="Classic"/>
</v:line>
EndArrow="Block":
EndArrow="Classic":(這個看起來還比較舒服)
EndArrow="Diamond":
StartArrow="Oval":
StartArrow="Open":
PolyLine是 Line 的變形，是不規則的連續的線。它有個特殊的屬性 Points ,用來設置每個點的坐標。例如：
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
一樣可以設置它的線的樣式和類型以及箭頭 ( IE5.0中，PolyLine不支持 Arrow )
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
<v:stroke StartArrow="Oval" EndArrow="Classic" dashstyle="Dot" />
</v:PolyLine>
用VML畫矩形，必須設置 style="width:50;height:50"，其他就沒有什么特別的。在這節，順便講講 shadow 對象和 TextBox對象：
<v:Rect style="position:relative;width:100;height:50px"/>
RoundRect顧名思義，是圓角的矩形，這種形狀在畫流程圖的時候很常用，如果加上陰影，就更好看了：
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
在VML里面，True 和 False 可以簡寫成 T 和 F。Shadow 中的 offset 屬性用來設置 偏移原圖的 x,y 值。 on 屬性用來決定是否顯示陰影。在矩形中寫字，要用到 TextBox 對象。TextBox 比較關鍵的屬性是 inset(left,top,right,bottom)，意思是隔圖形邊的上下左右多少范圍內定位文字：
<v:RoundRect style="position:relative;width:120;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect>
Hello world!
當然你也可以直接插入HTML代碼，比如說插入一個
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello World!</Div>
效果是一樣的。
用VML畫圓(Oval)是非常簡單的，只要設置圓的高和寬就可以了。當然定位也是常用的：
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
還要注意的是，top和left是圓的左上角坐標，width 和 height 是圓的寬和高，不是圓的半徑。其圓心坐標是(left-width/2,top-height/2)。
說到圓，不得不想到弧(arc) VML已經定義了弧對象，它有除了圓的基本性質外，兩個特殊的屬性startangle 和 endangle ，就是起始角度和結束角度，單位是度，而不是弧度：
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
注意到沒有，0角度是從平常的90度開始的。
Image 對象從外部調用一個圖形文件，只要IE能夠顯示的格式都可以。需要注意的是，VML只用來顯示這張圖片，并沒有將這圖片矢量化，如果以后放大縮小，畫質會改變的。
<v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />
剛剛查詢 MSDN 關于VML資料的時候，左邊的相關菜單已經 Unavailable 了，這是否意味著 VML 將被 Microsoft 拋棄？因為有取VML和Flash之長處的 SVG 的崛起，VML 黯然失色，曾經問一個開花過VML軟件的老外，他都強烈建議我使用SVG。但我覺得 SVG固然強大，但它和Flash一樣，有自己的菜單，有自己固定的區域，和別的網頁元素結合的不太好（個人觀點），VML還是有其生存意義的。不過可以肯定，在IE以后的版本，對VML都是支持的。如果你要查詢一些VML的原始資料，可以訪問下面的地址：http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp?frame=true
總結
以上是生活随笔為你收集整理的IE里面的画笔---VML(Vector Markup Language)入门之一的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Angular：升级Angular 13
- 下一篇： vue.js毕业设计，基于vue.js前