VML极道教程(十二) VML编程大结局

本系列文章导航

VML极道教程(一) VML介绍

VML极道教程(二) VML入门

VML极道教程(三) 标记实战与line线

VML极道教程(四) oval圆rect矩型

VML极道教程(五) RoundRect圆矩型

VML极道教程(六) image图片

VML极道教程(七) polyline多边型

VML极道教程(八) shape多边型.shapetype模版.shape与curve曲线

VML极道教程(九) background背景

VML极道教程(十) group集合容器.vmlframe图形引用

VML极道教程(十一) 2级标记stroke边框,shadow阴影

VML极道教程(十二) VML编程大结局

VML编程之大结局

1:shadow阴影 - 专用属性参考表

属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type single single,double,emboss,perspective 描述使用哪种阴影效果
color black color 描述主要阴影颜色
obscured false boolean 暗示看穿图像如果没有在形状上填充
opacity 1.0 0.0-1.0 描述阴影透明度
offset 2pt,2pt Vector2D 描述阴影的XY偏移度
color2 gray color 当type!=single时,描述二次投影颜色
offset2 0pt,0pt Vector2D 当type!=single时,描述二次投影XY偏移度
origin 0,0 Vector2D 当filltype!=solid时,描述阴影与投影的交接度
matrix null string 当filltype!=solid时,描述变换点阵的强度


2:shadow阴影 - 应用精彩实例
即使是极道教程,也没有什么好说的,一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手,是最佳的学习方法。另外该标记相当重要,务要靠自己的努力学会!

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3131;LEFT:234px;WIDTH:67px;POSITION:absolute;TOP:142px;HEIGHT:53px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="1.5pt,1.5pt"/>
</v:oval>
<v:rect style="Z-INDEX:3135;LEFT:320px;WIDTH:50px;POSITION:absolute;TOP:145px;HEIGHT:52px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="black" opacity="52428f" offset="3.75pt,1.5pt"/>
</v:rect>
<v:roundrect style="Z-INDEX:3137;LEFT:402px;WIDTH:60px;POSITION:absolute;TOP:139px;HEIGHT:59px" arcsize="9830f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="red" opacity="52428f" offset="-3.75pt,1.5pt"/>
</v:roundrect>
<v:line style="Z-INDEX:3139;LEFT:303px;POSITION:absolute;TOP:228px" from="0,0" to="100.5pt,-.75pt" strokecolor="black" strokeweight="5pt"> <v:shadow on="t" color="red" opacity="52428f" offset="3.75pt,2.25pt"/>
</v:line>
<v:curve style="Z-INDEX:3148;LEFT:452px;POSITION:absolute;TOP:235px" from="0,0" control1="42pt,-51.75pt" control2="-4.5pt,49.5pt" to="28.5pt,-4.5pt" filled="f" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" color="green" opacity="52428f" offset="1.5pt,.75pt"/>
</v:curve>
<v:Image style="Z-INDEX:3161;LEFT:509px;WIDTH:67px;POSITION:absolute;TOP:202px;HEIGHT:68px" src="shili/fyw1.jpg" bilevel="f">
<v:shadow on="t" color="yellow" opacity="52428f" offset="15pt,-15pt"/>
</v:Image>




<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3170;LEFT:303px;WIDTH:121px;POSITION:absolute;TOP:139px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity="52428f" offset="7.25pt,7.25pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:532px;WIDTH:121px;POSITION:absolute;TOP:226px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt">
<v:shadow on="t" type="double" color="blue" opacity="52428f" color2="green" offset="2.25pt,2.25pt" offset2="4pt,4pt"/>
</v:oval>
<v:oval style="Z-INDEX:3170;LEFT:526px;WIDTH:121px;POSITION:absolute;TOP:106px;HEIGHT:101px" filled="t" fillcolor="red" strokecolor="red" strokeweight=".75pt"> <v:shadow on="t" type="double" color="blue" opacity=".5" color2="green" offset="22.25pt,32.25pt" offset2="-22pt,32pt"/>
</v:oval>





1:fill填充 - 专用属性参考表

属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type solid solid,gradient,gradientradial,tile,pattern,frame 描述使用哪种填充模式
color white color 描述基本填充颜色
opacity 1.0 0.0-1.0 描述填充透明度
以下属性只有当type=gradient,gradientradial渐变填充时有效
color2 white color 描述基本二级过度颜色
colors null number% color* 沿着一个渐行度填充颜色,并以百分比分配空间。例如1:colors="30% red,50% blue"。例如2:colors="30% red,50% blue,90% purple"
angle 0 -360-360 描述渐行效果以圆周顺时旋转、倾斜
focus 0% -100%-100% 描述渐层的位置
focussize 0,0 Vector2D 描述渐层在所有者的位置分布
focusposition 0,0 Vector2D 描述渐层在所有者的倾斜度分布
method sigma none,linear,sigma,any 描述均匀分布的对比
以下属性只有当type=tile,pattern,frame背景图像填充时有效
src null URL 描述填充使用的图像地址
size auto Vector2D 描述图像放大倍数
origin auto Vector2D 描述图像的分布位置,适用于tile、pattern
position auto Vector2D 描述图像放置的起源位置,适用于tile、pattern
aspect ignore ignore,atleast,atmost 描述图像居中还是充满整个图型
alignshape true boolean 描述是否对比容器对齐图片


