VML画图

注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中心的矩形的左上角 1.line(直线) a.示例： 创建一条从(0,0)到(200,200)的红色的边框为2px的直线<style> v\:* { behavior: url(#default#VML);} </style> b.专用属性：from 起点坐标； to 终点坐标 2.Oval(圆) a.示例： 创建一个宽400高400边框为红色填充为绿色的圆<style> v\:* { behavior: url(#default#VML);} </style> <oval strokecolor="red" fillcolor="green" style="width:400;height:400"></oval>b.专用属性：无 c.其他说明：其高宽主要由style中的width和height决定 3.rect(矩形) a.示例： 创建一个宽100高100的矩形<style> v\:* { behavior: url(#default#VML);} </style> b.专用属性：无 c.其他说明：其高宽主要由style中的width和height决定 4.roundrect(圆角矩形) a.示例： 创建一个圆角矩形<style> v\:* { behavior: url(#default#VML);} </style> <roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"></roundrect> b.专用属性：arcsize 描述圆矩形四角的弧度值，0-0.5，默认值0.05 c.其他说明：其高宽主要由style中的width和height决定 5.arc(圆弧) a.示例： 创建一个圆弧<style> v\:* { behavior: url(#default#VML);} </style> <arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"></arc> b.专用属性：startangle 圆弧的起点缺口，取值范围-360-360，默认值-180； endangle 圆弧的终点缺口，取值范围-360-360，默认值null(0) c.其他说明：其高宽主要由style中的width和height决定 6.polyline(多边形) a.示例： 创建一个多边形<style> v\:* { behavior: url(#default#VML);} </style> b.专用属性：points 各折点坐标，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点 7.curve(曲线) 创建一条曲线<style> v\:* { behavior: url(#default#VML);} </style> <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"></curve> b.专用属性：from 起点 to 终点 control1 曲线的第一个曲度 control2 曲线的第二个曲度 c.其他说明：control1、control2可用都不用、用一个或用两个都用 8.shape(任意形状) a.示例： 创建任意曲线<style> v\:* { behavior: url(#default#VML);} </style> <shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"></shape><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"></shape><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"></shape><shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"></shape><shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"></shape> b.专用属性：path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束) coordsize 比例(实际宽:width*100/coordsize第一个值；实际高:height*100/coordsize第二个值) type 引用模板的名称 9.shapetype(模板) a.示例： 模板使用示例<style> v\:* { behavior: url(#default#VML);} </style> <shapetype id="m1" coordsize="1000 1000" fillcolor="yellow"><path v="m0,0 l30,-30,60,0,0,0 e"></path></shapetype><shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"></shape><shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"></shape><shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"></shape> b.其他说明：shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。 10.background(背景) a.示例： 背景示例<style> v\:* { behavior: url(#default#VML);} </style> <background fillcolor="white"><fill angle="50" type="gradient" color2="yellow"></fill></background> 11.group(容器) a.示例： 容器示例<style> v\:* { behavior: url(#default#VML);} </style> <group id="group1" style="position:absolute;left:0;top:0;z-index:1;width:100;height:100" coordsize="100,100"><oval style="left:100;top:100;width:50;height:50" fillcolor="white"></oval><rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"></rect><rect style="left:100;top:200;width:80;height:80" fillcolor="red"></rect><arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"></arc></group><group id="group2" style="position:absolute;left:100;top:100;z-index:1;width:100;height:100" coordsize="100,100"><oval style="left:100;top:100;width:50;height:50" fillcolor="white"></oval><rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"></rect><rect style="left:100;top:200;width:80;height:80" fillcolor="red"></rect><arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"></arc></group><group id="group3" style="position:absolute;left:100;top:100;z-index:1;width:200;height:200" coordsize="100,100"><oval style="left:100;top:100;width:50;height:50" fillcolor="white"></oval><rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"></rect><rect style="left:100;top:200;width:80;height:80" fillcolor="red"></rect><arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"></arc></group> b.其他说明：当使用group后，容器内图形的left、top、width、height等值都是相对group的值。 五、二级标记 二级标记可以看作是对有限的属性进行扩展，就像CSS和HTML的关系一样，利用它我们可以做出更漂亮的图画出来，如上边background(背景)中就使用了fill二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线： 二级标记示例<style> v\:* { behavior: url(#default#VML);} </style> <stroke dashstyle="shortdot" endarrow="classic"></stroke> 例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可。