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
Level 2 mark the stroke border. shadow
VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 Section 18: Level 2 mark the stroke border
General attributes of the mark
In the past, we often talked about the common attributes of VML for level-1 tags such as oval, rect, and roundrect (just the learning rules of the "polar path, I will not use too many level-1 tags or level-2 tags when you are a "VML cainiao ). Most of the second-level tags are not supported. There is only one exception, such as Textbox content, which can be regarded as a level-1 tag and can be considered as a level-2 tag. HoweverIDThis general attribute is supported by all level 1 and level 2 tags.
2: stroke border-special attribute reference table
| Attribute name |
Default Value |
Value Type/range |
Purpose |
| On |
True |
Boolean |
Set whether the processing is effective |
| Weight |
1pt |
Number |
Describe the Border Width |
| Color |
Black |
Color |
Border Color Description |
| Opacity |
1.0 |
0.0-1.0 |
Description border transparency |
| Dashstyle |
Solid |
Solid, Dot, Dash, dashdot, longdash, longdashdot, longdashdotdot, vertex dot, mongodash, mongodashdot, and mongodashdotdot |
Describe the line style of the border |
| Filltype |
Solid |
Solid, tile, pattern, Frame |
Describe how to fill the border |
| SRC |
Null |
Urlstring |
When filltype! = Solid: Specifies the image address of the filled border. |
| Imagesize |
Auto |
Vector2d |
When filltype! = Solid, Description Image magnification |
| Imagealignshape |
True |
Boolean |
When filltype! = Solid indicates whether the image is centered and aligned |
| Color2 |
Null |
Color |
When filltype = pattern, describe the fusion background color of the image |
| Startarrow |
None |
None, block, classic, diamond, oval, open, Chevron, doublechevron |
Arrow style that describes the starting point of a line |
| Endarrow |
None |
None, block, classic, diamond, oval, open, chevron, doublechevron |
Arrow style that describes the end of a line |
| Startarrowwidth |
Medium |
Narrow, medium, wide |
When startarrow! = None, describe the width of the Start arrow |
| Startarrowlength |
Medium |
Short, medium, long |
When startarrow! = None, describe the height of the Start arrow |
| Endarrowwidth |
Medium |
Narrow, medium, wide |
When endarrow! = None, describe the width of the Start arrow |
| Endarrowlength |
Medium |
Short, medium, long |
When endarrow! = None, describe the height of the Start arrow |
| Miterlimit |
8.0 |
Number |
Specifies the thickness of the border joint position. |
| Joinstyle |
Round |
Round (rounded join), bevel (beveled join), miter (miter join) |
Describe the style of the border |
| Endcap |
Round |
Flat, square, round |
Description border end part |
3: start the second-level Mark course!
Learn from all previous chapters and start from this chapter, it means that you have a good understanding of VML and have mastered almost all of the VML level-1 labels. If you have carefully studied the previous content.
VML Level 2 tag, which can be understood as follows: "it is designed specifically for VML level-1 labeling and can be used to modify almost all shapes such as circles, rectangles, arcs, and curves drawn with VML level-1 labeling, from the beginning to the foot, from the border to the background, from the three-dimensional to the background image, from the path track to hypertext content, and so on .. The second-level mark can be used to package basic images into a variety of strange clothes. The second-level mark can be said to be a gorgeous dress with the first-level mark ".
However, I will not demonstrate and explain all the attributes of the second-level tag one by one, and I will not explain the previous basic knowledge (if you do not, now, let's go and read the course until we can understand what I have said in this chapter, I will not use words without explanation, such as the handover point, General attributes, special attributes, vector3d, dvml, coorsize, group, line, and curve ). It only provides common knowledge about the Secondary attribute and some useful, practical, useful, and abstract attribute demonstration examples, you can refer to the data provided in the table to manually change the example by marking the special attribute through XXX Level 2, in this way, you can understand and understand what the XX attribute is, how to use it, and how to use it in XX level-1 mark graphics.
4: compatibility issues with Level 2 tags
As you know, the second-level mark can process almost any part of the graph from scratch. However, if the image itself is "only headers and no feet", do you use the second-level mark that specifically handles the "foot" to process it? Needless to say, it is definitely invalid. What is "foot? For example, line only has the border concept but does not have the fill concept. That is to say, the stroke second-level mark can process it, but the fill (background fill) second-level mark cannot process it. In terms of image, it is only an image, and there is no concept of background filling, so fill cannot process it. Compared with line, oval, rect, and roundrect, the former supports fill filling because it has a background concept. However, they cannot use arrows. Otherwise, where do you say oval and rect are the starting points? Where is the endpoint? Where can I add an arrow to it? Line, arc, curve, polyline, and shape are different. They are composed of line classes, or they are essentially line lines. The concept of the starting and ending points of a wired entry is as follows, therefore, they support adding arrows at the start and end points. See the example of adding arrows to the graph below for comparison.
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: line style = "Z-INDEX: 1; LEFT: 225; POSITION: absolute; TOP: 110" from = "" to = "43.5pt, 8.25pt "stroked =" t "strokecolor =" black "strokeweight = ". 75pt ">
<V: stroke opacity = "1" startarrow = "none" endarrow = "classic"/>
</V: line>
<V: arc style = "Z-INDEX: 1; LEFT: 242; WIDTH: 61; POSITION: absolute; TOP: 169; HEIGHT: 71 "startangle =" 359 "endangle =" 119 "fillcolor =" white "stroked =" t "strokeweight =" 5 ">
<V: stroke color = "red" opacity = ". 5" startarrow = "oval" endarrow = "classic" endarrowwidth = "wide" endarrowlength = "long"/>
</V: arc>
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: oval style = "Z-INDEX: 1; LEFT: 330; WIDTH: 58; POSITION: absolute; TOP: 95; HEIGHT: 58">
<V: stroke opacity = "1" startarrow = "none" endarrow = "classic"/>
</V: oval>
<V: rect style = "Z-INDEX: 1; LEFT: 335; WIDTH: 53; POSITION: absolute; TOP: 177; HEIGHT: 56 "fillcolor =" white "stroked =" t "strokecolor =" black "strokeweight = ". 75pt ">
<V: stroke color = "red" opacity = ". 5" startarrow = "oval" endarrow = "classic" endarrowwidth = "wide" endarrowlength = "long"/>
</V: rect>
It turns out that oval and rect do not support arrows, But they support border color definition. 5: stroke border-wonderful instance I have made several abstract examples. The source code is analyzed by myself, and please modify it against the special Attribute Table (in fact, learning level 2 tag is learning attribute !), The issue of length is not explained in detail. The key to the properties involved by stroke is to learn and use them live, and it is not required to learn or remember all of them. However, we recommend that you learn the common attributes marked with red in the special attribute table, of course, I don't want to disagree. As long as you have a brain to install it ~
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: line style = "z-index: 1; LEFT: 256; POSITION: absolute; TOP: 232" from = "76.5" to =, -17.25 "stroked =" t "strokecolor =" black "strokeweight =" 3.75 ">
<V: stroke opacity = "1" startarrow = "oval" startarrowwidth = "wide" startarrowlength = "long" endarrow = "classic" endarrowwidth = "wide" endarrowlength = "long"/>
</V: line>
<V: line style = "z-index: 1; LEFT: 249; POSITION: absolute; TOP: 151" from = "76.5" to =, -17.25 "stroked =" t "strokecolor =" black "strokeweight =" 3.75 ">
<V: stroke opacity = "1" startarrow = "oval" startarrowwidth = "narrow" startarrowlength = "short" endarrow = "classic" endarrowwidth = "narrow" endarrowlength = "short"/>
</V: line>
<V: line style = "z-index: 1; LEFT: 252; POSITION: absolute; TOP: 190" from = "76.5" to =, -17.25 "stroked =" t "strokecolor =" black "strokeweight =" 3.75 "> <v: stroke opacity = "1" startarrow = "oval" startarrowwidth = "medium" startarrowlength = "medium" endarrow = "classic" endarrowwidth = "wide" endarrowlength = "long"/>
</V: line>
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: curve style = "z-index: 1; LEFT: 249; POSITION: absolute; TOP: 144" from = "32.25" control1 =, -15 "control2 =" 24.75, 24 "to =" 70.5, 0 "filled =" f "fillcolor =" white "stroked =" t "strokecolor =" # e725d6 "strokeweight = ". 75 ">
<V: stroke opacity = "1" startarrow = "none" startarrowwidth = "narrow" startarrowlength = "short" endarrow = "classic" endarrowwidth = "wide" endarrowlength = "long"/>
</V: curve>
<V: curve style = "Z-index: 1; left: 251; position: absolute; top: 187" from = "32.25" control1 =, -15 "control2 =" 24.75, 24 "to =" 70.5, 0 "filled =" F "fillcolor =" white "stroked =" T "strokecolor =" # e725d6 "strokeweight = ". 75 ">
<V: stroke opacity = "1" startarrow = "NONE" startarrowwidth = "narrow" startarrowlength = "short" endarrow = "classic" endarrowwidth = "wide" endarrowlength = "long" dashstyle = "Dash "/>
</V: curve>
<V: rect style = "Z-index: 1; left: 248; width: 69; position: absolute; top: 222; height: 51 "fillcolor =" white "stroked =" T "strokecolor =" # e725d6 "strokeweight = ". 75 ">
<V: stroke opacity = "1" dashstyle = "dot"/>
</V: rect>
<V: rect style = "Z-index: 1; left: 325; width: 69; position: absolute; top: 223; height: 51 "fillcolor =" white "stroked =" T "strokecolor =" # e725d6 "strokeweight = ". 75 ">
<V: stroke opacity = "1" dashstyle = "Dash"/>
</V: rect>
<V: rect style = "z-index: 1; LEFT: 402; WIDTH: 69; POSITION: absolute; TOP: 223; HEIGHT: 51 "fillcolor =" white "stroked =" t "strokecolor =" # e725d6 "strokeweight = ". 75 ">
<V: stroke opacity = "1" dashstyle = "longDashDotDot"/>
</V: rect>
<V: oval style = "z-index: 1; LEFT: 244; WIDTH: 61; POSITION: absolute; TOP: 292; HEIGHT: 58 "fillcolor =" white "stroked =" t "strokecolor =" # e725d6 "strokeweight =" 2.25 ">
<V: stroke opacity = "1" dashstyle = "mongodashdot"/>
</V: oval>
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: Image style = "z-index: 1; LEFT: 258; WIDTH: 100; POSITION: absolute; TOP: 136; HEIGHT: 100 "src =" shili/fyw1.jpg "bilevel =" f "stroked =" t "strokecolor =" # e725d6 "strokeweight =" 2.25 ">
<V: stroke opacity = "1" dashstyle = "mongodashdot"/>
</V: Image>
<V: roundrect style = "z-index: 1; LEFT: 329; WIDTH: 94; POSITION: absolute; TOP: 183; HEIGHT: 102 "arcsize =" 9830f "fillcolor =" white "stroked =" t "strokecolor =" # e725d6 "strokeweight =" 22.5 ">
<V: stroke opacity = "0.2"/>
</V: roundrect>
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY bgcolor = "# eeeeee">
<V: oval style = "z-index: 1; LEFT: 136; WIDTH: 193; POSITION: absolute; TOP: 115; HEIGHT: 185 "fillcolor =" yellow "stroked =" t "strokecolor =" # e725d6 "strokeweight =" 3.75 "> <v: stroke filltype = "frame" opacity = "1" src = "shili/fyw2.jpg"/>
</V: oval>
<V: oval style = "z-index: 1; LEFT: 356; WIDTH: 193; POSITION: absolute; TOP: 119; HEIGHT: 185 "fillcolor =" yellow "stroked =" t "strokecolor =" # e725d6 "strokeweight =" 18.75 ">
<V: stroke filltype = "frame" opacity = "39321f" src = "shili/haha.gif"/>
</V: oval>
<V: rect style = "Z-index: 1; left: 593; width: 131; position: absolute; top: 160; height: 127 "fillcolor =" white "stroked =" T "strokecolor =" black "strokeweight =" 30 "> <v: stroke filltype =" frame "opacity = ". 5 "src =" Shili/fyw1.jpg "/>
</V: rect>
<HTML xmlns: V> <style> V/: * {behavior: URL (# default # VML) ;}</style> <body bgcolor = "# eeeeee">
<V: rect style = "Z-index: 1; left: 262; width: 100; position: absolute; top: 147; height: 103 "fillcolor =" white "stroked =" T "strokecolor =" green "strokeweight =" 15 "> <V: stroke filltype = "pattern" opacity = "1" color2 = "red" src = "Shili/fyw1.jpg"/>
</V: rect>
<V: rect style = "Z-index: 1; left: 400; width: 100; position: absolute; top: 149; height: 103 "fillcolor =" white "stroked =" T "strokecolor =" white "strokeweight =" 15 "> <V: stroke filltype = "pattern" opacity = "1" color2 = "yellow" src = "Shili/fyw1.jpg" imagesize = "1, 1"/>
</V: rect>
<V: rect style = "z-index: 1; LEFT: 533; WIDTH: 100; POSITION: absolute; TOP: 151; HEIGHT: 103 "fillcolor =" white "stroked =" t "strokecolor =" blue "strokeweight =" 15 "> <v: stroke filltype = "pattern" opacity = "1" color2 = "lime" src = "shili/fyw1.jpg" imagealignshape = "f" imagesize = "1, 1"/>
</V: rect>
<V: rect style = "z-index: 1; LEFT: 679; WIDTH: 100; POSITION: absolute; TOP: 150; HEIGHT: 103 "fillcolor =" white "stroked =" t "strokecolor =" blue "strokeweight =" 15 ">
<V: stroke filltype = "tile" opacity = "1" color2 = "lime" src = "shili/fyw1.jpg" imagealignshape = "f" imagesize = "1, 1"/>
</V: rect>
VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 Section 19: shadow
1: Shadow shadow-special attribute reference table
| Attribute name |
Default Value |
Value Type/range |
Purpose |
| On |
True |
Boolean |
Set whether the processing is effective |
| Type |
Single |
Single, double, emboss, perspective |
Specifies the shadow effect. |
| Color |
Black |
Color |
Description of main shadow colors |
| Obscured |
False |
Boolean |
Suggest seeing through the image if it is not filled in shape |
| Opacity |
1.0 |
0.0-1.0 |
Description shadow transparency |
| Offset |
2pt, 2pt |
Vector2D |
Describe the XY offset of the shadow. |
| Color2 |
Gray |
Color |
When type! = Single, describe quadratic Projection Color |
| Offset2 |
0pt, 0pt |
Vector2D |
When type! = Single, describe the XY offset of quadratic projection |
| Origin |
0, 0 |
Vector2D |
When filltype! = Solid: Specifies the degree of transition between the shadow and the projection. |
| Matrix |
Null |
String |
When filltype! = Solid, describe the transformation of the dot matrix strength |
2: Shadow shadow-application highlights
Even the ultimate tutorial is nothing to say. It's up to you to analyze and research and modify your code to become proficient. It is the best way to learn from examples and attribute tables. In addition, this mark is very important. You must learn it with your own efforts!
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<V: oval style = "Z-INDEX: 3131; LEFT: 234px; WIDTH: 67px; POSITION: absolute; TOP: 142px; HEIGHT: 53px "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt ">
<V: shadow on = "t" color = "black" opacity = "52428f" offset = "1.5pt, 1.5pt"/>
</V: oval>
<V: rect style = "Z-INDEX: 3135; LEFT: 320px; WIDTH: 50px; POSITION: absolute; TOP: 145px; HEIGHT: 52px "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt ">
<V: shadow on = "t" color = "black" opacity = "52428f" offset = "3.75pt, 1.5pt"/>
</V: rect>
<V: roundrect style = "Z-INDEX: 3137; LEFT: 402px; WIDTH: 60px; POSITION: absolute; TOP: 139px; HEIGHT: 59px "arcsize =" 9830f "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt ">
<V: shadow on = "t" color = "red" opacity = "52428f" offset = "-3.75pt, 1.5pt"/>
</V: roundrect>
<V: line style = "Z-INDEX: 3139; LEFT: 303px; POSITION: absolute; TOP: 228px" from = "" to = "100.5pt ,-. 75pt "strokecolor =" black "strokeweight =" 5pt "> <v: shadow on =" t "color =" red "opacity =" 52428f "offset =" 3.75pt, 2.25pt "/>
</V: line>
<V: curve style = "Z-INDEX: 3148; LEFT: 452px; POSITION: absolute; TOP: 235px" from = "" control1 = "42pt, -51.75pt "control2 ="-4.5pt, 49.5pt "to =" 28.5pt,-4.5pt "filled =" f "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt ">
<V: shadow on = "t" color = "green" opacity = "52428f" offset = "1.5pt,. 75pt"/>
</V: curve>
<V: Image style = "Z-INDEX: 3161; LEFT: 509px; WIDTH: 67px; POSITION: absolute; TOP: 202px; HEIGHT: 68px "src =" shili/fyw1.jpg "bilevel =" f ">
<V: shadow on = "t" color = "yellow" opacity = "52428f" offset = "15pt,-15pt"/>
</V: Image>
<HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<V: oval style = "Z-INDEX: 3170; left: 303px; width: 121px; position: absolute; top: 139px; height: 101px "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt "> <v: Shadow on =" T "type =" double "color =" blue "opacity =" 52428f "offset =" 7.25pt, 7.25pt "/>
</V: oval>
<V: oval style = "Z-INDEX: 3170; left: 444px; width: 121px; position: absolute; top: 142px; height: 101px "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt "> <v: Shadow on =" T "type =" Perspective "color =" blue "opacity =" 26214f "Matrix =" 78643f "offset =" 7.25pt, 7.25pt "/>
</V: oval>
<V: oval style = "Z-INDEX: 2999; left: 505px; width: 96px; position: absolute; top: 203px; height: 110px "fillcolor =" yellow "strokecolor =" black "strokeweight = ". 75pt "/>
<HTML xmlns: V> <style> V/: * {behavior: URL (# default # VML) ;}</style> <body>
<V: oval style = "Z-INDEX: 3170; left: 303px; width: 121px; position: absolute; top: 139px; height: 101px "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt "> <v: Shadow on =" T "type =" double "color =" blue "opacity =" 52428f "offset =" 7.25pt, 7.25pt "/>
</V: oval>
<V: oval style = "Z-INDEX: 3170; left: 532px; width: 121px; position: absolute; top: 226px; height: 101px "fillcolor =" white "strokecolor =" black "strokeweight = ". 75pt ">
<V: Shadow on = "T" type = "double" color = "blue" opacity = "52428f" color2 = "green" offset = "2.25pt, 2.25pt "offset2 =" 4pt, 4pt "/>
</V: oval>
<V: oval style = "Z-INDEX: 3170; left: 526px; width: 121px; position: absolute; top: pixel; height: 101px "filled =" T "fillcolor =" red "strokecolor =" red "strokeweight = ". 75pt "> <v: Shadow on =" T "type =" double "color =" blue "opacity = ". 5 "color2 =" green "offset =" 22.25pt, 32.25pt "offset2 ="-22pt, 32pt "/>
</V: oval>
Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763241.html
