Using Predefined ShapesQuite a few predefined shapes exist in VML, and using them can save you a lot of effort. In this section, I'll take a look at how to draw graphics using these elements. The <rect> ElementThe <rect> element just draws rectangles. This element supports both the coreattrs and shapeattrs attributes; here is its XML template showing the default values for those attributes: <rect id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" /> Here's an example; in this case, I'll draw a rectangle that will be red with a green border of 4 points width: Listing ch19_03.html<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Rectangles </H1> <v:rect style='width:200pt;height:100pt' fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML> You can see the result in Figure 19-3. Figure 19-3. Using the <rect> element.
The <line> ElementYou use the <line> element to create a straight line. Here are the attributes of this element: <!attlist line %coreattrs; %shapeattrs; from cdata #implied to cdata #implied > Here are the two attributes specific to the <line> element:
And here's the XML template for this element: <line from="0 0" to="10 10" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" /> Here's an example; in this case, I'm drawing a thick blue line from the pixel coordinates (20, 20) to (400, 100): Listing ch19_04.html<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Lines </H1> <v:line from="20px,20px" to="400px,100px" strokecolor="blue" strokeweight="4pt"> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-4. Figure 19-4. Using the <line> element.
The <oval> ElementYou use the <oval> element to draw ovals and circles. This element supports the coreattrs and shapeattrs attributes. Here is the <oval> element's XML template: <oval position="0 0" size="100 100" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" /> Here's an example in which I'm drawing a blue oval. As with other elements, you can specify the size of the oval using the CSS style attribute: Listing ch19_05.html<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Ovals </H1> <v:oval style='width:200pt;height:100pt' fillcolor="blue" /> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-5. Figure 19-5. Using the <oval> element.
The <polyline> ElementYou can use the <polyline> element to define shapes that are created from connected line segments. Here's the attribute list for this element: <!attlist polyline %coreattrs; %shapeattrs; points cdata #implied > The points attribute is a string that defines the polyline shape to draw using pairs of values that specify points, such as "0 0 10 10 40 40" . Here is the XML template for this element: <polyline points="0 0 10 10 20 0" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" /> For example, to draw a polyline shape, here's some VML: Listing ch19_06.html<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Polylines </H1> <v:polyline points="0pt,0pt,90pt,-9pt,180pt,60pt,0pt,20pt -180pt,60pt,-90pt,-9pt,0pt,0pt" strokecolor="red" strokeweight="2pt"/> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-6. Figure 19-6. Using the <polyline> element.
The <curve> ElementYou can use the <curve> element to draw a cubic B zier curve. Here is the attribute list of this element: <!attlist curve %coreattrs; %shapeattrs; from cdata #implied control1 cdata #implied control2 cdata #implied to cdata #implied > Here are the custom attributes for this element:
The control points let you specify the bounding rectangle for the curve and thus specify its shape. Here is this element's XML template: <curve from="0 0" control1="10 10" control2="20 0" to="10 10" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" /> For example, I'll draw a curve using this VML: Listing ch19_07.html<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Curves </H1> <v:curve style='position:absolute' from="-100pt,0" control1="100pt,100pt" control2="200pt,100pt" to="100pt,0" strokecolor="blue" strokeweight="4pt"/> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-7. Figure 19-7. Using the <curve> element.
The <arc> ElementYou can use the <arc> element to draw an arc. The arc is defined by the intersection of the oval with the start and end radius vectors given by angles. Here is the attribute list of this element: <!attlist arc %coreattrs; %shapeattrs; startangle cdata #implied endangle cdata #implied > Here are the custom attributes for this element:
Here is the XML template for this element: <arc startangle="0" endangle="90" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" /> For example, here's how to take an arc from an oval, extending from 0 ° to 160 °: Listing ch19_08.html<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Arcs </H1> <v:arc style='width:200pt;height:100pt' startangle="0" endangle="160" strokecolor="blue" strokeweight="4pt"/> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-8. Figure 19-8. Using the <arc> element.
|