Using Predefined Shapes

Quite 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> Element

The <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.

graphics/19fig03.gif

The <line> Element

You 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:

from The starting point of the line. Specified using Vector2D format, like this: "100 100" .
to The ending point of the line. Specified using Vector2D format, like this: "100 100" .

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.

graphics/19fig04.gif

The <oval> Element

You 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.

graphics/19fig05.gif

The <polyline> Element

You 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.

graphics/19fig06.gif

The <curve> Element

You 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:

from The starting point of the line in the coordinate space of the parent element. Specified using Vector2D format, like this: "100 100" .
control1 The first control point for the curve. Specified using Vector2D format, like this: "100 100" .
control2 The second control point for the curve. Specified using Vector2D format, like this: "100 100" .
to The ending point of the line in the coordinate space of the parent element. Specified using Vector2D format, like this: "100 100" .

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.

graphics/19fig07.gif

The <arc> Element

You 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:

startangle Specifies the angle where the arc starts
endangle Specifies the angle where the arc ends

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.

graphics/19fig08.gif