Using the <shapetype> Element

You can parameterize the creation of shapes with the <shapetype> element. The <shapetype> element defines a shape type, and you can instantiate shapes of that type. You create a shape type and give it a name with the ID attribute of <shapetype>, and you use that shape type with the <shape> element's type attribute.

Here's the attribute list of the <shapetype> element:

<!attlist shapetype %coreattrs; %shapeattrs;
adj cdata #implied -- list of adjust values for parameterized paths --
path cdata #implied -- string with command set describing a path --
>

These are the custom attributes of this element:

AttributeDescription
adjA comma-separated list of numbers that are "adjusting" parameters for the formulas that define the path of the shape
pathThe path that defines the shape; a string containing the commands that define the path

Here is the <shapetype> element's XML template:

<shapetype
adj=null
path=null
opacity="100%"
chromakey="none"
stroke="true"
strokecolor="black"
strokeweight="0.75pt"
fill="true"
fillcolor="white"
print="true"
id=null
class=null
style='visibility: visible'
title=null
href=null
target=null
alt=null
coordsize="1000, 1000"
coordorigin="0, 0"
wrapcoords=null
/>

We saw an example using the <shapetype> element earlier in this chapter. In that example, the shape was defined with the path attribute, like this:

<v:shapetype id="Valentine" fillcolor="red"
    strokecolor="red" coordsize="21600,21600"
    path="m10860,2187c10451,1746,9529,1018,9015,730,
    7865,152,6685,,5415,,4175, 152,2995,575,1967,
    1305,1150,2187,575,3222,242,4220,,5410,242,6560,
    575,7597l10860, 21600,20995,7597c21480,6560,
    21600,5410,21480,4220,21115,3222,20420,2187,19632,
    1305,18575,575,17425,152,16275,,15005,,13735,152,
    12705,730,12176,1018,11254,1746, 10860,2187xe">
</v:shapetype>

The path defined here defines the shape. Specifying a path in the <shapetype> element is a little involved; you specify pairs of points along the path and use commands such as m (start a path), x (close the path), e (end the path), and so on. You can find the available commands in Table 19.5. This table also indicates how many parameters each command takes, using DTD notation; for example, 2* indicates that the command takes pairs of parameters. You can also skip any values that are zero when specifying points, so the point specification 16275,,15005,,13735,152 is the same as 16275,0,15005,0,13735,152.

Table 19.5. Commands for the path Attribute
CommandNameParametersDescription
aeangleellipseto6*center (x,y), size (w,h), start-angle, end-angle. Draws a segment of an ellipse.
alangleellipse6*Same as angleellipseto, except that there is an implied move to the starting point of the segment.
ararc8*left, top, right, bottom, start (x,y), end (x,y). Same as arcto, except that a new subpath is started by an implied move to the start point.
atarcto8*left, top, right, bottom, start (x,y), end (x,y). The first four values define the bounding box of an ellipse, and the second four define two radial vectors. This command draws a segment of the ellipse, starting at the angle defined by the start radius vector and ending at the angle defined by the end vector.
ccurveto6*Draws a cubic be`zier curve from the current point to the coordinate given by the final two parameters. The control points are given by the first four parameters.
eend0End of the current set of subpaths.
llineto2*Draws a line from the current point to the given point.
mmoveto2Begins a new subpath at the given coordinate.
nfnofill0Ensures that the current set of subpaths will not be filled.
nsnostroke0Ensures that the current set of subpaths will not be drawn (stroked).
qbquadraticbezier2+2*(controlpoint (x,y))*, end (x,y) Defines one or more quadratic be`zier curves with a set of control points and an endpoint.
qxellipticalqaudrantx2*end (x,y). Draws a quarter ellipse from the current point to the endpoint.
qyellipticalquadranty2*end (x,y). Same as ellipticalquadrantx, except that the segment starts out vertical.
rrlineto2*Draws a line from the current point to the given point.
trmoveto2*Starts a new subpath at the indicated coordinate.
vrcurveto6*Creates a cubic be`zier curve using the given coordinate relative to the current point.
waclockwisearcto8*left, top, right, bottom start (x,y), end (x,y). Same as arcto, except that here the arc is drawn in a clockwise direction.
wrclockwisearc8*left, top, right, bottom start (x,y), end (x,y). Same as arc, except here the arc is drawn in a clockwise direction.
xclose0Closes the current subpath. Draws a straight line from the current point to the original moveto point.

Here's how you can use this <shapetype> element to create a shape as we've done earlier in the chapter:

<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 Shapes
            </H1>
            <v:shapetype id="Valentine" fillcolor="red"
                strokecolor="red" coordsize="21600,21600"
                path="m10860,2187c10451,1746,9529,1018,9015,730,
                7865,152,6685,,5415,,4175, 152,2995,575,1967,
                1305,1150,2187,575,3222,242,4220,,5410,242,6560,
                575,7597l10860, 21600,20995,7597c21480,6560,
                21600,5410,21480,4220,21115,3222,20420,2187,19632,
                1305,18575,575,17425,152,16275,,15005,,13735,152,
                12705,730,12176,1018,11254,1746, 10860,2187xe">
            </v:shapetype>
            <v:shape type="#Valentine" style='width:200;height:160;'/>
        </CENTER>
    </BODY>
</HTML>

The results of this VML appear earlier in Figure 19.2.

You can list properties for the shape in the <shapetype> element, as in this example, which assigns a value to the fillcolor property. However, if you want to override those properties, you can do so; just specify new values in the <shape> element when you instantiate the shape. For example, here's how I turn the heart this VML draws blue:

<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 Shapes
            </H1>
            <v:shapetype id="Valentine" fillcolor="red"
                strokecolor="red" coordsize="21600,21600"
                path="m10860,2187c10451,1746,9529,1018,9015,730,
                7865,152,6685,,5415,,4175, 152,2995,575,1967,
                1305,1150,2187,575,3222,242,4220,,5410,242,6560,
                575,7597l10860, 21600,20995,7597c21480,6560,
                21600,5410,21480,4220,21115,3222,20420,2187,19632,
                1305,18575,575,17425,152,16275,,15005,,13735,152,
                12705,730,12176,1018,11254,1746, 10860,2187xe">
            </v:shapetype>
            <v:shape type="#Valentine" fillcolor="blue"
                style='width:200;height:160;'/>
        </CENTER>
    </BODY>
</HTML>

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

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