Navigation of this series of articles
VML polar path tutorial (1) Introduction to VML
VML polar path tutorial (2) getting started with VML
VML polar path tutorial (3) Marking practice and line
VML polar path tutorial (4) Oval circle rect rectangular
VML polar path tutorial (5) roundrect circle shape
VML polar path tutorial (6) image
VML polar path tutorial (7) polyline multi-side
VML polar path tutorial (8) shape multiple sides. shapetype template. Shape and curve
VML polar path tutorial (9) Background of background
VML polar path tutorial (10) group collection container. vmlframe graphic reference
VML polar path tutorial (11) 2-level mark stroke border, shadow
VML polar path tutorial (12) VML programming finale
Polyline multi-side
VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 Section 11: polyline multi-edge
1: polyline multi-edge-dedicated attributes
Attribute name |
Default Value |
Value Type/range |
Dhtml access |
Purpose |
Points |
0, 0 |
Vector2D |
Points. value |
Describes the shape of a polygon. |
2: polyline multi-edge instance
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: polyline style = "Z-INDEX: 1; LEFT: 71; POSITION: absolute; TOP: 225" points = ", 30, -40 "filled =" t "fillcolor =" white "/>
<V: polyline style = "Z-INDEX: 1; LEFT: 171; POSITION: absolute; TOP: 225" points = ", 30,-40, 60, 0 "filled =" t "fillcolor =" white "/>
<V: polyline style = "Z-INDEX: 1; LEFT: 271; POSITION: absolute; TOP: 225" points = ", 30,-40, 60, 0 "filled =" t "fillcolor =" white "/>
<V: polyline style = "Z-INDEX: 1; LEFT: 371; POSITION: absolute; TOP: 225" points = ", 30, 40, 60, 0, 0, 0 "filled =" f "strokecolor =" red "/>
Obviously, unlike oval and rect, The polyline multi-side type defines the size of the Multi-side type with CSS width and height. Instead, it draws a line segment through the points parameter to achieve any shape and a whole multi-side type. Maybe you can say that line marking can also form a multi-side model, but it is not a whole, while polyline is. This example is just the simplest triangle model. Learning polyline is mainly to understand the writing of points parameters. I will explain its function below.
Left: 271; top: 225 points = ", 30,-, 60, 0", how do you describe a triangle?
Step 2:First, the left and top of CSS are used to define the absolute position of the Multi-edge type at the XY page Junction Point.
Step 2:0, 0, 30,-40, 60, 0, 0. The first 0 of 0 represents the offset X junction point value, and the second represents the offset Y junction point value. Since we use CSS to define the absolute position of the correct shape, we use 0, 0 to indicate no offset (that is to say, this value is unnecessary, but it must be written to 0, 0)
Step 2:0, 0, 30,-40, 60, 0, 0, where 30,-40 30 indicates that the first line is stretched 30px to the right,-40 indicates that the first line is stretched downward-40px, because it is a negative number, so it is equivalent to stretching up to 40, so we can see that the first multi-edge type is 0, 0, 30,-40, which only describes one line.
Step 2:0, 0, 30,-40, 60, 0, 0, where 60, 0 indicates that the second line is added. It is stretched 60 Px to the right, and 0 indicates that the second line is stretched 0 PX down, because it is 0, this is equivalent to the Y height of the original Junction Point. Therefore, the value of the second multi-edge model is 0, 0, 30,-40, 60, 0, which only describes two lines.
Step 2:0, 0, 30,-40, 60, 0, 0, 0, the first 0 of the last 0, indicates that the third line is added. It is stretched 0 Px to the right, and the second 0 indicates that the third line is stretched 0 PX down, because they are all 0, it is equivalent to the XY of the original junction point, so we can see that the value of the third multi-edge type is 0, 0, 30,-40, 60, 0, 0, describes the three lines and the last 0, 0 value to make it return to the original path, forming a triangle
The final triangle is very simple because the-40 (up) is written as 40, turning it into a down extension.
As you can imagine, the 0, 0, 30,-40, 60, 0, 0 modes are actually x1, y1, x1 + n, y1 + n, x2 + n, y2 + n, x3 + n, y3 + n. When there are more lines, you can create more complex multi-edge models... In addition, filled = "f" of the third line uses a general attribute, indicating that the polygon does not use color filling.
For example:
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: polyline style = "Z-INDEX: 3081; LEFT: 181px; POSITION: absolute; TOP: 151px" points = ", 51.75pt, 0, 9.75pt, 38.25pt, 28.5pt, -27pt, 45pt, 41.25pt, 0, 0 "filled =" t "strokecolor =" blue "/>
<V: polyline style = "Z-INDEX: 3087; LEFT: 257px; POSITION: absolute; TOP: 155px" points = ", 18pt,-12.75pt, 36.75pt,-12.75pt, 48.75pt, 0, 48.75pt, 13.5pt, 27pt, 30.75pt, 6pt, 25.5pt, 0, 0 "strokeweight = ". 75pt "filled =" false "/>
<V: polyline style = "Z-INDEX: 3095; LEFT: 350px; POSITION: absolute; TOP: 169px" points = ", 23.25pt,-4.5pt, 58.5pt, 11.25pt, 255.25pt, 30.75pt, 78pt, 44.25pt, 87pt, large, 87.75pt,-6pt, 69pt,-18.75pt, 23.25pt,-large, 105pt,-32.25pt, 115.5pt,-12pt, 96.75pt, small, 94.5pt, 48pt, 93pt, 55.5pt, 56.25pt, 69.75pt, 26.25pt, 61.5pt, 16.5pt, 49.5pt, 9.75pt, expires, "filled =" t "strokeweight =" 2px "/>
<V: polyline style = "Z-INDEX: 3118; LEFT: 524px; POSITION: absolute; TOP: 185px" points = ", 43.5pt,-24.75pt, 42.75pt, 1.5pt, 0, 0 "filled =" t "fillcolor =" red "/>
Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763231.html