The Structured Graphics control provides client-side, vector-based graphics, rendered on the fly to add visual impact to your page. This gives you the advantage of low download overhead coupled with high performance on the client. This control renders the resulting vector shape as a windowless graphic, transparent to the background of the page, which can be programmatically manipulated by scaling, rotating, or translating methods.
You can use the Structured Graphics control to create simple primitives and complex polygon vector graphic shapes from a PARAM Tag syntax description. Or, you can use the File Syntax when the SourceURL property is set to read an external text file that contains the shape description.
For information on creating vector graphics via script, see the DrawingSurface topic in the DirectAnimation Programmer's Guide.
Use the Windows Metafile Converter (Wmfcnv.exe) included in the /BIN directory of the Internet Client SDK to convert existing Windows metafiles into Structured Graphic <PARAM> tags or shape description text files for use with the Structured Graphics control.
When rendering a shape, the Structured Graphics control will stop parsing the shape if it encounters invalid Param tag syntax. Some properties and methods are scriptable only. See the appropriate reference topic for syntax details.
Property Syntax
PARAM Tag Syntax <OBJECT ID=object STYLE="WIDTH:width; HEIGHT:height: Z-INDEX:z-index" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" > <PARAM NAME="PropertyName" VALUE="Value"> </OBJECT>
Script Syntax object.PropertyName = Value
Parameters
object | String identifying the Structured graphics object. |
width | Desired width for the Structured graphics drawing area (pixels or percentage of page width) |
height | Desired height for the Structured graphics drawing area (pixels or percentage of page height) |
z-index | Desired z-index value for the Structured graphics drawing area (integer) |
Property | One of the Structured Graphics properties in the list below. |
Value | Valid value for that property. |
Property | Description |
CoordinateSystem | Sets the coordinate system to use for the world |
DrawingSurface | Sets or returns the Microsoft® DirectAnimation drawing surface, the visible rendering of the control's contents for use (script only). |
ExtentHeight, ExtentWidth, ExtentLeft, ExtentTop Properties | Sets the height, width, left and top values of the shape (in pixels). |
HighQuality Property | Turns anti-aliasing on or off. |
Image Property | Fills the structured graphic shape with a DirectAnimation IDAImage (script only). |
Library | Returns the DirectAnimation Library reference (script only). |
MouseEventsEnabled | Sets or returns whether Mouse events are to be processed against the Structured Graphics object. |
PreserveAspectRatio Property | Sets or returns a value indicating if aspect ratio should be preserved when extents are set |
SourceURL | Enables the Structured Graphic control to use an external file as the shape primitive description. |
Transform | Transforms the object using a DirectAnimation IDATransform2 behavior (script only). |
Method PARAM Tag Syntax
<OBJECT ID=object STYLE="WIDTH:width; HEIGHT:height: Z-INDEX:z-index" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME="LINEnnnn" VALUE="method"> </OBJECT>
Parameters
object | String identifying the object. |
width | Desired width for the Structured graphics drawing area (pixels or percentage of page width) |
height | Desired height for the Structured graphics drawing area (pixels or percentage of page height) |
z-index | Desired z-index value for the Structured graphics drawing area (integer) |
nnnn | A sequence number for the method execution order. Must be in order starting with 0001. Skipped sequences halt execution. |
method | One of the elements in the list below. |
Method | Description |
Arc | Creates a single circular or elliptical arc. |
FillSpline | Creates a closed spline shape, defined by a series of points. |
Oval | Creates an ellipse. |
Pie | Creates an elliptical arc closed at the center of the bounding rectangle to form a wedge (pie) shape. |
Polygon | Creates a closed polygon. |
PolyLine | Creates a segmented line. |
PolySpline | Creates an open spline shape, defined by a series of points. |
Rect | Creates a rectangle. |
RoundRect | Creates a rounded rectangle. |
SetFillColor | Sets the foreground and background colors for graphic fills. |
SetFillStyle | Sets the type of fill. |
SetFont | Sets the font for the control. |
SetGradientFill | Specifies the start and end points for a gradient fill. |
SetHatchFill | Specifies whether the hatch fill is transparent. |
SetLineColor | Sets the line color for drawing graphics. |
SetLineStyle | Changes the line style for the current shape. |
SetGradientShape | Sets the shape of a gradient to be an outline of a polygon shape. |
SetTextureFill | Sets the texture source to be used to fill a structured graphics shape. |
Text | Creates a string with the current font and color. |
Method Script Syntax
The following methods are scriptable only, and use this syntax form:
object.MethodName(Parameters)
object | String identifying the structured graphics object. |
MethodName | One of the elements in the list below. |
Parameters | Valid parameter for that method. |
Clear | Clears the control. |
Rotate | Sets the rotation of the world. |
Scale | Sets the current scaling in the X, Y, Z axis for the world. |
SetIdentity | Clears any transforms, sets the shape to its original state. |
Transform4x4 | Sets scaling, rotating, and translation information all at once, using a transform matrix. |
Translate | Sets the X, Y, Z location of the world. |
Events | Description |
onclick | Occurs when the user has clicked the left mouse button on the structured graphic. |
ondblclick | Occurs when the user has double-clicked on the structured graphic. |
onmousedown | Occurs when the left button is pressed over the structured graphic. |
onmousemove | Occurs when the user moves the mouse pointer across the non-transparent area of the structured graphic. |
onmouseout | Occurs when the cursor leaves the non-transparent area of the structured graphic. |
onmouseover | Occurs when the mouse pointer has entered the non-transparent region of the structured graphic. |
onmouseup | Occurs when the user releases the mouse button while the mouse pointer is over the structured graphic. |
Sets the coordinate system to use for the world. Read-only at runtime.
PARAM Tag Syntax
<PARAM NAME = "CoordinateSystem" VALUE = "0 | 1">
Sets or returns the drawing surface, the visible rendering of the control's contents for use in script. For more information, see the DirectAnimation documentation.
DrawingSurface property example
Right click inside the frame and select View Source to see the HTML code for this example.
Sets the height, width, left and top values of the shape within the control's coordinate space (as defined by the WIDTH and HEIGHT parameters of the <OBJECT> tag's STYLE attribute).
PARAM Tag Syntax
<PARAM NAME="ExtentHeight" VALUE="height">
<PARAM NAME="ExtentWidth" VALUE="width">
<PARAM NAME="ExtentLeft" VALUE="left">
<PARAM NAME="ExtentTop" VALUE="top">
Top and left values can be set without setting height and width values, but height and width values can only be set if the top and left values are set. An example of the use of this property is as follows; if you set ExtentTop to 0 and ExtentLeft to 0, instead of drawing the shape from the center of the control's coordinate space (as defined in the STYLE attribute of the <OBJECT> tag), the shape will be drawn from the upper left hand corner of the coordinate space.
Turns anti-aliasing on (true) or off (false). Read/write at run time.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE=" HighQuality(
0 | 1
) ">
Script Syntax
object.HighQuality(
fFalse
)
Enabling this property slows down the rendering of the structured graphic. For optimal performance, turn this property off unless you're specifically using it.
Fills the structured graphic shape with an IDAImage. For more information, please see the DirectAnimation documentation.
Script Syntax
object.Image = IDAImage
Returns the reference to the DirectAnimation Library functions. For more information, see the DirectAnimation documentation.
Script Syntax
IDALibrary = object.Library
Sets whether or not the graphic should scale proportionally.
PARAM Tag Syntax
<PARAM NAME="PreserveAspectRatio" VALUE="0 | -1">
Script Syntax
object.PreserveAspectRatio = fFalse
This property is effective only if ExtentTop, ExtentLeft, ExtentWidth and ExtentHeight properties are set. An example of the use of this property is as follows; if you set the shape's width and height as a percentage of the page width and height (as one of the STYLE attributes of the <OBJECT> tag), set PreserveAspectRatio to True and the user resizes the browser window, the shape will scale itself proportionally based on the smaller of the new width or height values for the window. If PreserveAspectRatio is set to false, the shape will scale itself in relative to the new width and height of the window.
Enables the Structured Graphic control to use an external file as the vector shape description. You can use the Windows Metafile Converter (WMFCONV.EXE) to convert Windows metafiles into structured graphics shape description text files. Read-write at runtime.
PARAM Tag Syntax
<PARAM NAME="SourceURL" VALUE="URL">
Script Syntax
object.SourceURL = URL
This can be very useful in the case of creating a structured graphic animation. Using this property, you can write code that very rapidly calls different source URLs, making it seem as if the shape is changing over time in a manner that exceeds scale or rotation transformations.
SourceURL property example
Right click inside the frame and select View Source to see the HTML code for this example.ode.
Transforms the object using a IDATransform2 behavior. For more information, please see the DirectAnimation documentation.
Script Syntax
object.Transform = IDATransform2
Creates a single circular or elliptical arc.
PARAM Tag Syntax
<PARAM NAME = "Line0001" VALUE="Arc(
x,
y,
width,
height,
startAngle,
arcAngle,
rotation">
File Syntax
Arc(
x,
y,
width,
height,
startAngle,
arcAngle,
rotation
)
Arc Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Clears the control of its contents, resetting it to null.
Script Syntax
object.Clear
This method is useful for erasing the graphic before painting another in its place using the DrawingSurface property.
Creates a closed spline shape, defined by a series of points.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="FillSpline (
numpoints[action,
xPoint,
y Point],
rotation
) ">
File Syntax
FillSpline (
numpoints,
[action,
xPoint,
y Point],
rotation
)
Creates an ellipse that fits within the bounding rectangle specified by the x, y, width and height arguments.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="Oval(
x,
y,
width,
height,
rotation
) ">
File Syntax
Oval(
x,
y,
width,
height,
rotation
)
Polygon Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Creates a single elliptical arc filled with the current FillColor, resulting in a wedge-shaped (pie) figure.
The center of the pie shape is the center of a rectangle whose origin is (x, y) and whose size is specified by the width and height arguments. The two axes of the arc are given by the width and height arguments. The arc is drawn from startAngle to startAngle + arcAngle.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="Pie(
x,
y,
width,
height,
startAngle,
arcAngle,
rotation
) ">
File Syntax
Pie(
x,
y,
width,
height,
startAngle,
arcAngle,
rotation
)
This example draws a 22-degree pie shape.
<PARAM NAME="Line0004" VALUE="Pie(-75,-75, 150,150, 15,22, 0)">">
Pie Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Creates a closed polygon defined by a list of points, filled with the current FillColor.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="Polygon>(
nPoints,
x1,
y1,
x2,
y2,
x3,
y3 [,
x4,
y4 ...],
rotation
) ">
File Syntax
Polygon(
nPoints,
x1,
y1,
x2,
y2,
x3,
y3 [,
x4,
y4 ...],
rotation
)
If you don't want to close the polygon, use PolyLine.
This example creates an elongated hexagon.
<PARAM NAME="Line0005" VALUE="Polygon(6, 0,10, 10,10, 30,30, 30,40, 20,40, 0,20, 0)">
Polygon Method example
Right click inside the frame and select View Source to see the HTML code for this example.ce code.
Creates an open (nonfilled) line shape defined by a series of points.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="PolyLine(
nPoints,
x1,
y1,
x2,
y2 [,
x3,
y3 ...],
rotation
) ">
File Syntax
PolyLine(
nPoints,
x1,
y1,
x2,
y2 [,
x3,
y3 ...],
rotation
)
To create a closed polygon, use Polygon.
This example creates a stair-stepped line.
<PARAM NAME="Line0001" VALUE="PolyLine(7, 10,10, 30,10, 30,30, 50,30, 50,50, 70,50, 70,70, 0)">
PolyLine Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Creates a spline shape defined by a series of points, filled with the current FillColor.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="PolySpline (
nPoints,
[action,
x,
y Points],
rotation
) ">
File Syntax
PolySpline (
npoints,
[action,
xPoint,
yPoint],
rotation
)
Creates a rectangular shape filled with the current FillColor.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="Rect(
x,
y,
width,
height,
rotation
) ">
File Syntax
Rect(
x,
y,
width,
height,
rotation
)
Rect Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Rotates the shape along the X, Y, and Z axes.
Script Syntax
object.Rotate(
x-rotation,
y-rotation,
z-rotation
)
Rotate Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Creates a round-cornered rectangle filled with the current FillColor.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="RoundRect(
x,
y,
width,
height,
arcWidth,
arcHeight,
rotation
) ">
File Syntax
RoundRect(
x,
y,
width,
height,
arcWidth,
arcHeight,
rotation
)
RoundRect Method example
Right click inside the frame and select View Source to see the HTML code for this example.ode.
Sets the current scaling of the X, Y, and Z axes.
Script Syntax
object.Scale(
x-scale,
y-scale,
z-scale
)
Scale Method example
Right click inside the frame and select View Source to see the HTML code for this example.
Sets the color fill for the shape. Can be used to set foreground and background fills to different colors.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetFillColor(
rForeColor,
gForeColor,
bForeColor [,
rBackColor,
gBackColor,
bBackColor ]
) ">
File Syntax
SetFillColor(
rForeColor,
gForeColor,
bForeColor [,
rBackColor,
gBackColor,
bBackColor ]
)
This example sets the Fill Color to solid blue.
<PARAM NAME="Line0001" VALUE="SetFillColor(0,0,255)">
SetFillColor property example
Right click inside the frame and select View Source to see the HTML code for this example.
Sets the type for a fill.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetFillStyle(
type
) ">
File Syntax
SetFillStyle(
type
)
Value | Description |
0 | Null |
1 | Solid |
3 | Hatch horizontal |
4 | Hatch vertical |
5 | Hatch forward diagonal |
6 | Hatch backward diagonal |
7 | Hatch cross |
8 | Hatch diagonal cross |
9 | Horizontal gradient |
10 | Vertical gradient |
11 | Radial gradient |
12 | Line gradient |
13 | Rectangular gradient |
14 | Shaped gradient |
This example fills the shape with a solid fill.
<PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
Based on the value set for type, you can use the SetHatchFill or SetGradientFill methods to set properties for the selected fill type.
SetFillStyle property example
Right click inside the frame and select View Source to see the HTML code for this example.
Sets the font to be used for creating text. Used with the Text method.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetFont(
name,
height,
weight,
isItalic,
isUnderline,
isStrikethrough
) ">
File Syntax
SetFont(
name,
height,
weight,
isItalic,
isUnderline,
isStrikethrough
)
The following example sets the font attributes to be 80-point Verdana in a medium heavy bold, with no italic, underlined, or strikethrough characteristics.
<PARAM NAME="Line0004" VALUE="SetFont('Verdana',80,650,0,0,0)">
Specifies a rectangular area to fill with a gradient. This method can be used with any closed shape.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetGradientFill(
startX,
startY,
finishX,
finishY,
strength
) ">
File Syntax
SetGradientFill(
startX,
startY,
finishX,
finishY,
strength
)
Use the SetFillColor method to specify the foreground and background colors for the gradient fill.
Use this function only if you specified type as 11 for the SetFillStyle method.
The following example sets the gradient fill attributes for the shape to start at (25,15), to fill toward the upper-left corner of the page with a color intensity of 1.
<PARAM NAME="Line0005" VALUE="SetGradientFill(25,15,0,0,1)">
SetGradientFill property example
Right click inside the frame and select View Source to see the HTML code for this example.
Sets a gradient shape to that of a specified shape. It will use SetGradientColor to display the color ranges.
PARAM Tag Syntax
<PARAM NAME="Line0005" VALUE="SetGradientShape(
nPoints,
[x0,
y0 ,
x1 ,
y1 ,
xN ,
yN]
) >
File Syntax
SetGradientShape(
nPoints,
[x0,
y0,
x1 ,
y1 ,
xN ,
yN]
)
NOTE: The begin color is color1 and the end color is color2, as set in the SetFillColor method.
Specifies whether or not the hatch fill is transparent.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetHatchFill(
0 | 1
) ">
File Syntax
SetHatchFill(
fTransparent
)
Use this function only if you specified a value for type between 3 and 8 for the SetFillStyle method.
The following HTML Param tag sets the HatchFill attribute to visible.
<PARAM NAME="Line0005" VALUE="SetHatchFill(1)">
Sets the shape to its original settings.
Script Syntax
object.SetIdentity( )
Use SetIdentity to ensure that your shapes are at their initial position, size and orientation when your page loads by using the window_onload event.
This example demonstrates how window_onload is used to initialize the structured graphic SG1.
Sub window_onload() call SG1.SetIdentity() End Sub
When SetIdentity is next called, it clears all transforms and returns the shape to its initial settings.
Sets the line color for the shape outline.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetLineColor(
r,
g,
b
) ">
File Syntax
SetLineColor(
r,
g,
b
)
This code sets the line color to red.
<PARAM NAME="Line0001" VALUE="SetLineColor(255,0,0)">
Sets the line style of the shape.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="SetLineStyle(
style,
linewidth
) ">
File Syntax
SetLineStyle(
style,
linewidth
)
Value | Description |
0 | Null |
1 | Solid |
2 | Dash |
The following example sets the LineStyle attribute for the shape to a dashed line four pixels wide.
<PARAM NAME="Line0002" VALUE="SetLineStyle(2,4)">
Sets the texture or image source file to be used to fill the shape.
PARAM Tag Syntax
<PARAM NAME "Line0001" Value="SetTextureFill(
xpos,
ypos,
'ImageSourceURL',
0 | 1">
Script Syntax
object.SetTextureFill(
xpos,
ypos,
'ImageSourceURL',
0 | 1
)
SetTextureFill property example
Right click inside the frame and select View Source to see the HTML code for this example.
Creates a string using the current font and color.
PARAM Tag Syntax
<PARAM NAME="Line0001" VALUE="Text(
'str ',
x,
y,
rotation
) ">
File Syntax
Text(
'str ',
x,
y,
rotation
)
The text primitive draws from the origin point upwards, as opposed to the other primitives which draw from the origin point downwards.
The following code creates the word "Hello" angled 45 degrees from 0.
<OBJECT ID="String" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="WIDTH:250;HEIGHT:200"> <PARAM NAME="Line0001" VALUE="SetFillColor(0,0,255)"> <PARAM NAME="Line0002" VALUE="SetFont('Verdana', 75, 400, 0, 0, 0)"> <PARAM NAME="Line0003" VALUE="Text('Hello', 0, 0, 45)"> </OBJECT>
Sets scaling, rotating, and translation information all at once, using a transform matrix.
Script Syntax
object.Transform4x4(
transform-matrix
)
The 4x4 matrix with ones on the diagonal is the default setting.
The following example doubles the size of the shape in two dimensions:
Sets the X, Y, and Z coordinates for the shape's origin.
Script Syntax
object.Translate(
x-coordinate,
y-coordinate,
z-coordinate
)
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.