注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

phperwuhan的博客

记载一个phper的历程!phperwuhan.blog.163.com

 
 
 

日志

 
 

vml极道教程2  

2008-01-18 11:26:02|  分类: vml |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

来源:http://www.elook.net.cn/vml/vml4/vmljdjc.htm


●2级标记stroke边框

1:2级标记的通用属性

以前,我们常说的VML通用属性,是针对像oval、rect、roundrect这样的一级标记而言的(只是“极道”的学习规则,我不会在你还是一只“VML菜鸟”时,用太多的一级标记、二级标记这些难懂的词语)。而对于大多数的二级标记,是不支持的,只有一个例外,像Textbox内容,即能当作一级标记又能当作二级标记。不过id这个通用属性,是所有的一、二级标记均支持的属性。

2:stroke边框 - 专用属性参考表


属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
weight 1pt number 描述边框粗度
color black color 描述边框颜色
opacity 1.0 0.0-1.0 描述边框透明度
dashstyle solid solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot 描述边框的线条样式
filltype solid solid,tile,pattern,frame 描述如何填充边框
src null URLstring 当filltype!=solid时,指定填充边框的图像地址
imagesize auto Vector2D 当filltype!=solid时,描述图像放大倍数
imagealignshape true boolean 当filltype!=solid时,描述图像是否居中对齐
color2 null color 当filltype=pattern时,描述图像的融合背景色
startarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线起点的箭头样式
endarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线终点的箭头样式
startarrowwidth medium narrow,medium,wide 当startarrow!=none时,描述起点箭头的宽度
startarrowlength medium short,medium,long 当startarrow!=none时,描述起点箭头的高度
endarrowwidth medium narrow,medium,wide 当endarrow!=none时,描述起点箭头的宽度
endarrowlength medium short,medium,long 当endarrow!=none时,描述起点箭头的高度
miterlimit 8.0 number 描述边框关节位置的厚度
joinstyle round round(rounded join),bevel(beveled join),miter(miter join) 描述边框参加的样式
endcap round flat,square,round 描述边框结束部分



3:开始二级标记的课程!

通过以前所有章节的学习、在到从本章节开始,就表示你已对VML有了相当的认识、掌握了几乎所有的VML一级标记、如果之前的内容你认真学习了的话。

VML二级标记,你可以这样理解:“它是专门为VML一级标记设计的、它们可以修饰几乎所有用VML一级标记绘制的圆形、矩形、弧形、曲线等几乎所有形状,从头到脚、从边框到背景、从立体到背景图片、从路径轨迹到超文本内容、等等。。二级标记可以将基础的图形包装成各式各样千奇百怪、二级标记可以说是一级标记的一件华丽的衣服”。

不过,学习二级标记,我不会把二级标记的所有属性一一演示、讲解,更不会在去讲之前那些基础的知识(如果你不会,那现在就去看、去学、直到会了、能听懂本章节以后的课程我所说的话为止,我也不会在忌讳不加解释的使用一些诸如交接点/通用属性/专用属性/Vector3D/DVML/coorsize/group/line/curve等等词语)。并仅提供关于该二级属性的常识问题以及一些比较有用的、实用的、好用的、抽象的属性演示例子,你可以通过XXX二级标记专用属性参考表提供的数据,自行更改例题,从而自己了解、掌握XX属性是什么效果、什么用、我怎么挪用应用到XX一级标记图形中。

4:二级标记的兼容性问题

