VML programming-polyline multi-edge "VML polar path tutorial" Original: Mu Yuanhua

Source: Internet
Author: User
Tags polyline
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 "/>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.