用VML画图(一些基本的矢量图)(转)
用VML畫圖(一些基本的矢量圖)
注：其中所有的left:top:都是針對圖左上角的，比如圓，他的左上角應該是以圓為中心的矩形的左上角
1.line(直線)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一條從(0,0)到(200,200)的紅色的邊框為2px的直線</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>
b.專用屬性：from??? 起點坐標；
??????????????????? to??? 終點坐標
2.Oval(圓)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個寬400高400邊框為紅色填充為綠色的圓</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>
</html>b.專用屬性：無
c.其他說明：其高寬主要由style中的width和height決定
3.rect(矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個寬100高100的矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>
b.專用屬性：無
c.其他說明：其高寬主要由style中的width和height決定
4.roundrect(圓角矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個圓角矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>
b.專用屬性：arcsize??? 描述圓矩形四角的弧度值，0-0.5，默認值0.05
c.其他說明：其高寬主要由style中的width和height決定
5.arc(圓弧)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個圓弧</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>
b.專用屬性：startangle??? 圓弧的起點缺口，取值范圍-360-360，默認值-180；
??????????????????? endangle??? 圓弧的終點缺口，取值范圍-360-360，默認值null(0)
c.其他說明：其高寬主要由style中的width和height決定
6.polyline(多邊形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一個多邊形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<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"/>
</body>
</html>
b.專用屬性：points??? 各折點坐標，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四個點
7.curve(曲線)
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建一條曲線</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<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"/>
</body>
</html>
b.專用屬性：from??? 起點
??????????????????? to?????? 終點
??????????????????? control1??? 曲線的第一個曲度
??????????????????? control2??? 曲線的第二個曲度
c.其他說明：control1、control2可用都不用、用一個或用兩個都用
8.shape(任意形狀)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創建任意曲線</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>
b.專用屬性：path??? 路徑(m??? 起點、 l???? 畫直線、 c??? 畫曲線、x??? 曲線自動閉合、 e??? 結束)
?????????????????? coordsize??? 比例(實際寬:width*100/coordsize第一個值；實際高:height*100/coordsize第二個值)
?????????????????? type??? 引用模板的名稱
9.shapetype(模板)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>
b.其他說明：shapetype是專門用來定義形狀摸版的（不可見），而后在由shape標記引用、將模版實例化的按照path子屬性值輸出多邊形（可見）。
10.background(背景)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>
11.group(容器)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<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:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
<v:group id="group2" style='position:absolute;left:100;top:100;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:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' 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:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>
b.其他說明：當使用group后，容器內圖形的left、top、width、height等值都是相對group的值。
五、二級標記
二級標記可以看作是對有限的屬性進行擴展，就像CSS和HTML的關系一樣，利用它我們可以做出更漂亮的圖畫出來，如上邊background(背景)中就使用了fill二級標記，下邊我們再來看下如何利用二級標記畫一條帶箭頭的直線：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二級標記示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>
<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>
例子中的stroke即為二級標記，它可以用來設置邊框樣式，除此之外還有shadow(陰影)、fill(填充)、extrusion(立體3D)、 textbox、imagedata(背景圖片)等二級標記。二級標記也有自己的屬性，我們只須通過設置這些屬性就能畫出各種漂亮的圖來。二級標記的使用也非常簡單，直接嵌套于圖形標簽中即可。
轉載于:https://www.cnblogs.com/jole/archive/2009/05/03/1448050.html
總結
以上是生活随笔為你收集整理的用VML画图(一些基本的矢量图)(转)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [导入]ASP.NET 配置节架构
- 下一篇： git-从入门到熟悉