学习中你已知道,二级标记几乎可以“从头到脚”的处理图形几乎任何部分。但是如果图形本身“只有头没有脚”,那么你用专门处理“脚”的二级标记去处理它?不用说,肯定是无效的。那“脚”是什么哪?举个例子,line它只是线只有边框概念而没有填充概念,也就是说stroke二级标记可以处理它但fill(背景填充)二级标记就无法处理它。在说image,它只是图像,没有背景填充的概念,所以fill对它也无法处理。在拿oval、rect、roundrect这些图形跟line线相比,前者由于都有背景概念,所以就支持fill填充。但是,它们却无法使用“箭头”,不然,你说oval、rect哪里是起点?哪里是终点?箭头给它加到哪里合适?而line、arc、curve、polyline、shape却不同,他们都是线条类组成的、或根本就是一条line线,它门有线条起点、终点的概念,所以它们就支持在起点、终点增加箭头。请看下面给图形增加箭头的例子对比

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">    <v:line style="Z-INDEX:1;LEFT:225;POSITION:absolute;TOP:110" from="0,0" to="43.5pt,8.25pt" stroked="t" strokecolor="black" strokeweight=".75pt">  <v:stroke opacity="1" startarrow="none" endarrow="classic"/>  </v:line>    <v:arc style="Z-INDEX:1;LEFT:242;WIDTH:61;POSITION:absolute;TOP:169;HEIGHT:71" startangle="359" endangle="119" fillcolor="white" stroked="t" strokeweight="5">  <v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>  </v:arc>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">    <v:oval style="Z-INDEX:1;LEFT:330;WIDTH:58;POSITION:absolute;TOP:95;HEIGHT:58">  <v:stroke opacity="1" startarrow="none" endarrow="classic"/>  </v:oval>    <v:rect style="Z-INDEX:1;LEFT:335;WIDTH:53;POSITION:absolute;TOP:177;HEIGHT:56" fillcolor="white" stroked="t" strokecolor="black" strokeweight=".75pt">  <v:stroke color="red" opacity=".5" startarrow="oval" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>  </v:rect>  



显示情况证明oval、rect就不支持箭头,不过却支持边框颜色定义。

5:stroke边框 - 精彩实例

我制作了几个抽象的例子,源代码自行分析,并请对照专用属性表修改(其实学习二级标记就是学属性!),篇幅问题不一一作出解释。stroke所涉及的属性,关键是活学活用,不要求全部学会、死记住,但建议应学会专用属性表中我用红色给标记的常用属性,当然多了我不反对,只要你有脑子装~

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">  <v:line style="z-index:1;LEFT:256;POSITION:absolute;TOP:232" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">  <v:stroke opacity="1" startarrow="oval" startarrowwidth="wide" startarrowlength="long" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>  </v:line>  <v:line style="z-index:1;LEFT:249;POSITION:absolute;TOP:151" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75">  <v:stroke opacity="1" startarrow="oval" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="narrow" endarrowlength="short"/>  </v:line>  <v:line style="z-index:1;LEFT:252;POSITION:absolute;TOP:190" from="0,0" to="76.5,-17.25" stroked="t" strokecolor="black" strokeweight="3.75"> <v:stroke opacity="1" startarrow="oval" startarrowwidth="medium" startarrowlength="medium" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>  </v:line>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">  <v:curve style="z-index:1;LEFT:249;POSITION:absolute;TOP:144" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">  <v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long"/>  </v:curve>  <v:curve style="z-index:1;LEFT:251;POSITION:absolute;TOP:187" from="0,0" control1="32.25,-15" control2="24.75,24" to="70.5,0" filled="f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">  <v:stroke opacity="1" startarrow="none" startarrowwidth="narrow" startarrowlength="short" endarrow="classic" endarrowwidth="wide" endarrowlength="long" dashstyle="dash"/>  </v:curve>  <v:rect style="z-index:1;LEFT:248;WIDTH:69;POSITION:absolute;TOP:222;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">  <v:stroke opacity="1" dashstyle="dot"/>  </v:rect>  <v:rect style="z-index:1;LEFT:325;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">  <v:stroke opacity="1" dashstyle="dash"/>  </v:rect>  <v:rect style="z-index:1;LEFT:402;WIDTH:69;POSITION:absolute;TOP:223;HEIGHT:51" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight=".75">  <v:stroke opacity="1" dashstyle="longDashDotDot"/>  </v:rect>  <v:oval style="z-index:1;LEFT:244;WIDTH:61;POSITION:absolute;TOP:292;HEIGHT:58" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="2.25">  <v:stroke opacity="1" dashstyle="shortDashDot"/>  </v:oval>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">  <v:Image style="z-index:1;LEFT:258;WIDTH:100;POSITION:absolute;TOP:136;HEIGHT:100" src="shili\fyw1.jpg" bilevel="f" stroked="t" strokecolor="#e725d6" strokeweight="2.25">  <v:stroke opacity="1" dashstyle="shortDashDot"/>  </v:Image>  <v:roundrect style="z-index:1;LEFT:329;WIDTH:94;POSITION:absolute;TOP:183;HEIGHT:102" arcsize="9830f" fillcolor="white" stroked="t" strokecolor="#e725d6" strokeweight="22.5">  <v:stroke opacity="0.2"/>  </v:roundrect>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">  <v:oval style="z-index:1;LEFT:136;WIDTH:193;POSITION:absolute;TOP:115;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="3.75"> <v:stroke filltype="frame" opacity="1" src="shili/fyw2.jpg"/>  </v:oval>  <v:oval style="z-index:1;LEFT:356;WIDTH:193;POSITION:absolute;TOP:119;HEIGHT:185" fillcolor="yellow" stroked="t" strokecolor="#e725d6" strokeweight="18.75">  <v:stroke filltype="frame" opacity="39321f" src="shili/haha.gif"/>  </v:oval>  <v:rect style="z-index:1;LEFT:593;WIDTH:131;POSITION:absolute;TOP:160;HEIGHT:127" fillcolor="white" stroked="t" strokecolor="black" strokeweight="30"> <v:stroke filltype="frame" opacity=".5" src="shili/fyw1.jpg"/>  </v:rect>  



 

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY bgcolor="#eeeeee">  <v:rect style="z-index:1;LEFT:262;WIDTH:100;POSITION:absolute;TOP:147;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="green" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="red" src="shili/fyw1.jpg"/>  </v:rect>  <v:rect style="z-index:1;LEFT:400;WIDTH:100;POSITION:absolute;TOP:149;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="white" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="yellow" src="shili/fyw1.jpg" imagesize="1,1"/>  </v:rect>  <v:rect style="z-index:1;LEFT:533;WIDTH:100;POSITION:absolute;TOP:151;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15"> <v:stroke filltype="pattern" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>  </v:rect>  <v:rect style="z-index:1;LEFT:679;WIDTH:100;POSITION:absolute;TOP:150;HEIGHT:103" fillcolor="white" stroked="t" strokecolor="blue" strokeweight="15">  <v:stroke filltype="tile" opacity="1" color2="lime" src="shili/fyw1.jpg" imagealignshape="f" imagesize="1,1"/>  </v:rect>


 ●shadow阴影

 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:444px;WIDTH:121px;POSITION:absolute;TOP:142px;HEIGHT:101px" fillcolor="white" strokecolor="black" strokeweight=".75pt"> <v:shadow on="t" type="perspective" color="blue" opacity="26214f" matrix="78643f" offset="7.25pt,7.25pt"/>  </v:oval>  <v:oval style="Z-INDEX:2999;LEFT:505px;WIDTH:96px;POSITION:absolute;TOP:203px;HEIGHT:110px" fillcolor="yellow" strokecolor="black" strokeweight=".75pt"/>  



