本系列文章导航
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编程大结局
2级标记stroke边框 . shadow阴影
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>
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>
博文来源:http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763241.html