VML编程之------大结局《VML极道教程》原著:沐缘华

于 2007-05-29 03:31:00 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： VML编程 文章标签： 编程 textbox behavior path string vector
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeneralXCK/article/details/5351085
版权 
1:shadow阴影 - 专用属性参考表

 
 
属性名默认值值类型/范围用途
ontrueboolean设置处理是否起效
typesinglesingle,double,emboss,perspective描述使用哪种阴影效果
colorblackcolor描述主要阴影颜色
obscuredfalseboolean暗示看穿图像如果没有在形状上填充
opacity1.00.0-1.0描述阴影透明度
offset2pt,2ptVector2D描述阴影的XY偏移度
color2graycolor当type!=single时，描述二次投影颜色
offset20pt,0ptVector2D当type!=single时，描述二次投影XY偏移度
origin0,0Vector2D当filltype!=solid时，描述阴影与投影的交接度
matrixnullstring当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>
  
  

 
 


 
 

  
  
  
  
  
  


  
  

  
  

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

   
   
属性名默认值值类型/范围用途
ontrueboolean设置处理是否起效
typesolidsolid,gradient,gradientradial,tile,pattern,frame描述使用哪种填充模式
colorwhitecolor描述基本填充颜色
opacity1.00.0-1.0描述填充透明度
以下属性只有当type=gradient,gradientradial渐变填充时有效
color2whitecolor描述基本二级过度颜色
colorsnullnumber% color*沿着一个渐行度填充颜色，并以百分比分配空间。例如1:colors="30% red,50% blue"。例如2:colors="30% red,50% blue,90% purple"
angle0-360-360描述渐行效果以圆周顺时旋转、倾斜
focus0%-100%-100%描述渐层的位置
focussize0,0Vector2D描述渐层在所有者的位置分布
focusposition0,0Vector2D描述渐层在所有者的倾斜度分布
methodsigmanone,linear,sigma,any描述均匀分布的对比
以下属性只有当type=tile,pattern,frame背景图像填充时有效
srcnullURL描述填充使用的图像地址
sizeautoVector2D描述图像放大倍数
originautoVector2D描述图像的分布位置，适用于tile、pattern
positionautoVector2D描述图像放置的起源位置，适用于tile、pattern
aspectignoreignore,atleast,atmost描述图像居中还是充满整个图型
alignshapetrueboolean描述是否对比容器对齐图片

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 - 专用属性参考表

     
     
属性名默认值值类型/范围用途
onfalseboolean设置处理是否起效
typeparallelparallel,Perspective描述使用哪种立体模式
colorwhitecolor描述基本立体颜色
backdepth35ptnumber描述后向立体厚度值
foredepth0ptnumber描述前向立体厚度值
metalfalseboolean描述是否给图形追加立体边框
diffusity1.00.0-3.0描述立体基本亮度
brightness0.30.0-1.0描述立体过度渐层的亮度
rotationangle0,0Vector2D%360描述立体的上下、左右360全景旋转度
skewangle0-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内容 - 专用属性参考表

       
       
属性名默认值值类型/范围用途
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在某种情况可以剩时、剩力、剩代码、更好的组织性。


      
      
 


      
      

       
       


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="放大" οnclick="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="缩小" οnclick="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="增加与取消漫画风格" οnclick="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文本路径 - 专用属性参考表

         
         
属性名默认值值类型/范围用途
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规则与路径 - 二级标记

          
          
属性名默认值值类型/范围用途
vm l estring描述shapetype形状模版的路径
limo0,0vector2DA point along the x and y dimensions of a shape where the shape will limo stretch.
filloktrueboolean暗示一级标记是否有填充
strokeoktrueboolean暗示一级标记是否有边框
shadowoktrueboolean暗示一级标记是否支持阴影
arrowokfalseboolean暗示一级标记是否支持箭头
gradientshapeokfalseboolean暗示fill是否依照比例描述gradientradial渐变
textpathokfalseboolean暗示一级标记是否支持文本路径
textboxrectnullstring描述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歪斜艺术 - 二级标记

          
          