2:fill填充 - 应用精彩实例
即使是极道教程,也没有什么好说的,一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手,是最佳的学习方法。另外该标记相当重要,务要靠自己的努力学会!

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3001;LEFT:271;WIDTH:88;POSITION:absolute;TOP:128;HEIGHT:74" filled="t" fillcolor="yellow">
<v:fill type="frame" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:2999;LEFT:313;WIDTH:95;POSITION:absolute;TOP:152;HEIGHT:76" fillcolor="red"/>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3009;LEFT:193;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:395;WIDTH:92;POSITION:absolute;TOP:120;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:294;WIDTH:92;POSITION:absolute;TOP:118;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:497;WIDTH:92;POSITION:absolute;TOP:122;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" focus="20%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:602;WIDTH:92;POSITION:absolute;TOP:121;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradient" opacity=".5" color2="yellow" angle="50" focus="50%" method="none"/>
</v:oval>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3009;LEFT:193;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:301;WIDTH:92;POSITION:absolute;TOP:117;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow" focus="20%" method="none"/>
</v:oval>
<v:oval style="Z-INDEX:3009;LEFT:404;WIDTH:92;POSITION:absolute;TOP:122;HEIGHT:87" filled="t" fillcolor="blue"> <v:fill type="gradientRadial" opacity=".5" color2="yellow" focus="50%" method="none"/>
</v:oval>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:rect style="Z-INDEX:3078;LEFT:215;WIDTH:81;POSITION:absolute;TOP:134;HEIGHT:75" filled="t" fillcolor="blue">
<v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:rect>
<v:roundrect style="Z-INDEX:3084;LEFT:276;WIDTH:83;POSITION:absolute;TOP:129;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="blue">
<v:fill type="gradient" opacity=".5" color2="yellow"/>
</v:roundrect>
<v:roundrect style="Z-INDEX:3084;LEFT:233;WIDTH:83;POSITION:absolute;TOP:236;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="yellow"> <v:fill type="gradient" opacity=".5" color2="blue" colors="30% red,50% green"/>
</v:roundrect>
<v:roundrect style="Z-INDEX:3084;LEFT:334;WIDTH:83;POSITION:absolute;TOP:238;HEIGHT:85" arcsize="9830f" filled="t" fillcolor="yellow"> <v:fill type="gradientRadial" opacity=".5" color2="blue" colors="30% red,50% green"/>
</v:roundrect>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3115;LEFT:312;WIDTH:110;POSITION:absolute;TOP:130;HEIGHT:102" filled="t" fillcolor="yellow">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3115;LEFT:192;WIDTH:110;POSITION:absolute;TOP:130;HEIGHT:102" filled="t" fillcolor="white"> <v:fill src="shili/fyw2.jpg" type="frame" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3115;LEFT:430;WIDTH:110;POSITION:absolute;TOP:134;HEIGHT:102" filled="t" fillcolor="red">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5" aspect="atMost"/>
</v:oval>
<v:shape style="Z-INDEX:3127;LEFT:189;WIDTH:100;POSITION:absolute;TOP:316;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="yellow" path=" m0,0 l0,0,55,-48,58,87,142,21,0,0 e">
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".5"/>
</v:shape>
<v:shape style="Z-INDEX:3127;LEFT:326;WIDTH:100;POSITION:absolute;TOP:307;HEIGHT:100" coordsize="100,100" filled="t" fillcolor="white" path=" m0,0 l0,0,55,-48,58,87,142,21,0,0 e"> <v:fill src="shili/fyw2.jpg" type="frame" opacity=".5" size="0.5,0.4"/>
</v:shape>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:3150;LEFT:108;WIDTH:158;POSITION:absolute;TOP:3;HEIGHT:140" filled="t" fillcolor="yellow">
<v:fill src="shili/haha.gif" type="tile" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:267;WIDTH:224;POSITION:absolute;TOP:30;HEIGHT:193" filled="t" fillcolor="yellow">
<v:fill src="shili/haha.gif" type="tile" opacity=".5"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:491;WIDTH:262;POSITION:absolute;TOP:46;HEIGHT:209" filled="t" fillcolor="yellow"> <v:fill src="shili/haha.gif" type="tile" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:101;WIDTH:255;POSITION:absolute;TOP:149;HEIGHT:207" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:336;WIDTH:262;POSITION:absolute;TOP:233;HEIGHT:209" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1" color2="blue"/>
</v:oval>
<v:oval style="Z-INDEX:3150;LEFT:598;WIDTH:262;POSITION:absolute;TOP:242;HEIGHT:209" filled="t" fillcolor="red">
<v:fill src="shili/haha.gif" type="pattern" opacity="1" color2="blue" position="50,50"/>
</v:oval>





