Original VML polar path Tutorial: 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: Use left and top of CSS to define the absolute position of the Multi-edge type at the XY page Junction Point.
Step 2: 0, 0, 30,-40, 60, 2nd, 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, and-40 indicates that the first line is stretched down-40px, because it is a negative number, it is equivalent to stretching up to 40. Therefore, we can see that the value of the first multi-edge type is 0, 0, 30,-40, which only describes one line.
Step 2: 0, 0, 30,-40, 60, 4th, 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, it is equivalent to the Y height of the original Junction Point. Therefore, we can see that the value of the second multi-edge type is 0, 0, 30,-40, 60, 0, which only describes two lines.
Step 1: 0, 0, 30,-40, 60, 0, 0, the first 0 in the last 0, 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, so 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 "/>
