vml
觀看者：有xml，javascript基礎的同學
目標：熟練掌握vml
實現方式：代碼及相關文字解釋。希望能一步步寫完代碼當你看完也就掌握了。
VML的全稱是Vector Markup Language(矢量可標記語言)是基于xml的矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量。微軟ie5-8的矢量圖標準。由于ie9已經支持SVG了，所以vml到2011年12月已經歸檔不再更新了，也就是說vml已經在慢慢退出市場，在此我講這個的原因是雖然退出市場了，但是ie5-8仍舊占據絕大部分的市場，我們不能小視。某種角度看vml的用戶更多。我們可以展望未來，但還是不能忘記現在的環境。
用法：
1,添加xml的命名空間 xmlns ，寫法如下：
[html]?view plaincopy <html?xmlns:v="urn:schemas-microsoft-com:vml">?? 2,添加行為和命名空間的關系，至于這句話的意思后面有詳細解釋
[html]?view plaincopy <style>v\:*{behavior:url(#defualt#vml);display:inline-block}</style>?? 有了上面的兩個步驟我們就可以開始用vml“畫畫了”。
先上一個例子再解釋你就明白個中奧妙了：
[html]?view plaincopy <html?xmlns:v="urn:schemas-microsoft-com:vml">?? <head>?? <title>vml</title>?? <style>v\:?*?{behavior:url(#default#vml);display:inline-block}</style>?? </head>?? <body>?? <v:oval?style="width:50px;height:50px"?fillcolor="red"></v:oval>?? </body>?? </html>??
一個簡單的圓就畫好了，這里面的v\:* 是一個css樣式，表示所有以"V:"開頭的標簽的dom元素都繼承了這個樣式，樣式內容就是將vml的默認行為給這些元素，既然是繼承樣式以前我們經常用class繼承，這里也是完全可以的，至于后面的display:inline-block,其實是對ie8樣式的兼容問題（經過我測試好像加不加這句ie8顯示無礙，既然官方給出這樣的寫法，自有道理，可能是不同版本當時的兼容問題，也可能后期ie8修復了，在此就不多糾結）。這樣一來凡是"v:"開頭的標簽都有了vml的默認行為，那么我們就可以用vml的方式添加屬性了，下面我會開始介紹vml的一些形狀以及屬性。
在此之前我想很多人可能覺得這樣通過標簽畫的矢量圖實在無趣，而且不實用，那么我們就來點實用和令人興奮的東西，我們讓javascript將普通的html文檔動態創建出符合vml運行的環境。還是看例子：
[html]?view plaincopy <html?xmlns="http://www.w3.org/1999/xhtml">?? <head>?? <title>vml</title>?? </head>?? <style?type="text/css">?? </style>?? <body>?? <script?language="JavaScript"?type="text/javascript">?? window.onload?=?function(){?? ?????var?cont?=?document.getElementById('dv');?? ?????var?oval?=?document.createElement('oval');//創建元素?? ??????? ?????oval.xmlns="urn:schemas-microsoft-com:vml";//相當于上面的賦值命名空間?? ?????oval.style.behavior='url(#default#VML);?display:inline-block';//相當于上面添加vml默認樣式?? ?? ?????oval.style.position?=?'absolute';?? ?????oval.style.width?=?'50px';?? ?????oval.style.height=?'50px';?? ??????oval.fillcolor=?'red';?? ?????cont.appendChild(oval);?? }?? </script>?? <div?id='dv'></div>?? </body>?? </html>?? 我們就這么很方便的動態創建了一個vml矢量圖，如果你有心而且追求擴展性的話，其實我們可以寫的更加美妙的js，比如通過：
[javascript]?view plaincopy document.namespaces.add("v",?"urn:schemas-microsoft-com:vml");?? 添加document的命名空間，我們還可以創建style標簽添加樣式，然后appendChild到head標簽中。這樣是不是更好呢？如果暫時覺得太復雜可以跳過這一部分。
這里應為是基礎教程所以就不過多的擴展，以后我還會深入講解的。
vml圖形及屬性
如有興趣深入研究的話可以去msdn上面看看。下面是網址。
http://msdn.microsoft.com/en-us/library/bb250524(v=vs.85).aspx
我就是檢主要的，常用的給大家：
CoordSize：
[html]?view plaincopy <html?xmlns:v="urn:schemas-microsoft-com:vml">?? <head>?? <title>vml</title>?? <style>v\:?*?{behavior:url(#default#vml);display:inline-block}</style>?? </head>?? <body>?? <v:oval?CoordSize='28000,28000'?style="position:relative;left:5;top:5;width:100;height:80"/>?? </body>?? </html>?? CoordSize:其實是網格大小，當CoordSize為 28000,28000 就是將橫縱坐標和縱坐標被分成了28000個點，這并不是HTML里面默認像素。具體的形狀大小定義還要靠style中的width和height。寬和高都是指的多少個網格的寬和高，放大和縮小調整CoordSize的值就可以搞定。默認元素都是從左上角0,0處開始排放。
屬性：
屬性其實就是形狀的表現樣式，從下面開始我就不累贅的寫html結構了，如果測試代碼可以將上面的body中的代碼替換成我所給的代碼就行了。
[html]?view plaincopy <v:line?style="position:relative"?from="0,0"?to="100,0"?>?? <v:stroke?dashstyle="Dot"?EndArrow="Classic"?/>?? </v:line>?? 這種寫法是將屬性添加到單獨的標簽中。
stroke：畫筆屬性包括：
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle線條風格，,joinstyle線條轉折樣式，filltype線條填充樣式。 dashstyle： linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin 詳細的可以自己試試，我給一個thickbetweenthin圖片，大家有個概念，是那一塊兒變了就行： joinstyle：round，bevel，miter，完全可以理解為筆觸樣式，也就是轉折地方的樣式，我也跟上面一樣不多截圖了： 以上就不詳細解釋，如果想深入了解就課看下面的鏈接吧，里面都有，用的時候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85) fill：?填充顏色；
type：gradient,frame可以填充圖片,pattern,gradientRadial。 [html]?view plaincopy <v:oval?style='width:120pt;height:90pt'?strokecolor="red"?? strokeweight="2.5pt">?? <v:fill?type="frame"?src="image1.jpg"?/>?? </v:oval>??
method:linear,sigma,any,none 漸變方式。
angle角度 漸變角度。 v:shadow：陰影； [html]?view plaincopy <v:RoundRect?style="position:relative;width:100;height:50px">?? ????<v:shadow?on="T"?type="single"?color="#b3b3b3"?offset="5px,5px"/>?? </v:RoundRect>??
屬性ok了下面繼續我們的shape的擴展形狀上面講了直線下面接著說形狀，形狀其實都是由shape衍生出來的對象，shape是最基礎也是最強大的繪圖方式。下面先說說衍生出來的形狀。
形狀
直線： [html]?view plaincopy <v:line?style="position:relative"?from="0,0"?to="100,0"?>?? <v:stroke?dashstyle="Dot"?EndArrow="Classic"?/>?? </v:line>??
折線： [html]?view plaincopy <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>??
折線就是給幾個點從第一個往后鏈接形成的。
圓形：
[html]?view plaincopy <v:oval?style="position:relative;left:5;top:5;width:100;height:80"/>??
通過left:5;top:5;width:100;height:80可控制長寬以及開始位置。
矩形：
分兩種一種是直角矩形：
[html]?view plaincopy <v:rect?style="position:relative;left:5;top:5;width:100;height:80"/>??
另一種是圓角矩形：
[html]?view plaincopy <v:RoundRect?style="position:relative;width:100;height:50px"></v:RoundRect>??
圖片：
[html]?view plaincopy <v:image?src="big.GIF"?style="position:relative;top:0;left:0;width:165;height:157"?/>??
img也有很多特殊的屬性，可以控制明暗，圖片位置，透明度等 grayscale是否為黑白色（true false），backlevel取值（-1，1),gain色相（數字）
圖片位置cropbottom, croptop, cropleft, and cropright （0~1） 最后的兩個是比較特殊的，不屬于形狀對象，可以理解成容器對象。
shapetype：
VML的這個功能很有用，模版，顧名思義，它可以減少書寫代碼的量，又使的代碼可讀性提高。在理解VML模版的時候，可以和 HTML 的 CSS 一樣理解，它是定義好的一種形狀，下次使用的時候直接聲明 type 屬性就可以了。看看下面的例子：
[html]?view plaincopy <v:shapetype?id="arrowUP"?coordsize="6?6">??? ????<v:path?v="m?3,0?l?0,6,6,6,3,0?x?e"?/>?? </v:shapetype>?? <v:shape?type="#arrowUP"?style="position:relative;width:50;height:50"/>??
用type指向上面shapetype的id就可以繼承下來定義的形狀。
group：
可以理解成一個畫布，我們可以修改畫布的CoordSize，或者Rotation 來改變畫布的屬性進而改變畫布里面的圖形的展現。
[html]?view plaincopy <v:shapetype?id="arrowUP"?coordsize="6?6">??? ????<v:path?v="m?3,0?l?0,6,6,6,3,0?x?e"?/>?? </v:shapetype>?? <v:shape?type="#arrowUP"?style="position:relative;width:50;height:50"/>?? <v:group?style="position:relative;WIDTH:200px;HEIGHT:200px;rotation:45"?coordsize?=?"2000,2000">?? <v:shape?type="#arrowUP"?style="position:relative;width:50;height:50"/>?? </v:group>??
我們用group很簡單的改變了圖像大小和角度。
到此我們基本介紹了所有vml的對象和屬性，后面我會將shape的path專門提出來介紹，應為實在太強大了，以至于我們了解了shape之后上面這些形狀我們完全都可以模擬出來。
用法：
1,添加xml的命名空間 xmlns ，寫法如下：
[html]?view plaincopy
[html]?view plaincopy
先上一個例子再解釋你就明白個中奧妙了：
[html]?view plaincopy
一個簡單的圓就畫好了，這里面的v\:* 是一個css樣式，表示所有以"V:"開頭的標簽的dom元素都繼承了這個樣式，樣式內容就是將vml的默認行為給這些元素，既然是繼承樣式以前我們經常用class繼承，這里也是完全可以的，至于后面的display:inline-block,其實是對ie8樣式的兼容問題（經過我測試好像加不加這句ie8顯示無礙，既然官方給出這樣的寫法，自有道理，可能是不同版本當時的兼容問題，也可能后期ie8修復了，在此就不多糾結）。這樣一來凡是"v:"開頭的標簽都有了vml的默認行為，那么我們就可以用vml的方式添加屬性了，下面我會開始介紹vml的一些形狀以及屬性。
在此之前我想很多人可能覺得這樣通過標簽畫的矢量圖實在無趣，而且不實用，那么我們就來點實用和令人興奮的東西，我們讓javascript將普通的html文檔動態創建出符合vml運行的環境。還是看例子：
[html]?view plaincopy
[javascript]?view plaincopy
這里應為是基礎教程所以就不過多的擴展，以后我還會深入講解的。
vml圖形及屬性
如有興趣深入研究的話可以去msdn上面看看。下面是網址。
http://msdn.microsoft.com/en-us/library/bb250524(v=vs.85).aspx
我就是檢主要的，常用的給大家：
CoordSize：
[html]?view plaincopy
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle線條風格，,joinstyle線條轉折樣式，filltype線條填充樣式。 dashstyle： linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin 詳細的可以自己試試，我給一個thickbetweenthin圖片，大家有個概念，是那一塊兒變了就行： joinstyle：round，bevel，miter，完全可以理解為筆觸樣式，也就是轉折地方的樣式，我也跟上面一樣不多截圖了： 以上就不詳細解釋，如果想深入了解就課看下面的鏈接吧，里面都有，用的時候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85) fill：?填充顏色；
type：gradient,frame可以填充圖片,pattern,gradientRadial。 [html]?view plaincopy
angle角度 漸變角度。 v:shadow：陰影； [html]?view plaincopy
直線： [html]?view plaincopy
折線： [html]?view plaincopy
折線就是給幾個點從第一個往后鏈接形成的。
圓形：
[html]?view plaincopy
通過left:5;top:5;width:100;height:80可控制長寬以及開始位置。
矩形：
分兩種一種是直角矩形：
[html]?view plaincopy
另一種是圓角矩形：
[html]?view plaincopy
圖片：
[html]?view plaincopy
img也有很多特殊的屬性，可以控制明暗，圖片位置，透明度等 grayscale是否為黑白色（true false），backlevel取值（-1，1),gain色相（數字）
圖片位置cropbottom, croptop, cropleft, and cropright （0~1） 最后的兩個是比較特殊的，不屬于形狀對象，可以理解成容器對象。
shapetype：
VML的這個功能很有用，模版，顧名思義，它可以減少書寫代碼的量，又使的代碼可讀性提高。在理解VML模版的時候，可以和 HTML 的 CSS 一樣理解，它是定義好的一種形狀，下次使用的時候直接聲明 type 屬性就可以了。看看下面的例子：
[html]?view plaincopy
用type指向上面shapetype的id就可以繼承下來定義的形狀。
group：
可以理解成一個畫布，我們可以修改畫布的CoordSize，或者Rotation 來改變畫布的屬性進而改變畫布里面的圖形的展現。
[html]?view plaincopy
我們用group很簡單的改變了圖像大小和角度。
到此我們基本介紹了所有vml的對象和屬性，后面我會將shape的path專門提出來介紹，應為實在太強大了，以至于我們了解了shape之后上面這些形狀我們完全都可以模擬出來。
總結
- 上一篇： ABAP 内表操作备忘 刘欣
- 下一篇： 微信小程序之“豆瓣电影”