1:extrusion立体3D - 专用属性参考表

属性名 默认值 值类型/范围 用途
on false boolean 设置处理是否起效
type parallel parallel,Perspective 描述使用哪种立体模式
color white color 描述基本立体颜色
backdepth 35pt number 描述后向立体厚度值
foredepth 0pt number 描述前向立体厚度值
metal false boolean 描述是否给图形追加立体边框
diffusity 1.0 0.0-3.0 描述立体基本亮度
brightness 0.3 0.0-1.0 描述立体过度渐层的亮度
rotationangle 0,0 Vector2D%360 描述立体的上下、左右360全景旋转度
skewangle 0 -360-360 当type=parallel时,设置立体的倾斜度


2:extrusion立体3D - 应用精彩实例

即使是极道教程,也没有什么好说的,一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手,是最佳的学习方法。另外该标记相当重要,务要靠自己的努力学会!

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:line id=vml0 style="z-index:1;LEFT:239;POSITION:absolute;TOP:110" from="0,0" to="37.5pt,56.25pt">
<v:extrusion on="t" backdepth="5pt" color="white" diffusity="1"/>
</v:line>
<v:oval id=vml1 style="z-index:1;LEFT:307;WIDTH:43;POSITION:absolute;TOP:120;HEIGHT:39">
<v:extrusion on="t" backdepth="5pt" color="white" diffusity="1"/>
</v:oval>
<v:rect id=vml2 style="z-index:1;LEFT:368;WIDTH:43;POSITION:absolute;TOP:120;HEIGHT:38">
<v:extrusion on="t" backdepth="20pt" color="white" diffusity="1.2"/>
</v:rect>
<v:roundrect id=vml3 style="z-index:1;LEFT:434;WIDTH:53;POSITION:absolute;TOP:122;HEIGHT:42" arcsize="9830f" fillcolor="yellow"> <v:extrusion on="t" foredepth="20pt" backdepth="0" color="white" diffusity="1.2"/>
</v:roundrect>
<v:curve id=vml4 style="z-index:1;LEFT:368;POSITION:absolute;TOP:320" from="0,0" control1="104pt,-97pt" control2="248pt,-37pt" to="135pt,-16.5pt" filled="f" strokecolor="green" strokeweight="13.75pt"> <v:extrusion on="t" backdepth="20pt" color="#20c11b" diffusity="1.2"/>
</v:curve>
<v:arc id=vml5 style="z-index:1;LEFT:511;WIDTH:52;POSITION:absolute;TOP:118;HEIGHT:59" startangle="360" endangle="114">
<v:extrusion on="t" backdepth="10pt" color="#5e15ff" diffusity="1.2"/>
</v:arc>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:rect style="z-index:1;LEFT:335;WIDTH:297;POSITION:absolute;TOP:122;HEIGHT:364">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
</v:rect>
<v:rect style="z-index:1;LEFT:339;WIDTH:31;POSITION:absolute;TOP:291;HEIGHT:34">
<v:extrusion on="t" backdepth="10pt" color="#b12e26" diffusity="1.2" rotationangle="86,-11"/>
</v:rect>
<v:rect style="z-index:1;LEFT:403;WIDTH:31;POSITION:absolute;TOP:217;HEIGHT:34">
<v:extrusion on="t" backdepth="10pt" color="#b12e26" diffusity="1.2" rotationangle="86,-11"/>
</v:rect>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="z-index:1;LEFT:165;WIDTH:57;POSITION:absolute;TOP:124;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2"/>
</v:oval>
<v:oval style="z-index:1;LEFT:236;WIDTH:57;POSITION:absolute;TOP:126;HEIGHT:52" strokecolor="red" strokeweight=".75pt"> <v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t"/>
</v:oval>
<v:oval style="z-index:1;LEFT:308;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="11,23"/>
</v:oval>
<v:oval style="z-index:1;LEFT:374;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="8,59"/>
</v:oval>
<v:oval style="z-index:1;LEFT:427;WIDTH:57;POSITION:absolute;TOP:124;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="6,109"/>
</v:oval>
<v:oval style="z-index:1;LEFT:508;WIDTH:57;POSITION:absolute;TOP:125;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="-50,-7"/>
</v:oval>
<v:oval style="z-index:1;LEFT:580;WIDTH:57;POSITION:absolute;TOP:128;HEIGHT:52">
<v:extrusion on="t" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="-35,-52"/>
</v:oval>
<v:oval style="z-index:1;LEFT:165;WIDTH:57;POSITION:absolute;TOP:204;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2"/>
</v:oval>
<v:oval style="z-index:1;LEFT:233;WIDTH:57;POSITION:absolute;TOP:203;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t"/>
</v:oval>
<v:oval style="z-index:1;LEFT:314;WIDTH:57;POSITION:absolute;TOP:206;HEIGHT:52">
<v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="59,1"/>
</v:oval>
<v:oval style="z-index:1;LEFT:390;WIDTH:57;POSITION:absolute;TOP:202;HEIGHT:52"> <v:extrusion on="t" type="perspective" backdepth="15pt" color="#20c11b" diffusity="1.2" metal="t" rotationangle="137,51"/>
</v:oval>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:rect style="z-index:1;LEFT:149;WIDTH:297;POSITION:absolute;TOP:17;HEIGHT:364" filled="t" fillcolor="blue">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:2;LEFT:247;WIDTH:297;POSITION:absolute;TOP:66;HEIGHT:364" filled="t" fillcolor="yellow"> <v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill src="shili/haha.gif" type="frame" opacity=".7"/>
</v:rect>
<v:rect style="z-index:3;LEFT:327;WIDTH:297;POSITION:absolute;TOP:116;HEIGHT:364" filled="t">
<v:extrusion on="t" backdepth="15pt" color="#b12e26" diffusity="1.2" rotationangle="87,-13"/>
<v:fill type="gradientRadial" opacity=".5" color2="yellow"/>
</v:rect>
<v:rect style="z-index:4;LEFT:416;WIDTH:297;POSITION:absolute;TOP:163;HEIGHT:364" filled="t"> <v:extrusion on="t" backdepth="15pt" color="navy" diffusity="1.2" rotationangle="87,-13"/>
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".7"/>
</v:rect>


