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？那么你在对比下面的例子，就发现这个例子却继承了。


怎么样？这例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=按我向左移全部图形 οnclick="group1.style.left=parseInt(group1.style.left)-10">
<input type=button value=按我向右移全部图形 οnclick="group1.style.left=parseInt(group1.style.left)+10">
<input type=button value=按我向放大全部图形 οnclick="group1.style.width=parseInt(group1.style.width)+10;group1.style.height=parseInt(group1.style.height)+10;">
<input type=button value=按我向缩小全部图形 οnclick="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图形引用 ----

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文件的内容如下

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

而且不一定非要用.vml做为文件后缀，你完全可以用txt、htm等后缀，只要其内容是如上格式即可，不过为了分类文件明晰，我还是建议你用.vml作为vml图形存储文件的后缀。

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

VML编程之------VML语言入门《VML极道教程》原著:沐缘华
<VML极道教程>原著:沐缘华 1章4节:VML语言入门 1:VML语言入门 - 极道学法在我正式开始讲解.你正式开始学习VML语言以前,请务必遵循以下规则,可以达到最佳效果.极道学习方 ...
VML编程之------oval圆rect矩型《VML极道教程》原著:沐缘华
<VML极道教程>原著:沐缘华 1章7节:oval圆rect矩型 1:oval圆与rect矩型 VML的oval和rect分别可以绘制圆形与矩形,由于这两个标记的编写方法.原理.属性基本一 ...
VML极道教程(十二) VML编程大结局
本系列文章导航 VML极道教程(一) VML介绍 VML极道教程(二) VML入门 VML极道教程(三) 标记实战与line线 VML极道教程(四) oval圆rect矩型 VML极道教程(五) Ro ...
VML极道教程(五) RoundRect圆矩型
本系列文章导航 VML极道教程(一) VML介绍 VML极道教程(二) VML入门 VML极道教程(三) 标记实战与line线 VML极道教程(四) oval圆rect矩型 VML极道教程(五) Ro ...
VML极道教程(一) VML介绍
<VML极道教程>原著:沐缘华 <VML极道教程>原著:沐缘华 1章1节:关于VML极道教程 1:何为"极道教程" -对有功底的IT精英:我用最精辟的应用. ...
建立WEB两大经典！《VML极道教程》+FlashVml(闪耀之星)3.0中/英文版联合发布！
该贴的内容,请务必字句阅读,因为这是免费赠送给所有WEBIT人的一个技术大蛋糕! 注释:以下所有的URL演示地址,因人流问题会较慢,其加载时请耐心等待,并尝试使用不同地址分流. <VML极道教程 ...
《Java编程思想》学习笔记9——集合容器高级
1.Arrays.asList()方法产生的List是一个固定长度的数组,只支持不改变长度的操作,任何试图改变其底层数据结构长度的操作(如,增加,删除等操作)都会抛出UnsupportedOperat ...
《Java编程思想》学习笔记4——集合容器
1.集合中添加另一个集合的方法: (1).Collection.addAll(被添加的Collection对象)方法: 如:list1.addAll(list2); (2).Collections.a ...
编程体系结构(03)：Java集合容器
本文源码:GitHub·点这里 || GitEE·点这里一.集合容器简介集合容器是Java开发中最基础API模块,通常用来存储运行时动态创建的元素,基本特点如下: 泛型特点,存储任意类型对象: 动 ...

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

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

最新文章

热门文章