Using the shapetype Element

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> ; 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 -- > 

Here are the custom attributes of this element:

  • adj A comma-separated list of numbers that are "adjusting" parameters for the formulas that define the path of the shape

  • path The 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've already seen 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-3. 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-2. Commands for the path Attribute
Command Name Parameters Description
ae angleellipseto 6* center (x,y) size(w,h) start-angle, end-angle . Draws a segment of an ellipse.
al angleellipse 6* Same as angleellipseto , except that there is an implied move to the starting point of the segment.
ar arc 8* 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.
at arcto 8* 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.
c curveto 6* Draws a cubic B 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.
e end Ends the current set of subpaths.
l lineto 2* Draws a line from the current point to the given point.
m moveto 2 Begins a new subpath at the given coordinate.
nf nofill Ensures that the current set of subpaths will not be filled.
ns nostroke Ensures that the current set of subpaths will not be drawn ( stroked ).
qb quadraticbezier 2+2* (controlpoint(x,y ))*, end(x,y) . Defines one or more quadratic B zier curves with a set of control points and an end point.
qx ellipticalquadrantx 2* end(x,y) . Draws a quarter ellipse from the current point to the end point.
qy ellipticalquadranty 2* end(x,y) . Same as ellipticalquadrantx . except that the segment starts out vertical.
r rlineto 2* Draws a line from the current point to the given point.
t rmoveto 2* Starts a new subpath at the indicated coordinate.
v rcurveto 6* Creates a cubic B zier curve using the given coordinate relative to the current point.
wa clockwisearcto 8* left, top, right, bottom start(x,y) end(x,y) . Same as arcto , except that here the arc is drawn in a clockwise direction.
wr clockwisearc 8* left, top, right, bottom start(x,y) end(x,y) . Same as arc , except that here the arc is drawn in a clockwise direction.
x close Closes 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 result of this VML appears in Figure 19-22.

Figure 19-22. Using a VML text path.

graphics/19fig22.gif

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; 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 to blue:

Listing ch19_22.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 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> 


Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net