<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="z-index:1;LEFT:265;WIDTH:145;POSITION:absolute;TOP:116;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
</v:oval>
<v:oval style="z-index:1;LEFT:436;WIDTH:145;POSITION:absolute;TOP:124;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="11,-92"/>
</v:oval>
<v:oval style="z-index:1;LEFT:557;WIDTH:145;POSITION:absolute;TOP:121;HEIGHT:162" filled="f">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="76,17"/>
</v:oval>
<v:shape style="z-index:1;LEFT:265;WIDTH:100;POSITION:absolute;TOP:379;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="black" strokeweight="15pt" path=" m0,0 l0,0,72,-73,140,1 xe"> <v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
</v:shape>
<v:shape style="z-index:1;LEFT:421;WIDTH:100;POSITION:absolute;TOP:376;HEIGHT:100" coordsize="100,100" filled="f" strokecolor="black" strokeweight="15pt" path=" m0,0 l0,0,72,-73,140,1 xe">
<v:fill opacity=".7"/>
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1" rotationangle="-11,-83"/>
</v:shape>





1:textbox内容 - 专用属性参考表

属性名 默认值 值类型/范围 用途
inset 7pt,3pt,7pt,3pt 0-999pt*(1-4) 描述距离容器内边界左/上/右/下长度
print false boolean 暗示是否被打印机打印


2:textbox内容 - 介绍
该标记不同于其他二级标记,特点是它即可以当做二级标记应用于VML一级标记中、也可以当作一级标记直接在网页输出超文本内容(但这个一级标记不像oval、rect、line那样支持二级标记stroke、fill、extrusion的修饰)。它基本跟HTML的span标记类似,本身没有什么独特的专用属性(就inset、print[该通用属性其他一级标记都默认为true,而它默认为false])、也不支持VML其他二级标记的修改,而是充分利用CSS对的font/text用于文本的样式表修饰超文本内容的样式(如控制文字大小、颜色、字体、缩进、字间隔度、行间隔度、周遍的留白、排版换行等)

3:textbox内容 - 当作一级标记应用实例

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:Textbox style="FONT-SIZE:20;Z-INDEX:1;LEFT:209;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:99" inset="5pt,5pt,5pt,5pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>

<v:Textbox style="OVERFLOW-Y:scroll;FONT-SIZE:20;Z-INDEX:1;LEFT:216;WIDTH:292;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:208;HEIGHT:79;border:1 solid black" inset="5pt,5pt,5pt,5pt" print="t">这里是 <BR>textbox文本 <BR><BR>它几乎支持
<BR>CSS所有用于文本的修饰
</v:Textbox>

<v:Textbox style="FONT-SIZE:20;Z-INDEX:1;LEFT:215;WIDTH:303;COLOR:#4c1b82;WORD-BREAK:break-all;FONT-FAMILY:黑体;POSITION:absolute;TOP:328;HEIGHT:184;border:10 ridge red;" inset="5pt,5pt,5pt,5pt" print="t">
内容同样也支持<FONT color=blue>HTML</FONT>超文本 <BR><BR>
比如<A href="http://www.microsoft.com/" target=_blank>超级连接</A> <BR><BR>
在比如用HTML插入图像<IMG src="shili/fyw1.jpg">、插入HTML表格、frame网页框等等
</v:Textbox>



