VML编程之------group集合容器.vmlframe图形引用 ----《VML极道教程》原著:沐缘华
2007-05-29 02:31
274 查看
VML极道教程》原著:沐缘华
1章16节:group集合容器
2:vmlframe图形引用-在本页引用
综合前面章节我们所讲述的shape图形知识、shapetype摸版知识，知道其实可以在shapetype摸版内定义任何形状，而后用shape随意引用。但总有它的不足，也许有人会问了，能不能把一个常用的oval圆、rect矩形、curve曲线等当作模版形状隐藏存储起来？而后需要时在引用？
回答是肯定的-能，请先看下边的例子运行效果、在仔细分析代码
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<divstyle="display:none">
<v:rectid="vml01"style="width:20;height:20"fillcolor="red"strokeweight="1px"/>
<v:ovalid="vml02"style="width:20;height:20"fillcolor="blue"/>
<v:curveid="vml03"from="0,0"control1="-2,-35"control2="50,-10"to="38,-50"filled="t"fillcolor="yellow"/>
<v:lineid="vml04"style="position:absolute;left:150;top:120;"from="0,0"to="50px,0"strokecolor="green"/>
<v:imageid="vml05"style="width:50;height:50"src="shili/fyw1.jpg"/>
</div>
<v:vmlframesrc="#vml01"style="width:100;height:100"/>
<v:vmlframesrc="#vml02"style="width:200;height:150"/>
<v:vmlframesrc="#vml03"style="position:absolute;left:350;top:200;width:300;height:300"/>
<v:vmlframesrc="#vml04"style="position:absolute;width:300;height:300"/>
<v:vmlframesrc="#vml05"style="position:absolute;left:20;top:200;width:50;height:50"/>
<v:vmlframesrc="#vml05"style="position:absolute;left:20;top:270;width:100;height:100"/>
效果证实，不但可以引用，而且还支持控制被引用图形X位置、Y位置、Vector2D/Vector3D输出、大小缩放。首先在<div>内定义了一些常用图形，并用display:none;设置其本身、及所包含的图形全部隐藏。所包含的图形均有一个id命名如vml01，以后就可以用vmlframe标记指定src为#vml01，即表示引用该id对应的图形。
注意vml05那个图像的width宽度为50、height高度为50。第一个vmlframe引用它的标记width、height同样也都是50，即表示不使用缩放。而第二个vmlframe引用它的标记width、height均为100，即表示宽度缩放1倍、高度缩放1倍，所以我们看到的第二个图像就比第一个宽度、高度正好大了一倍。如果相反，模版内图形定义的width、height均比vmlframe引用时定义的高，那么就变成缩放-缩小。或者如果clip属性为true时，配合size进行裁剪等操作。而其距离页面的X、Y位置、position:;等，也均在vmlframe中给予定义。
3:vmlframe图形引用-引用其他文件图形
也许又会有人问，VML常用图形可不可以保存为固定文件？然后在其他的页面可以引用它？回答也是肯定的-能！
请运行下边的代码
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:vmlframesrc="vml1.vml#vml01"style="width:100;height:100"/>
<v:vmlframesrc="vml1.vml#vml02"style="width:200;height:150"/>
<v:vmlframesrc="vml1.vml#vml03"style="position:absolute;left:350;top:200;width:300;height:300"/>
<v:vmlframesrc="vml1.vml#vml04"style="position:absolute;width:300;height:300"/>
<v:vmlframesrc="vml1.vml#vml05"style="position:absolute;left:20;top:200;width:50;height:50"/>
<v:vmlframesrc="vml1.vml#vml05"style="position:absolute;left:20;top:270;width:100;height:100"/>
你也许很吃惊与第一例的运行效果一样吧，其实你可以打开《VML极道教程》所在的目录，找到vml1.vml文件，打开它看一看你就一目了然了。vml1.vml文件的内容如下
<xmlxmlns:v="urn:schemas-microsoft-com:vml">
<v:rectid="vml01"style="width:20;height:20"fillcolor="red"strokeweight="1px"/>
<v:ovalid="vml02"style="width:20;height:20"fillcolor="blue"/>
<v:curveid="vml03"from="0,0"control1="-2,-35"control2="50,-10"to="38,-50"filled="t"fillcolor="yellow"/>
<v:lineid="vml04"style="position:absolute;left:150;top:120;"from="0,0"to="50px,0"strokecolor="green"/>
<v:imageid="vml05"style="width:50;height:50"src="shili/fyw1.jpg"/>
</xml>
vml1.vml文件的内容最简可以写成这种形式
<xml>
<v:rectid="vml01"style="width:20;height:20"fillcolor="red"strokeweight="1px"/>
<v:ovalid="vml02"style="width:20;height:20"fillcolor="blue"/>
<v:curveid="vml03"from="0,0"control1="-2,-35"control2="50,-10"to="38,-50"filled="t"fillcolor="yellow"/>
<v:lineid="vml04"style="position:absolute;left:150;top:120;"from="0,0"to="50px,0"strokecolor="green"/>
<v:imageid="vml05"style="width:50;height:50"src="shili/fyw1.jpg"/>
</xml>
而且不一定非要用.vml做为文件后缀，你完全可以用txt、htm等后缀，只要其内容是如上格式即可，不过为了分类文件明晰，我还是建议你用.vml作为vml图形存储文件的后缀。
[/code]
1章16节:group集合容器
1:group集合容器-实例讲解
该标记不是用来输出某种图形的、运行时其本身也不可见，而且也没有专用属性，只有VML通用属性，但却也是非常重要的、特殊的VML标记。它的作用就是充当“类似父或母”的身份将多个“类似儿女成员”的图形囊括其中，然后你可以单独性的描述“父母”，不必一个一个去控制“单个子女”，从而实现“全员子女”继承“父母”遗传的id,class,style(top,left,width,height,rotation,z-index,position,visibility,display),title,href,target,alt,coordsize,coordorigin等等属性。而我们以后实际应用，最重要的是让“子女”继承CSS-style()括号里的属性。
先看一个例子:
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:groupid="group1"style='position:absolute;left:0;top:0;z-index:1;width:100;height:100'coordsize="100,100">
<v:ovalstyle="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="white"/>
<v:rectstyle="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="yellow"/>
<v:rectstyle="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80"fillcolor="red"/>
<v:arcstyle="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80"startangle="360"endangle="167"fillcolor="blue"/>
</v:group>
以上例子也许较难理解，不过我会详细解释。group标记我们用id命名为group1，CSS定义了position:absolute;，表示它是Vector3D的形式输出网页。z-index:1;定义了3D高度为1，left:0;top:0;表示它位于网页的X位置=0、Y位置=0。width:100;height:100、coordsize="100,100"综合我们前面shape多边形那课讲的知识，知道它的大小是100%，也不放大、也不缩小、与coordsize虚拟容器空间大小持平。
在看它包含的4个子女图形标记，均没有position:absolute;的Vector3D输出定义。但运行效果证明，它们继承了group1的position:absolute;定义，同样均以Vector3D形式输出。
在看4个子女的left:;top:;width:;height:;，也许你会问输出距离页面XY位置、宽度、高度效果均是正常值，似乎没有继承ground1？那么你在对比下面的例子，就发现这个例子却继承了。
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:groupid="group1"style='position:absolute;left:200;top:50;z-index:1;width:100;height:100'coordsize="100,100">
<v:ovalstyle="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="white"/>
<v:rectstyle="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="yellow"/>
<v:rectstyle="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80"fillcolor="red"/>
<v:arcstyle="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80"startangle="360"endangle="167"fillcolor="blue"/>
</v:group>
怎么样？这例group1的left为200、top为50。你发现相比第一个例子，这个例子所有4个子女图形的页面位置X均增加了200、页面位置Y均增加了50。而例1中group1的left为0、top为0，也就是“父母”没有“财产”遗传给“子女”……
现在你恍然大悟学会group标记了？恭喜，其实group“父母”与“子女”的故事就是这么一会事……。在看看下例，不就所有子女都放大两倍了？
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:groupid="group1"style='position:absolute;left:200;top:50;z-index:1;width:200;height:200'coordsize="100,100">
<v:ovalstyle="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="white"/>
<v:rectstyle="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="yellow"/>
<v:rectstyle="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80"fillcolor="red"/>
<v:arcstyle="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80"startangle="360"endangle="167"fillcolor="blue"/>
</v:group>
2:group集合容器-DVML编程批处理的好助手
至于DVML编程，现在不到正式讲解的时候，我只简单的在这里介绍一下，因为group是DVML编程时批处理图形的好助手
DVML是我自己给VML系列编程起的名字，全名为DHTMLVML，DVML是简写。DVML编程是干什么的？因为内容比较复杂、现在我不说、以后会在DVML编程一章详细讨论。我只给个DVML最简单的例子，让你少稍稍了解一下程序是什么，聪明人不用我说明，也会看出group对于编程时批处理图形的便利。
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:groupid="group1"style='position:absolute;left:200;top:50;z-index:1;width:100;height:100'coordsize="100,100">
<v:ovalstyle="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="white"/>
<v:rectstyle="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50"fillcolor="yellow"/>
<v:rectstyle="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80"fillcolor="red"/>
<v:arcstyle="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80"startangle="360"endangle="167"fillcolor="blue"/>
</v:group>
<inputtype=buttonvalue=按我向左移全部图形onclick="group1.style.left=parseInt(group1.style.left)-10">
<inputtype=buttonvalue=按我向右移全部图形onclick="group1.style.left=parseInt(group1.style.left)+10">
<inputtype=buttonvalue=按我向放大全部图形onclick="group1.style.width=parseInt(group1.style.width)+10;group1.style.height=parseInt(group1.style.height)+10;">
<inputtype=buttonvalue=按我向缩小全部图形onclick="group1.style.width=parseInt(group1.style.width)-10;group1.style.height=parseInt(group1.style.height)-10;">
这就是程序、这就是DVML编程的一个简单实例。没有group集合容器，DVML编程只能一个个很烦琐的去操作图形。而VML的强大不会让上述事情发生，以后当你学会了DVML编程，别忘记了在适当的时候选择使用group集合容器，这可以提高程序运行效率、简化DVML编程的烦琐、行之有效的实现批处理图形。
《VML极道教程》原著:沐缘华
1章17节:vmlframe图形引用----
[code]1:vmlframe图形引用-专用属性
| 属性名 | 默认值 | 值类型/范围 | 用途 |
| src | # | idstring | 暗示引用的图形id名称 |
| clip | false | boolean | 当被引用图形较大时，是否裁剪 |
| size | 0,0 | Vector2D | 当clip=true时，设定裁剪度 |
| Origin | 0,0 | Vector2D | 不详 |
综合前面章节我们所讲述的shape图形知识、shapetype摸版知识，知道其实可以在shapetype摸版内定义任何形状，而后用shape随意引用。但总有它的不足，也许有人会问了，能不能把一个常用的oval圆、rect矩形、curve曲线等当作模版形状隐藏存储起来？而后需要时在引用？
回答是肯定的-能，请先看下边的例子运行效果、在仔细分析代码
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<divstyle="display:none">
<v:rectid="vml01"style="width:20;height:20"fillcolor="red"strokeweight="1px"/>
<v:ovalid="vml02"style="width:20;height:20"fillcolor="blue"/>
<v:curveid="vml03"from="0,0"control1="-2,-35"control2="50,-10"to="38,-50"filled="t"fillcolor="yellow"/>
<v:lineid="vml04"style="position:absolute;left:150;top:120;"from="0,0"to="50px,0"strokecolor="green"/>
<v:imageid="vml05"style="width:50;height:50"src="shili/fyw1.jpg"/>
</div>
<v:vmlframesrc="#vml01"style="width:100;height:100"/>
<v:vmlframesrc="#vml02"style="width:200;height:150"/>
<v:vmlframesrc="#vml03"style="position:absolute;left:350;top:200;width:300;height:300"/>
<v:vmlframesrc="#vml04"style="position:absolute;width:300;height:300"/>
<v:vmlframesrc="#vml05"style="position:absolute;left:20;top:200;width:50;height:50"/>
<v:vmlframesrc="#vml05"style="position:absolute;left:20;top:270;width:100;height:100"/>
效果证实，不但可以引用，而且还支持控制被引用图形X位置、Y位置、Vector2D/Vector3D输出、大小缩放。首先在<div>内定义了一些常用图形，并用display:none;设置其本身、及所包含的图形全部隐藏。所包含的图形均有一个id命名如vml01，以后就可以用vmlframe标记指定src为#vml01，即表示引用该id对应的图形。
注意vml05那个图像的width宽度为50、height高度为50。第一个vmlframe引用它的标记width、height同样也都是50，即表示不使用缩放。而第二个vmlframe引用它的标记width、height均为100，即表示宽度缩放1倍、高度缩放1倍，所以我们看到的第二个图像就比第一个宽度、高度正好大了一倍。如果相反，模版内图形定义的width、height均比vmlframe引用时定义的高，那么就变成缩放-缩小。或者如果clip属性为true时，配合size进行裁剪等操作。而其距离页面的X、Y位置、position:;等，也均在vmlframe中给予定义。
3:vmlframe图形引用-引用其他文件图形
也许又会有人问，VML常用图形可不可以保存为固定文件？然后在其他的页面可以引用它？回答也是肯定的-能！
请运行下边的代码
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:vmlframesrc="vml1.vml#vml01"style="width:100;height:100"/>
<v:vmlframesrc="vml1.vml#vml02"style="width:200;height:150"/>
<v:vmlframesrc="vml1.vml#vml03"style="position:absolute;left:350;top:200;width:300;height:300"/>
<v:vmlframesrc="vml1.vml#vml04"style="position:absolute;width:300;height:300"/>
<v:vmlframesrc="vml1.vml#vml05"style="position:absolute;left:20;top:200;width:50;height:50"/>
<v:vmlframesrc="vml1.vml#vml05"style="position:absolute;left:20;top:270;width:100;height:100"/>
你也许很吃惊与第一例的运行效果一样吧，其实你可以打开《VML极道教程》所在的目录，找到vml1.vml文件，打开它看一看你就一目了然了。vml1.vml文件的内容如下
<xmlxmlns:v="urn:schemas-microsoft-com:vml">
<v:rectid="vml01"style="width:20;height:20"fillcolor="red"strokeweight="1px"/>
<v:ovalid="vml02"style="width:20;height:20"fillcolor="blue"/>
<v:curveid="vml03"from="0,0"control1="-2,-35"control2="50,-10"to="38,-50"filled="t"fillcolor="yellow"/>
<v:lineid="vml04"style="position:absolute;left:150;top:120;"from="0,0"to="50px,0"strokecolor="green"/>
<v:imageid="vml05"style="width:50;height:50"src="shili/fyw1.jpg"/>
</xml>
vml1.vml文件的内容最简可以写成这种形式
<xml>
<v:rectid="vml01"style="width:20;height:20"fillcolor="red"strokeweight="1px"/>
<v:ovalid="vml02"style="width:20;height:20"fillcolor="blue"/>
<v:curveid="vml03"from="0,0"control1="-2,-35"control2="50,-10"to="38,-50"filled="t"fillcolor="yellow"/>
<v:lineid="vml04"style="position:absolute;left:150;top:120;"from="0,0"to="50px,0"strokecolor="green"/>
<v:imageid="vml05"style="width:50;height:50"src="shili/fyw1.jpg"/>
</xml>
而且不一定非要用.vml做为文件后缀，你完全可以用txt、htm等后缀，只要其内容是如上格式即可，不过为了分类文件明晰，我还是建议你用.vml作为vml图形存储文件的后缀。
[/code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- VML编程之------group集合容器.vmlframe图形引用 ----《VML极道教程》原著:沐缘华
- VML编程之------RoundRect圆矩型《VML极道教程》原著:沐缘华 (5-29 01:15)
- VML编程之------background背景《VML极道教程》原著:沐缘华
- VML 编程之--------《VML极道教程》原著:沐缘华
- VML编程之------oval圆rect矩型《VML极道教程》原著:沐缘华
- VML编程之------shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华
- VML编程之------VML语言入门《VML极道教程》原著:沐缘华
- VML 编程之--------《VML极道教程》原著:沐缘华
- VML编程之------image图片《VML极道教程》原著:沐缘华
- VML编程之------2级标记stroke边框 . shadow阴影----《VML极道教程》原著:沐缘华
- VML编程之------VML语言入门《VML极道教程》原著:沐缘华
- VML编程之------oval圆rect矩型《VML极道教程》原著:沐缘华
- VML编程之------polyline多边型《VML极道教程》原著:沐缘华
- VML编程之------大结局《VML极道教程》原著:沐缘华
- VML编程之------RoundRect圆矩型《VML极道教程》原著:沐缘华 (5-29 01:15)
- VML编程之------shape多边型.shapetype模版.shape与curve曲线《VML极道教程》原著:沐缘华
- VML编程之------大结局《VML极道教程》原著:沐缘华
- VML编程之------polyline多边型《VML极道教程》原著:沐缘华
- VML编程之------background背景《VML极道教程》原著:沐缘华
- VML编程之------image图片《VML极道教程》原著:沐缘华