1: group collection container-the instance explains that this tag is not used to output a certain image, it is invisible during runtime, and there is no special attribute, only the common attributes of VML, but it is also a very important and special VML mark. Its role is to act as a "parent-like" identity to include multiple "child-like Members" images, and then you can separately describe "parent ", you do not have to control "single child" one by one, so that "full child" inherits the ID, class, style (top, left, width, height, rotation, z-index, position, visibility, display), title, href, target, ALT, coordsize, coordorigin, and other attributes. In the future, the most important thing we will use is to let "children" inherit the attributes in CSS-style () brackets. Let's take a look at an example: <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>
The above example may be difficult to understand, but I will explain it in detail. The Group tag is named group1 by ID, and CSS defines position: absolute;, indicating that it is output webpage in the form of vector3d. Z-index: 1; defines the 3D height as 1, left: 0; top: 0; indicates that it is located in the X position of the webpage = 0, y position = 0. Width: 100; Height: 100, coordsize = "100,100" based on the knowledge in the previous section about shape polygon, we know that its size is 100%, it also does not zoom in or out, and is equal to the coordsize virtual container space. Looking at the four child graphic tags it contains, there is no vector3d Output definition of position: absolute. However, the running effect proves that they inherit the position: absolute; definition of group1 and are also output in vector3d format. When you look at four children's left:; top:; width:; Height:;, you may ask whether the output distance from the page XY position, width, and height is normal, does it seem to have inherited ground1? Then you can compare the following example and find that this example inherits. <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>
How is it? In this example, the left of group1 is 200, and the top is 50. Compared with the first example, in this example, the page position X of all four child images is increased by 200, and the page position y is increased by 50. In example 1, left of group1 is 0, top is 0, that is, "parents" do not inherit "property" to "children "...... Now you suddenly realized that you learned to mark the group? Congratulations, in fact, the story of group "parents" and "parents" is just a little bit ....... Let's take a look at the next example. Isn't all the children magnified twice? <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 collection container-good assistant for dvml programming batch processing as for dvml programming, I will briefly introduce it here when I am not going to give a formal explanation, because group is a good assistant for batch processing graphics during dvml programming, dvml is the name I gave to the VML series programming. The full name is DHTML VML, and dvml is short for it. What is dvml programming? Because the content is complicated, I will not talk about it now. I will discuss it in detail in the dvml programming chapter later. I will only give a simple example of dvml to show you a little bit about what the program is. Smart people don't need to explain it. It also shows the convenience of group for batch processing graphics during programming. <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 = move all images to the left by me onclick = "group1.style. Left = parseint (group1.style. Left)-10">
<Input type = button value = Shift all images to the right by myself onclick = "group1.style. Left = parseint (group1.style. Left) + 10">
<Input type = button value = zoom in to all images by myself onclick = "group1.style. width = parseint (group1.style. width) + 10; group1.style. height = parseint (group1.style. height) + 10; ">
<Input type = button value = scale down all images by myself onclick = "group1.style. width = parseint (group1.style. width)-10; group1.style. height = parseint (group1.style. height)-10; ">
This is the program. This is a simple example of dvml programming. Without a group collection container, dvml programming can only perform tedious operations on graphics one by one. The power of VML won't let the above happen. When you learn dvml programming, don't forget to use the group collection container when appropriate, this can improve the program running efficiency, simplify the cumbersome dvml programming, and effectively implement batch processing graphics.
Original VML polar path Tutorial: Mu Yuanhua
Chapter 1 Section 17: vmlframe image reference ----1: vmlframe graphic reference-special attributes
| Attribute name | Default Value | Value Type/range | Purpose |
| SRC | # | Idstring | ID of the referenced Image |
| Clip | False | Boolean | Specifies whether to crop a large number of referenced images. |
| Size | 0, 0 | Vector2d | Set the cropping degree when clip is set to true. |
| Origin | 0, 0 | Vector2d | Unknown |
2: vmlframe graphic reference-reference on this page
Based on the shape and shapetype touch knowledge described in the previous chapter, you can define any shape in the shapetype touch, and then reference it with the shape. But there are always some shortcomings. Maybe someone will ask, can we store a commonly used oval circle, rect rectangle, curve, and so on as a template shape to hide and store them? And then reference it when needed?
The answer is yes-yes. Check the running effect of the example below and analyze the code carefully.
Vml1.vml file content can be written in this form
<XML>It is not necessary to use it. as a file suffix, you can use a TXT, htm, or other suffix as long as the content is in the above format. However, we recommend that you use VML for clear classification files. VML is the suffix of the VML image storage file.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