仔细分析以上代码,不难看出它就是用于输出超文本,而本身专用属性很有限(只有inset描述与容器内边界的文本间隔度,但这个属性意义并不大了,因为完全可以用CSS的padding代替)。而描述内容文本各种样式则直接使用CSS提供的丰富样式,该标记基本跟HTML的span相同。
4:textbox内容 - 当作二级标记应用实例

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:93;HEIGHT:100" arcsize="0.15">
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" inset="5pt,5pt,5pt,5pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>

<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:200;HEIGHT:100" arcsize="0.15" fillcolor="yellow" strokecolor="black" strokeweight=".75pt">
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" inset="8pt,8pt,8pt,8pt" print="t">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>

<v:roundrect style="Z-INDEX:1;LEFT:219;WIDTH:350;POSITION:absolute;TOP:310;HEIGHT:100" arcsize="0.15" filled="t" fillcolor="#ef69ce" stroked="t" strokecolor="black" strokeweight="5px">
<v:fill type="gradientRadial" opacity="0.6" color2="white"/>
<v:Textbox style="FONT-SIZE:20;COLOR:#f81ad2;WORD-BREAK:break-all;FONT-FAMILY:黑体;" print="t" inset="1pt,1pt,1pt,1pt">
这里是textbox文本 <BR><BR>它几乎支持CSS所有用于文本的修饰
</v:Textbox>
</v:roundrect>



可以看出,它也可以充当二级标记作为oval、rect、roundrect等图形的内容。你也许会问,我完全可以直接在图形内插入HTML超文本内容,还有必要用textbox?回答是看你用VML进行什么样的开发,如果只是简单的绘图那么可以说没必要,但如果进行的是WEB 3D网页开发、DVML编程,那么用textbox在某种情况可以剩时、剩力、剩代码、更好的组织性。



1:imagedata背景图片 - 专用属性参考表

属性名 默认值 值类型/范围 用途
src null URLtext 描述图像URL地址来源
grayscale false boolean 描述图像是否为黑白效果
bilevel false boolean 描述图像是否为漫画卡通效果
blacklevel null number/-0.4-0.4 描述图像亮度
gain null number/0-100 描述图像对比度
gamma null number/0.9-0.1 描述图像颜色清晰度
chromakey none colortext 描述图像透明过滤的颜色
cropleft null number/0%-100% 描述图像左边的裁剪
cropright null number/0%-100% 描述图像右边的裁剪
croptop null number/0%-100% 描述图像上边的裁剪
cropbottom null number/0%-100% 描述图像下边的裁剪


2:imagedata背景图片 - 介绍
也许你又会问,二级标记fill不是有很强背景图像填充的方法么,怎么还有个imagedata背景图片?我的回答是“不管是实用/常用与否,VML为我们想的很周到”。的确fill的背景图像填充是很强的、效果眼花缭乱,而又的确imagedata我认为使用的机会不会很多,但不可否认imagedata我曾经实际应用中也有一些特长。请先看下面几个imagedata的例子,它的属性作用跟一级标记image一摸一样,只不过是用它插入的图片必须依附于像oval、rect、roundrect、arc等图形当中,当作平铺于该图形底下的“背景/场景图像”

3:imagedata背景图片 - 实例讲解

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:50;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3"/>

<v:oval style="Z-INDEX:1;LEFT:160;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata src="shili/fyw2.jpg"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:270;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata bilevel=t src="shili/fyw2.jpg"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:380;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata cropleft="25%" croptop="20%" cropright="20%" cropbottom="20%" src="shili/fyw2.jpg"/>
</v:oval>



上例我们插入的图片是JPG格式的矩形图片,你只少应从例子中理解用imagedata插入的图像必须依附于图形、如果图像本事是JPG矩形的图片那么就会平铺于图形之下、图形本身的fillcolor填充也会无效、裁剪后被自动拉伸缩放剩下的图形部分
在看下面用gif动画的例子

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:50;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3"/>

<v:oval style="Z-INDEX:1;LEFT:160;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:extrusion on="t" backdepth="20pt" color="#6fab57" diffusity="1.1"/>
<v:imagedata src="shili/haha.gif"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:270;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata bilevel=t src="shili/haha.gif"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:380;WIDTH:100;POSITION:absolute;TOP:100;HEIGHT:100" fillcolor="#C4F6FA" strokecolor="yellow" strokeweight="3">
<v:imagedata cropleft="25%" croptop="20%" cropright="20%" cropbottom="20%" src="shili/haha.gif"/>
</v:oval>



上例我们插入的图片是gif格式的带透明部分不规则动画图片,就跟JPG矩形图片有些不同之出了,由于gif动画图形的不规则问题,显现出图形本身的fillcolor颜色