属性名默认值值类型/范围用途
onfalseboolean暗示一级标记是否支持歪斜
extviewedit,view,backwardCompatible暗示歪斜被显示的方式
matrix1,0,0,1,0,0string为歪斜定义一种远景变换
offset0,0-0.5-0.5,-0.5-0.5描述歪斜的抵销值
origin0,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 - 沐缘华

          
          


 
GeneralXCK
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VML编程之------VML语言入门《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-27 1201
《VML极道教程》原著:沐缘华1章4节:VML语言入门 1:VML语言入门 - 极道学法在我正式开始讲解、你正式开始学习VML语言以前，请务必遵循以下规则，可以达到最佳效果、极道学习方法。1:如果你学过HTML、CSS或精通HTML、CSS，那么建议你把学VML的过程看做跟学HTML的过程是一样的，因为，根本就是大同小异。2:从本章节和本章节以后的每一个章节，我会
FlashVml 4.5
03-12
FlashVml，英文简称:FVML，中文名称:璀灿之星，原作者&版权所有:2004-2005 沐缘华(原昵称:风云舞)。是基于WEB浏览器可直接运行使用的VML失量图像(2D/3D)、VmlFlash动画、VML3D网页、其他相关}可视化设计软件（免费、源码公开）。用其开发的作品，可直接编译保存为HTML、或转换为其他格式（如XML、XSL、ASP、ASP。NET格式等，转换功能为今后可行的后续版开发计划）前、后台网页文件，完全可独立运行于所有支持VML的WEB浏览器（如覆盖率最广的微软IE5+浏览器）。
VML 编程之--------《VML极道教程》原著:沐缘华
weixin_30239339的博客
05-27 87
《VML极道教程》原著:沐缘华1章1节:关于VML极道教程 1:何为“极道教程” -对有功底的IT精英：我用最精辟的应用、最专业的校例，使你的技术更胜一筹 -对聪明的人：我用最逻辑的分解、通变式的校例，使你的聪明发挥到学习当中 -对一般人：我用最通俗的语言、阶梯式的校例，使你由一般变成不一般 -对笨的人：我用最傻瓜的理解、启蒙式的校例，使你笨鸟先飞 -极道教程:通俗易懂、循序渐进、内...
VML编程之------image图片《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 1238
《VML极道教程》原著:沐缘华1章10节:image图片 1:image图片 - 专用属性 属性名 默认值 值类型/范围 用途 src null
VML编程之------background背景《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 955
《VML极道教程》原著:沐缘华1章15节:background背景 1:background背景 - 详解你也许一直在好奇，《VML极道教程》内容页面的黄、白相交的渐变背景是怎么做的？其实非常简单、我们本章节所讲的background(网页背景控制标记)，就是用来完成这项任务的。在说明具体怎么做之前，请先对比以下几例的代码区别、勿需死记！平行渐变填充的例子:v/:
VML编程之------polyline多边型《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 946
《VML极道教程》原著:沐缘华1章11节:polyline多边型 1:polyline多边型 - 专用属性 属性名 默认值 值类型/范围 Dhtml访问 用途 poi
VML编程之------oval圆rect矩型《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 943
《VML极道教程》原著:沐缘华1章7节:oval圆rect矩型 1:oval圆与rect矩型VML的oval和rect分别可以绘制圆形与矩形，由于这两个标记的编写方法、原理、属性基本一致，所以我把他们放在一起讲oval、rect的3D输出实例v/:*{behavior:url(#default#VML);}从例子中可以看出，oval、rect除了VML图形的通
example-gradients:在HTML电子邮件中使用CSS背景渐变，并为Outlook使用VML后备
05-13
范本包括2个示例： -在模板内的元素上使用渐变-身体背景渐变兼容性模板使用CSS background-image线性渐变以及Outlook的VML后备功能，这意味着它可以在所有电子邮件客户端的87％以上使用（可能甚至更多，Mac的许多...
svg-to-vml-with-trifleJS
06-18
svg-to-vml-with-trifleJS $ bin\triflejs.exe convert.js example --emulate=IE8 或者$ npm install && grunt
Highcharts-7.2.1.zip
09-13
Highcharts的核心是使用SVG（可缩放矢量图形）和VML（矢量标记语言）来绘制各种图表类型，如折线图、柱状图、饼图、散点图、面积图等。它支持响应式设计，能够在各种屏幕尺寸上良好展示，并且有丰富的自定义选项，...
实现CSS3中的border-radius(边框圆角)示例代码
09-25
在CSS3中，`border-radius`属性用于创建...总的来说，`border-radius`是CSS3中非常实用的一个特性，它极大地提升了网页设计的灵活性和美感。通过理解其工作原理和应用方式，开发者可以创建出更加精致、独特的网页布局。
vtex-snippets:该项目旨在拥有一组用于创建 VTEX IO Store 框架的 Snippets 和快捷方式
08-05
VTEX IO 片段一个可以更快地创建 VTEX IO 存储的 vscode :rocket: :light_bulb: 关于该项目该项目旨在拥有一组用于创建的 ...VTEX Info Card vsl→ VTEX Store Link vml→ VTEX Modal Layout vsf→ VTEX Store Fo
VML编程之------标记实战与line线《VML极道教程》原著:沐缘
GeneralXCK的专栏
05-29 895
1章6节:标记实战与line线 ----1:标记实战与line线 - 前言从本章节开始，我将从最简单的VML标签说起，循序渐进……。你每学会用一个VML标记，你的VML技术就会有一个大的跨越。学标记有学标记的手段，我不会在促足长谈的去讲标记的语法概念、怎么绘制这绘制那。我只给你一些该标记抽象的范例、全面的给出该标记的固有属性、固有属性所有值、讲解属性和属性值有什么作用。也就算
VML编程之------shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 2862
《VML极道教程》原著:沐缘华1章12节:shape多边型 1:shape多边型 - 专用属性 属性名 默认值 值类型/范围 Dhtml访问 用途 path
VML编程之------group集合容器.vmlframe图形引用 ----《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 2545
VML极道教程》原著:沐缘华1章16节:group集合容器 1:group集合容器 - 实例讲解该标记不是用来输出某种图形的、运行时其本身也不可见，而且也没有专用属性，只有VML通用属性，但却也是非常重要的、特殊的VML标记。它的作用就是充当“类似父或母”的身份将多个“类似儿女成员”的图形囊括其中，然后你可以单独性的描述“父母”，不必一个一个去控制“单个子女”，从而实现“全员
VML编程之------2级标记stroke边框 . shadow阴影----《VML极道教程》原著:沐缘华
GeneralXCK的专栏
05-29 1480
《VML极道教程》原著:沐缘华1章18节:2级标记stroke边框 1:2级标记的通用属性以前，我们常说的VML通用属性，是针对像oval、rect、roundrect这样的一级标记而言的（只是“极道”的学习规则，我不会在你还是一只“VML菜鸟”时，用太多的一级标记、二级标记这些难懂的词语）。而对于大多数的二级标记，是不支持的，只有一个例外，像Textbox内容，即能当作一级
VML语言入门教程：从零到精通
- 编写工具：VML可以直接在记事本中编写，但使用HTML编辑器如Lshdic2005（网络程序员伴侣）会更加方便，因为这类工具提供了语法高亮、动态提示和即时预览等功能，有助于提高开发效率。 - 运行环境：VML程序通常在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值