VML编程之------group集合容器.vmlframe图形引用 ----《VML极道教程》原著:沐缘华

VML极道教程》原著:沐缘华
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()括号里的属性。
先看一个例子:

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
 
<v:oval style="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="white"/>
<v:rect style="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="yellow"/>
<v:rect style="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80" fillcolor="red"/>
<v:arc style="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？那么你在对比下面的例子，就发现这个例子却继承了。

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:group id="group1" style='position:absolute;left:200;top:50;z-index:1;width:100;height:100' coordsize="100,100">
 
<v:oval style="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="white"/>
<v:rect style="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="yellow"/>
<v:rect style="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80" fillcolor="red"/>
<v:arc style="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“父母”与“子女”的故事就是这么一会事……。在看看下例，不就所有子女都放大两倍了？

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:group id="group1" style='position:absolute;left:200;top:50;z-index:1;width:200;height:200' coordsize="100,100">
 
<v:oval style="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="white"/>
<v:rect style="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="yellow"/>
<v:rect style="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80" fillcolor="red"/>
<v:arc style="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80" startangle="360" endangle="167" fillcolor="blue"/>
 
</v:group>



2:group集合容器 - DVML编程批处理的好助手
至于DVML编程，现在不到正式讲解的时候，我只简单的在这里介绍一下，因为group是DVML编程时批处理图形的好助手
DVML是我自己给VML系列编程起的名字，全名为DHTML VML，DVML是简写。DVML编程是干什么的？因为内容比较复杂、现在我不说、以后会在DVML编程一章详细讨论。我只给个DVML最简单的例子，让你少稍稍了解一下程序是什么，聪明人不用我说明，也会看出group对于编程时批处理图形的便利。

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:group id="group1" style='position:absolute;left:200;top:50;z-index:1;width:100;height:100' coordsize="100,100">
 
<v:oval style="LEFT:100;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="white"/>
<v:rect style="LEFT:200;TOP:100;WIDTH:50;HEIGHT:50" fillcolor="yellow"/>
<v:rect style="LEFT:100;TOP:200;WIDTH:80;HEIGHT:80" fillcolor="red"/>
<v:arc style="LEFT:200;TOP:200;WIDTH:80;HEIGHT:80" startangle="360" endangle="167" fillcolor="blue"/>
 
</v:group>
<input type=button value=按我向左移全部图形 onclick="group1.style.left=parseInt(group1.style.left)-10">
<input type=button value=按我向右移全部图形 onclick="group1.style.left=parseInt(group1.style.left)+10">
<input type=button value=按我向放大全部图形 onclick="group1.style.width=parseInt(group1.style.width)+10;group1.style.height=parseInt(group1.style.height)+10;">
<input type=button value=按我向缩小全部图形 onclick="group1.style.width=parseInt(group1.style.width)-10;group1.style.height=parseInt(group1.style.height)-10;">



这就是程序、这就是DVML编程的一个简单实例。没有group集合容器，DVML编程只能一个个很烦琐的去操作图形。而VML的强大不会让上述事情发生，以后当你学会了DVML编程，别忘记了在适当的时候选择使用group集合容器，这可以提高程序运行效率、简化DVML编程的烦琐、行之有效的实现批处理图形。
 



1:vmlframe图形引用 - 专用属性


    
        

            属性名
            默认值
            值类型/范围
            用途
        

        

            src
            #
            idstring
            暗示引用的图形id名称
        

        

            clip
            false
            boolean
            当被引用图形较大时，是否裁剪
        

        

            size
            0,0
            Vector2D
            当clip=true时，设定裁剪度
        

        

            Origin
            0,0
            Vector2D
            不详
        

    