4:imagedata背景图片 - 应用价值探讨
如一开始所说,imagedata的实际应用价值远不如fill、stroke等二级标记,但若制作照片框、图像浏览、处理类的DVML程序到还不错,下面给个很简单的例子。

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<center>
<input type='button' value="放大" onclick="rect1.style.width=parseInt(rect1.style.width)+30;rect1.style.height=parseInt(rect1.style.height)+30;rect1.style.left=parseInt(rect1.style.left)-15;rect1.style.top=parseInt(rect1.style.top)-15;">
<input type='button' value="缩小" onclick="rect1.style.width=parseInt(rect1.style.width)-30;rect1.style.height=parseInt(rect1.style.height)-30;rect1.style.left=parseInt(rect1.style.left)+15;rect1.style.top=parseInt(rect1.style.top)+15;">
<input type='button' value="增加与取消漫画风格" onclick="img1.bilevel=!img1.bilevel">
</center>

<v:rect id="rect1" style="Z-INDEX:3334;LEFT:296px;WIDTH:350px;POSITION:absolute;TOP:200px;HEIGHT:250px" arcsize="6554f" fillcolor="white" stroked="t" strokecolor="#b0774c" strokeweight="15pt">
<v:stroke filltype="pattern" src="shili/fyw2.jpg" opacity="1" startarrow="none" endarrow="none"/>
<v:imagedata id=img1 src="shili/fyw2.jpg"/>
</v:rect>



虽然用rect+image这两个一级标记也可以模拟实现上述效果,但DVML编程恐怕就需要花费很多关于坐标定位上的代码了(要更新rect也要更新image)。而imagedata是直接依附于rect内部的,坐标、大小更新时只需控制rect即可,简化了这方面编程的烦琐。



1:textpath文本路径 - 专用属性参考表

属性名 默认值 值类型/范围 用途
on false boolean 设置处理是否起效
string null string 描述使用的文本
fitpath false boolean 描述是否自动缩放文本已占满路径
fitshape false boolean Stretches the text path out to the edges of the shapebox.
trim false boolean Removes any additional space reserved for ascenders and descenders if not used.
xscale false boolean Use straight x measurement instead of measuring along the path.


2:textpath文本路径 - 实例讲解

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:149;WIDTH:107;POSITION:absolute;TOP:137;HEIGHT:99" fillcolor="yellow" strokecolor="red" strokeweight="1.5pt"/>

<v:oval style="Z-INDEX:1;LEFT:290;WIDTH:107;POSITION:absolute;TOP:131;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:黑体" on="t" fitpath="f" string="路径文字化"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:477;WIDTH:107;POSITION:absolute;TOP:136;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:宋体" on="t" fitpath="t" string="路径文字化"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:660;WIDTH:107;POSITION:absolute;TOP:140;HEIGHT:99" filled="t" fillcolor="white" strokecolor="red" strokeweight="1.5pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-SIZE:30;FONT-FAMILY:宋体" on="t" fitpath="t" string="IIIIIIIIII"/>
</v:oval>



textpath文本路径处理功能是VML一个很实用、很有用的二级标记,也许你还很陌生,所以这一章节我要详细的讲述它。
对于以上代码的分析:
1:应用textpath文本路径,必须增加<path textpathok="t"/>这个二级标记,它表示生成该图形文本路径,否则不行。
2:文字的颜色,继承其载体(oval)的strokecolor边框颜色属性
3:文字的粗度,继承其载体的strokeweight边框粗度属性
4:文字的背景,继承其载体的fillcolor填充属性,只是未放大看不出来,不过我会在接下的例子演示
5:第一个处理的fitpath="f",表示文字不自动缩放占满整个路径,文字大小以CSS的font-size:;定义为30px,由于字数少所以它未占满
6:而其他的fitpath="t"的,运行效果表示,它们都可以自动缩放占满整个路径,而相对CSS定义的font-size字大小为50px就无效了
7:由于其on属性默认为false,所以我们必须增加on="t"表示textpath文本路径处理起作用
在继续看例子:

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:line style="Z-INDEX:1;LEFT:220;POSITION:absolute;TOP:128" from="0,0" to="135pt,-11.25pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="t" string="VML极道教程"/>
</v:line>

<v:line style="Z-INDEX:1;LEFT:212;POSITION:absolute;TOP:211" from="0,0" to="346.5pt,-37.5pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath on="t" fitpath="t" string="VML极道教程"/>
</v:line>

<v:rect style="Z-INDEX:1;LEFT:232;WIDTH:269;POSITION:absolute;TOP:302;HEIGHT:167" filled="t" fillcolor="#5aea81" strokecolor="#2174ff" strokeweight=".75pt"> <v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="dasjkvklGHBGJGT"/>
<v:fill type="gradientRadial" opacity=".8" color2="#f32098"/>
</v:rect>



