用VML画图(一些基本的矢量图)(转)
用VML畫圖(一些基本的矢量圖)
注：其中所有的left:top:都是針對(duì)圖左上角的，比如圓，他的左上角應(yīng)該是以圓為中心的矩形的左上角
1.line(直線)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創(chuàng)建一條從(0,0)到(200,200)的紅色的邊框?yàn)?px的直線</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??? 起點(diǎn)坐標(biāo)；
??????????????????? to??? 終點(diǎn)坐標(biāo)
2.Oval(圓)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創(chuàng)建一個(gè)寬400高400邊框?yàn)榧t色填充為綠色的圓</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>創(chuàng)建一個(gè)寬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>創(chuàng)建一個(gè)圓角矩形</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，默認(rèn)值0.05
c.其他說明：其高寬主要由style中的width和height決定
5.arc(圓弧)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創(chuàng)建一個(gè)圓弧</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??? 圓弧的起點(diǎn)缺口，取值范圍-360-360，默認(rèn)值-180；
??????????????????? endangle??? 圓弧的終點(diǎn)缺口，取值范圍-360-360，默認(rèn)值null(0)
c.其他說明：其高寬主要由style中的width和height決定
6.polyline(多邊形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創(chuàng)建一個(gè)多邊形</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??? 各折點(diǎn)坐標(biāo)，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四個(gè)點(diǎn)
7.curve(曲線)
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創(chuàng)建一條曲線</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??? 起點(diǎn)
??????????????????? to?????? 終點(diǎn)
??????????????????? control1??? 曲線的第一個(gè)曲度
??????????????????? control2??? 曲線的第二個(gè)曲度
c.其他說明：control1、control2可用都不用、用一個(gè)或用兩個(gè)都用
8.shape(任意形狀)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>創(chuàng)建任意曲線</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??? 起點(diǎn)、 l???? 畫直線、 c??? 畫曲線、x??? 曲線自動(dòng)閉合、 e??? 結(jié)束)
?????????????????? coordsize??? 比例(實(shí)際寬:width*100/coordsize第一個(gè)值；實(shí)際高:height*100/coordsize第二個(gè)值)
?????????????????? 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標(biāo)記引用、將模版實(shí)例化的按照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.其他說明：當(dāng)使用group后，容器內(nèi)圖形的left、top、width、height等值都是相對(duì)group的值。
五、二級(jí)標(biāo)記
二級(jí)標(biāo)記可以看作是對(duì)有限的屬性進(jìn)行擴(kuò)展，就像CSS和HTML的關(guān)系一樣，利用它我們可以做出更漂亮的圖畫出來，如上邊background(背景)中就使用了fill二級(jí)標(biāo)記，下邊我們再來看下如何利用二級(jí)標(biāo)記畫一條帶箭頭的直線：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二級(jí)標(biāo)記示例</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即為二級(jí)標(biāo)記，它可以用來設(shè)置邊框樣式，除此之外還有shadow(陰影)、fill(填充)、extrusion(立體3D)、 textbox、imagedata(背景圖片)等二級(jí)標(biāo)記。二級(jí)標(biāo)記也有自己的屬性，我們只須通過設(shè)置這些屬性就能畫出各種漂亮的圖來。二級(jí)標(biāo)記的使用也非常簡單，直接嵌套于圖形標(biāo)簽中即可。
轉(zhuǎn)載于:https://www.cnblogs.com/jole/archive/2009/05/03/1448050.html
總結(jié)
以上是生活随笔為你收集整理的用VML画图(一些基本的矢量图)(转)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [导入]ASP.NET 配置节架构
- 下一篇： git-从入门到熟悉