2:vmlframe图形引用 - 在本页引用
综合前面章节我们所讲述的shape图形知识、shapetype摸版知识，知道其实可以在shapetype摸版内定义任何形状，而后用shape随意引用。但总有它的不足，也许有人会问了，能不能把一个常用的oval圆、rect矩形、curve曲线等当作模版形状隐藏存储起来？而后需要时在引用？
回答是肯定的 - 能，请先看下边的例子运行效果、在仔细分析代码

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<div style="display:none">
 
<v:rect id="vml01" style="width:20;height:20" fillcolor="red" strokeweight="1px"/>
<v:oval id="vml02" style="width:20;height:20" fillcolor="blue"/>
<v:curve id="vml03" from="0,0" control1="-2,-35" control2="50,-10" to="38,-50" filled="t" fillcolor="yellow"/>
<v:line id="vml04" style="position:absolute;left:150;top:120;" from="0,0" to="50px,0" strokecolor="green"/>
<v:image id="vml05" style="width:50;height:50" src="shili/fyw1.jpg"/>
 
</div>
 
<v:vmlframe src="#vml01" style="width:100;height:100"/>
<v:vmlframe src="#vml02" style="width:200;height:150"/>
<v:vmlframe src="#vml03" style="position:absolute;left:350;top:200;width:300;height:300"/>
<v:vmlframe src="#vml04" style="position:absolute;width:300;height:300"/>
<v:vmlframe src="#vml05" style="position:absolute;left:20;top:200;width:50;height:50"/>
<v:vmlframe src="#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常用图形可不可以保存为固定文件？然后在其他的页面可以引用它？回答也是肯定的 - 能！
请运行下边的代码

<HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE><BODY>
<v:vmlframe src="vml1.vml#vml01" style="width:100;height:100"/>
<v:vmlframe src="vml1.vml#vml02" style="width:200;height:150"/>
<v:vmlframe src="vml1.vml#vml03" style="position:absolute;left:350;top:200;width:300;height:300"/>
<v:vmlframe src="vml1.vml#vml04" style="position:absolute;width:300;height:300"/>
<v:vmlframe src="vml1.vml#vml05" style="position:absolute;left:20;top:200;width:50;height:50"/>
<v:vmlframe src="vml1.vml#vml05" style="position:absolute;left:20;top:270;width:100;height:100"/>



你也许很吃惊与第一例的运行效果一样吧，其实你可以打开《VML极道教程》所在的目录，找到vml1.vml文件，打开它看一看你就一目了然了。vml1.vml文件的内容如下

<xml xmlns:v="urn:schemas-microsoft-com:vml">
<v:rect id="vml01" style="width:20;height:20" fillcolor="red" strokeweight="1px"/>
<v:oval id="vml02" style="width:20;height:20" fillcolor="blue"/>
<v:curve id="vml03" from="0,0" control1="-2,-35" control2="50,-10" to="38,-50" filled="t" fillcolor="yellow"/>
<v:line id="vml04" style="position:absolute;left:150;top:120;" from="0,0" to="50px,0" strokecolor="green"/>
<v:image id="vml05" style="width:50;height:50" src="shili/fyw1.jpg"/>
</xml>

vml1.vml文件的内容最简可以写成这种形式

<xml>
<v:rect id="vml01" style="width:20;height:20" fillcolor="red" strokeweight="1px"/>
<v:oval id="vml02" style="width:20;height:20" fillcolor="blue"/>
<v:curve id="vml03" from="0,0" control1="-2,-35" control2="50,-10" to="38,-50" filled="t" fillcolor="yellow"/>
<v:line id="vml04" style="position:absolute;left:150;top:120;" from="0,0" to="50px,0" strokecolor="green"/>
<v:image id="vml05" style="width:50;height:50" src="shili/fyw1.jpg"/>
</xml>

而且不一定非要用.vml做为文件后缀，你完全可以用txt、htm等后缀，只要其内容是如上格式即可，不过为了分类文件明晰，我还是建议你用.vml作为vml图形存储文件的后缀。
posted @ 2007-05-29 02:34  GeneralXU  阅读(965)  评论(0)  编辑  收藏  举报