对于以上代码的分析:
1:这次你应该看出文字的背景是继承其载体fillcolor="yellow"黄色的
2:而且line线也支持路径(其实curve,shape,roundrect等均支持文本路径,只有image,textbox不支持文本路径)
3:最后一个输出了好多的图形,这是因为CSS用FONT-FAMILY:;将它的字体定义为“Wingdings”。Wingdings是一种图形字体,其他还有“Wingdings 2、Wingdings 3、Webdings、Marlett”字体均为图形字体
4:最后一个还追加了fill填充渐变颜色效果,使图形字体看起来更好看
在继续看例子:

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:curve style="Z-INDEX:1;LEFT:199;POSITION:absolute;TOP:175" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
</v:curve>

<v:curve style="Z-INDEX:1;LEFT:194;POSITION:absolute;TOP:280" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#2b2ae3" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
<v:extrusion on="t" backdepth="20pt" color="#e9fd92" diffusity="1.1"/>
<v:fill type="gradientRadial" opacity=".8" color2="#fa7b4c"/>
</v:curve>

<v:curve style="Z-INDEX:1;LEFT:203;POSITION:absolute;TOP:409" from="0,0" control1="15pt,-90pt" control2="271.5pt,73.5pt" to="405.75pt,-26.25pt" filled="t" fillcolor="#2b2ae3" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Wingdings" on="t" fitpath="t" string="JKLMNOPQ"/>
<v:extrusion on="t" backdepth="20pt" color="#e9fd92" diffusity="1.1" rotationangle="14,-84"/>
<v:fill type="gradientRadial" opacity=".8" color2="#fa7b4c"/>
</v:curve>



对于以上代码的分析:
1:这次你看到的就是更多的图形字体,并演示他们按照曲线的轨迹路径排列
2:第二个则同时增加了填充、立体效果,使图形更加的好看
3:第三个则使用了extrusion的rotationangle属性让立体以不同的角度呈现
在继续看例子:

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:oval style="Z-INDEX:1;LEFT:286;WIDTH:147;POSITION:absolute;TOP:5;HEIGHT:163" filled="t" fillcolor="#f9ec18" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Webdings" on="t" fitpath="t" string="û"/>
<v:extrusion on="t" foredepth="0" backdepth="15pt" color="#e9fd92" diffusity="1.1"/>
</v:oval>

<v:oval style="Z-INDEX:1;LEFT:284;WIDTH:153;POSITION:absolute;TOP:258;HEIGHT:155" filled="t" fillcolor="yellow" strokecolor="#2174ff" strokeweight=".75pt">
<v:path textpathok="t"/>
<v:textpath style="FONT-FAMILY:Webdings" on="t" fitpath="t" string="û"/>
<v:fill src="shili/fyw2.jpg" type="frame" opacity=".8"/>
<v:extrusion on="t" foredepth="0" backdepth="15pt" color="#e9fd92" diffusity="1.1"/>
</v:oval>



对于以上代码的分析:
1:也许你惊呼“VML世界地图”!?其实也没什么好惊讶的,这只不过是textpath使用了Webdings字体而且只用了一个字母,而后我们给它增加了立体,使它有立体感
2:而第二个我们又给其增加了fill背景填充,它更加好看了而已,你甚至还可以换成gif动画……
3:综合以上所有例子,由次可见textpath的有用之处了吧???
4:你如果想知道所有的“Wingdings、Wingdings 2、Wingdings 3、Webdings、Marlett”字体,可以从LD5的“工具”菜单选择“综合工具包”,该工具包里即有这方面资料。或者你直接点击此处 打开(我以将该工具追加于VML极道教程之中^-^)。



1:VML标记学习总结
直到现在,你已经经历了前面24章节VML标记、属性的学习,如果过程中你用心学了、动脑思考了、动手反复测试了、并自认为对VML标记已经很了解了。如果你真是这么想…………,那么我很高兴的告诉你,你已经精通了VML语言、已经熟悉或精通了VML所有标记/属性的50%-95%、具备去教别人的水准了。而我对你的期望值,是你至少已经掌握前面24章节所有涉及的知识、标记、属性的70%,这70%凝聚着VML所有最简单的、最实用的、最重要的。而剩下的那25%很复杂的、不实用的、不重要的,你精通了更好,不精通也没有关系,因为以后你很少会用得到。
前面24章节提及的约70%(较简单、实用的我建议一定精通或掌握)+25%(建议有一定认识/了解),还有剩下的5%(VML最复杂难懂、shape高精度数学/函数绘图相关、最不可能用到的),我会在本章节下面简单的说一说
假如我所描述的70%(例如就包括专用属性参考表红色标识的重要属性),你已经掌握,那么你现在即算完成“精通VML标记”这一大章的学业,已经算是一位VML高手了,否则我劝你在从头到尾、重新温习一下前面所有的24章节,直到会了全部的70%、或对自己有信心了为止。
如果你有更高的追求,可以进阶修行“DVML编程”这一大章,从VML静态绘图向DVML动态编程继续前进、从小用VML跨越到VML与用户互动、动画开发、游戏开发、服务器端程序开发等等。在以后你就可以凭借你的“VML标记知识+DVML编程知识+FlashVml(闪耀之星)”开发任何基于VML的WEB大小应用了。
否则你现在就可以直接使用FlashVml+你所学到的VML标记知识,进行普通的VMLWEB应用了。

