VML概览
http://blog.csdn.net/hemingwang0902/article/details/4303423
?
VML的全稱是Vector Markup Language(矢量標記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量。
VML是微軟1999年9月附帶IE5.0發布的，故只有IE5.0以上版本對VML提供支持。
一、使用大致步驟
1、加入vml命名空間
<html xmlns:v="urn:schemas-microsoft-com:vml">
2、CSS中加入behavior（行為）
<style>
v\:*{behavior:url(#default#VML); position:absolute;}
</style>
3、使用VML標記
<v:標記…../>
二、特殊寫法
1、很多屬性既可以寫在標記里面，又可以獨立出一個新的標記來表示。（類似于XML）
如:<v:shape id=shape1 StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于:
<v:shape id=shape1>
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
2、多參數間的逗號（，）可要可不要。
如：coordsize="6,6"
等同于coordsize="6 6"
三、VML坐標系
在VML中，使用的坐標不是Document的坐標，它有自己的坐標系。如：
<v:shape CoordOrig="m1,m2" CoordSize="n1,n2" style="width:n3;height:n4" />
// CoordOrig屬性：設置原點坐標。如果沒有設置，默認是0,0（左上角）
//CoordSize屬性：用來定義坐標的，表示橫縱坐標被分成了n1、n2個點，而非像素。
定義的坐標只是相對的，真正顯示的圖形大小還需要 style="width:n3;height:n4" 來定義
四、通用屬性
1、VML特有的通用屬性（HTML、CSS不具有）
| 屬性名 | 默認值 | 值類型/范圍 | 用途 |
| strokeweight | 0.75pt=1px | number | 描述圖形的邊框粗度 |
| strokecolor | black | color | 描述圖形的邊框顏色 |
| stroked | true | boolean | 描述圖形是否使用邊框 |
| fillcolor | white | color | 描述圖形的背景顏色 |
| filled | true | boolean | 描述圖形是否使用背景 |
| | true | boolean | 描述圖形是否允許被打印機打印 |
| coordsize | 1000,1000 | Vector2D | 暗示圖形與容器空間的大小比例 |
| coordorigin | 0 0 | Vector2D | 元素的左上角坐標 |
| wrapcoords | null | string | outline to use for tight text wrapping |
2、VML標記支持的HTML通用屬性
| 屬性名 | 默認值 | 值類型/范圍 | 用途 |
| id | null | string | 定義元素的標識索引 |
| class | null | classname | 定義元素使用的CSS樣式類 |
| style | null | CSS string | 描述圖形的CSS樣式表 |
| title | null | string | 定義圖形的提示標題 |
| href | null | string | 定義圖形鏈接的URL地址 |
| target | _self | _self/_blank/_top | 定義圖形以何種形式打開鏈接 |
| contentEditable | false | boolean | 描述圖形內容是否允許用戶編輯 |
| dir | ltr | ltr/rtl | 描述圖形內容以哪種方向輸出 |
| disabled | false | boolean | 描述圖形能夠響應用戶事件觸發 |
3、VML標記支持的CSS通用屬性
| 屬性名 | 可用值/可用值范圍 | 用途 |
| width | 0-9999 | 描述寬度 |
| height | 0-9999 | 描述高度 |
| position | static/absolute/fixed/relative | 描述如何定位輸出 |
| left | 0-9999 | 描述距離頁面位置左 |
| top | 0-9999 | 描述距離頁面位置上 |
| z-index | 0-9999 | 描述3D位置 |
| cursor | auto/crosshair/hand/move/help/wait/ text/… | 描述鼠標形狀 |
| zoom | 0-99 | 描述縮放比例 |
| clip | rect(上 右 下 左) | 描述裁剪對象 |
| border | 0-99 style color | 描述邊框 |
| display | block/none/inline/list-item | 描述顯示或隱藏 |
| overflow | visible/auto/hidden/scroll | 描述滾動條 |
| color | colorstring | 描述文本內容顏色 |
| font-size | 0-999 | 描述文本內容字號 |
| filter | xray/flipv/fliph/invert/alpha(opacity=num) | 描述濾鏡效果 |
| rotation | (0-9999)%360 | 描述旋轉度 |
| flip | x y | 描述反轉或顛倒圖形 |
| …… | …… | …… |
五、基本標記
1、shape（任意形狀）
示例：創建任意曲線
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 x e"/>
2、line（直線）
示例：創建一條從(0,0)到(200,200)的紅色的邊框為2px的直線
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
3、polyline(多義線/多邊形)
示例：創建不規則的連續線
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
4、rect(矩形) 、roundrect(圓角矩形)
示例：創建一個寬100高100的矩形
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
//其它屬性：其高寬主要由style中的width和height決定（必須）
5、oval(圓)、arc(圓弧)
示例：創建一個寬400高400邊框為紅色填充為綠色的圓
<v:Oval strokecolor=”red” fillcolor=”green” style=”width:400;height:400;left:5;top:5”/>
6、curve(曲線)
示例：創建一條曲線
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
7、background(背景)：
示例：
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
8、image（圖像）：顯示從外部調用的圖形文件，并沒有將之矢量化。
<v:image src="big.GIF" style="position:relative;top:0;left:0;width:165;height:157" />
9、shapetype(模板)：為減少代碼的書寫量和可讀性。用shapetype定義好形狀，然后用shape的type屬性調用(<v:shape type=”id名”…/>)
示例：定義一個向上的三角形，然后調用之
//定義一個向上的三角形
<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;left:100;top:100"/>
<v:shape type="#arrowUP" style="position:relative;width:150;height:150; left:200;top:200"/>
10、group(集合容器)：讓一些列的對象成為一個組，擁有共同的坐標系。可以動態改變CoordSize的值放大或縮小整個Group里面的VML對象。
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
//當使用group后，容器內圖形的left、top、width、height等值都是相對group的值。
六、二級標記
二級標記可以看作是對有限的屬性進行擴展，利用它我們可以做出更漂亮的圖畫出來。
1、fill(填充)
2、stroke(邊框)
3、shadow(陰影)
示例：創建一個偏離5像素的陰影
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
4、extrusion(立體3D)
5、textbox（文本）
<v:RoundRect style="position:relative;width:120;height:50px">
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello world!</v:TextBox>
</v:RoundRect>
6、imagedata(背景圖片)
7、textpath（文本路徑）
七、應用
1、腳本動態生成VML 2、放大縮小VML
3、給VML增加事件 4、數據圖表——統計圖表
5、矢量地圖——GIS的應用 6、文本修改留痕——MIS的應用
總結
- 上一篇： Angular基本概念及用法总结
- 下一篇： 消息总线VS消息队列