Using Predefined Shapes

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Using Predefined Shapes

There are quite a few predefined shapes 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's red with a green border of 4 points wide:

<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 results in Figure 19.3.

Figure 19.3. Using the `<rect>` element.

The <roundrect> Element

You can use the <roundrect> element to draw a rectangle with rounded corners. This element supports the coreattrs and shapeattrs attributes, along with one additional attribute, arcsize:

<!attlist roundrect %coreattrs; %shapeattrs;
arcsize cdata #implied -- size of arc on corners of rectangle --
>

The arcsize attribute defines the rounded corners as a percentage of half the smaller dimension of the rectangle. Here's the XML template for this element:

<roundrect
arcsize="0.2"
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"
/>

As an example, I'll convert the rectangle in the previous example to a rounded rectangle with rounded corners 20% of half the smaller dimension of the rectangle. To do that, you specify an arcsize of "0.2":

<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 Rounded Rectangles
            </H1>
            <v:roundrect style="width:200pt;height:100pt"
                arcsize="0.2" fillcolor="red"
                strokecolor="green" strokeweight="4pt"/>
        </CENTER>
    </BODY>
</HTML>

You can see the results of this VML in Figure 19.4.

Figure 19.4. Using the `<roundrect>` element.

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
>

These are the two attributes specific to the <line> element:

Attribute	Description
`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):

<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 results of this VML in Figure 19.5.

Figure 19.5. Using the `<line>` element.

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 where I'm drawing a blue oval; as with other elements, you can specify the size of the oval using the CSS style attribute:

<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 results of this VML in Figure 19.6.

Figure 19.6. Using the `<oval>` element.

The <polyline> Element

You can use the <polyline> element to define shapes that are created from connected line segments. You use this element to draw your own shapes. 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:

<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 results of this VML in Figure 19.7.

Figure 19.7. Using the `<polyline>` element.

The <curve> Element

You can use the <curve> element to draw a cubic be`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
>

These are the custom attributes for this element:

Attribute	Description
`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 so 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:

<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 results of this VML in Figure 19.8.

Figure 19.8. Using the `<curve>` element.

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
>

These are the custom attributes for this element:

Attribute	Description
`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°:

<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 results of this VML in Figure 19.9.

Figure 19.9. Using the `<arc>` element.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Using Predefined Shapes

Create new playlist

Sign In

Sign Up

Using Predefined Shapes

The <rect> Element

Figure 19.3. Using the <rect> element.

The <roundrect> Element

Figure 19.4. Using the <roundrect> element.

The <line> Element

Figure 19.5. Using the <line> element.

The <oval> Element

Figure 19.6. Using the <oval> element.

The <polyline> Element

Figure 19.7. Using the <polyline> element.

The <curve> Element

Figure 19.8. Using the <curve> element.

The <arc> Element

Figure 19.9. Using the <arc> element.

Table of Contents for
Using Predefined Shapes

Figure 19.3. Using the `<rect>` element.

Figure 19.4. Using the `<roundrect>` element.

Figure 19.5. Using the `<line>` element.

Figure 19.6. Using the `<oval>` element.

Figure 19.7. Using the `<polyline>` element.

Figure 19.8. Using the `<curve>` element.

Figure 19.9. Using the `<arc>` element.