2:VML的其他标记
我曾说过VML的强大功用、成熟与完善,前面24节所提及的概念、知识、标记、属性。是综合了我对VML的所有概念、知识、标记、属性的所学,然后精挑细选后又一一整理,按照我认为的难度、逻辑、实用程度进行课程排序。对今后你会较常用到的进行了深入/通俗的分析、讲解,不常用到的也给出了抽象/简单的范例、说明。
另外我所知的VML标记、属性还有一些,有些是不会用到的、意义不大的,还有些有一定应用意义但这些有不少连我也不熟悉、个别的甚至不知怎么用/是什么概念,更不可能在详细的教育、分析于你听了。我只能整理整理,不懂的就全且用W3C提供的英文说明,待汝有用之日来取。

3:path规则与路径 - 二级标记

属性名 默认值 值类型/范围 用途
v m l e string 描述shapetype形状模版的路径
limo 0,0 vector2D A point along the x and y dimensions of a shape where the shape will limo stretch.
fillok true boolean 暗示一级标记是否有填充
strokeok true boolean 暗示一级标记是否有边框
shadowok true boolean 暗示一级标记是否支持阴影
arrowok false boolean 暗示一级标记是否支持箭头
gradientshapeok false boolean 暗示fill是否依照比例描述gradientradial渐变
textpathok false boolean 暗示一级标记是否支持文本路径
textboxrect null string 描述textbox内容与容器内边界的距离


该标记还算是有些用处、在某些时候甚至于必须使用,不过有用的概念、知识、实例,前面shape、shapetype、textbox相关的章节已经提及了,在这里不在阐述。

4:formulas - shape、shapetype、path_v函数计算实例
This sub-element may appear inside a shape or a shapetype to define formulas that can vary the path of a shape, its inscribed text rectangles, and connection sites. Formula values change as the adj values change on the shape. Formulas can reference other formulas defined earlier in the same formulas element.

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:200;POSITION:absolute;TOP:225;HEIGHT:200" coordsize="21600,21600" filled="t" fillcolor="white" path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">
<v:formulas>
<v:f eqn="sum #0 0 0"/>
<v:f eqn="sum #1 0 0"/>
<v:f eqn="sum height 0 #1"/>
<v:f eqn="sum 10800 0 #1"/>
<v:f eqn="sum width 0 #0"/>
<v:f eqn="prod @4 @3 10800"/>
<v:f eqn="sum width 0 @5"/>
</v:formulas>
</v:shape>




5:handles - 计算公式与输出规则定义
This sub-element may appear inside a shape or a shapetype to define user interface elements which can vary the adj values on the shape, thereby changing the value of formulas and the rendering of a path based on formulas and adj values.

<HTML xmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:shape style="Z-INDEX:1;LEFT:271;WIDTH:200;POSITION:absolute;TOP:225;HEIGHT:200" coordsize="21600,21600" filled="t" fillcolor="white" path="m0@0l@1@0@1,0@2,0@2@0,21600@0,10800,21600xe">

<v:handles>
<v:h position=null polar=null map="0, 1000" invx="false"
invy="false" switch="false" xrange="0, 1000"
yrange="0, 1000" radiusrange="0, 1000"/>
</v:handles>

<v:formulas>
<v:f eqn="sum #0 0 0"/>
<v:f eqn="sum #1 0 0"/>
<v:f eqn="sum height 0 #1"/>
<v:f eqn="sum 10800 0 #1"/>
<v:f eqn="sum width 0 #0"/>
<v:f eqn="prod @4 @3 10800"/>
<v:f eqn="sum width 0 @5"/>
</v:formulas>

</v:shape>



6:office skew歪斜艺术 - 二级标记

属性名 默认值 值类型/范围 用途
on false boolean 暗示一级标记是否支持歪斜
ext view edit,view,backwardCompatible 暗示歪斜被显示的方式
matrix 1,0,0,1,0,0 string 为歪斜定义一种远景变换
offset 0,0 -0.5-0.5,-0.5-0.5 描述歪斜的抵销值
origin 0,0 -0.5-0.5,-0.5-0.5 描述歪斜的起源


使用该标记必须定义xmlns:o="urn:schemas-microsoft-com:office:office"名域命名

7:更全面的英文参考 - 来自MSDN、W3C
MSDN-VML首页
MSDN-VML参考
W3C-VML1998最初草案
《VML极道教程》第一卷[精通VML语言] 全文完!
2005-2-19 0:42:57 - 沐缘华


博文来源:http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763246.html

你可能感兴趣的:(vml)