<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> 


  ●fill填充

 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> 


   ●extrusion立体3D

 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>


    ●textbox内容

1:textbox内容 - 专用属性参考表    
属性名默认值值类型/范围用途
inset7pt,3pt,7pt,3pt0-999pt*(1-4)描述距离容器内边界左/上/右/下长度
printfalseboolean暗示是否被打印机打印
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在某种情况可以剩时、剩力、剩代码、更好的组织性。


     ●imagedata背景图片

1:imagedata背景图片 - 专用属性参考表    
属性名默认值值类型/范围用途
srcnullURLtext描述图像URL地址来源
grayscalefalseboolean描述图像是否为黑白效果
bilevelfalseboolean描述图像是否为漫画卡通效果
blacklevelnullnumber/-0.4-0.4描述图像亮度
gainnullnumber/0-100描述图像对比度
gammanullnumber/0.9-0.1描述图像颜色清晰度
chromakeynonecolortext描述图像透明过滤的颜色
cropleftnullnumber/0%-100%描述图像左边的裁剪
croprightnullnumber/0%-100%描述图像右边的裁剪
croptopnullnumber/0%-100%描述图像上边的裁剪
cropbottomnullnumber/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即可,简化了这方面编程的烦琐。 


     ●textpath文本路径

1:textpath文本路径 - 专用属性参考表    
属性名默认值值类型/范围用途
onfalseboolean设置处理是否起效
stringnullstring描述使用的文本
fitpathfalseboolean描述是否自动缩放文本已占满路径
fitshapefalsebooleanStretches the text path out to the edges of the shapebox.
trimfalsebooleanRemoves any additional space reserved for ascenders and descenders if not used.
xscalefalsebooleanUse 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语言] 全文完! 
  评论这张
 
阅读(572)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017