Structured Graphics Control


		Index Topic Contents
	Previous Topic: Sprite Control Next Topic: MouseEventsEnabled Property and Mouse Events

Structured Graphics Control

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 Name of 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 control 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 DAImage (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 DATransform2 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-, and z-axes 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-, and z-coordinates of the origin.

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.

CoordinateSystem Property
Structured Graphics Control
Sets the coordinate system to use for the world. Read-only at runtime.

PARAM Tag Syntax

<PARAM NAME="CoordinateSystem" VALUE="0 | 1">
Parameters

0 | 1
Sets the world's rotation. Value can be Windows (0), where y-axis values start at the top of the page and increase downward, or Cartesian (1), where y-axis values start at the bottom of the page and increase upward.

DrawingSurface Property
Structured Graphics Control
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 choose View Source to see the HTML code for this example.

ExtentHeight, ExtentWidth, ExtentLeft, ExtentTop Properties
Structured Graphics Control
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">
Parameters

height
The height of the shape (in pixels).
width '
The width of the shape (in pixels).
left
The left edge of the shape (in pixels).
top
The top edge of the shape (in pixels).

Remarks

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.
HighQuality Property
Structured Graphics Control
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
  )
Parameters

0 | 1 , fFalse
Boolean flag that turns anti-aliasing on or off for the structured graphic, default is False. In HTML Param tags, the possible values are 0 (False) or nonzero (True). In script, the flag can support either 0 or False, 1 (a nonzero value) or True.

Remarks

Enabling this property slows down the rendering of the structured graphic. For optimal performance, turn this property off unless you're specifically using it.
Image Property
Structured Graphics Control
Fills the structured graphic shape with a DAImage.

Script Syntax

object.Image=DAImage
Parameters

object
The name of the structured graphics object, as defined in the PARAM tag.
DAImage
The DAImage object used to fill the shape.

Library Property
Structured Graphics Control
Retrieves a DAStatics object that gives the control access to the DirectAnimation library functions and properties.

Script Syntax

lib=object.Library
Parameters

lib
A DAStatics object.
object
Name of the structured graphics object.

Remarks

The following JScript code shows how to use this property:
mySG.Library=DAControl.PixelLibrary;
PreserveAspectRatio Property
Structured Graphics Control
Sets whether or not the graphic should scale proportionally.

PARAM Tag Syntax

<PARAM NAME="PreserveAspectRatio" VALUE="0 | -1">

Script Syntax

object.PreserveAspectRatio=fFalse
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.
0 | -1 , fFalse
Boolean flag that sets whether or not the aspect ratio should be preserved. Default is False.

Remarks

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.
SourceURL Property
Structured Graphics Control
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
Parameters

URL
String value, describing the location of the specified shape primitive description file. Can be an http://, file://\\ or relative path. Default is null.

Remarks

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 choose View Source to see the HTML code for this example.

Transform Property
Structured Graphics Control
Transforms the object using a DATransform2 behavior.

Script Syntax

object.Transform=DATransform2
Parameters

object
The name of the structured graphics object, as defined in the PARAM tag.
DATransform2
A DATransform2 behavior.

Arc Method
Structured Graphics Control
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
  )
Parameters

x, y
The center of the arc.
width
The width of the rectangle containing the arc.
height
The height of the rectangle containing the arc.
startAngle
The beginning angle, in degrees.
arcAngle
The angle of the arc, relative to startAngle, in degrees.
rotation
The degree of rotation from the 0 degrees position.

Arc Method example
Right click inside the frame and select View Source to see the HTML code for this example.

Clear Method
Structured Graphics Control
Clears the control of its contents, resetting it to null.

Script Syntax
object.Clear
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.

Remarks

This method is useful for erasing the graphic before painting another in its place using the DrawingSurface property.
FillSpline Method
Structured Graphics Control
Creates a closed spline shape, defined by a series of points.

PARAM Tag Syntax

<PARAM NAME="Line0001" VALUE="FillSpline (
  numpoints[action,
  xPoint,
  yPoint],
  rotation
  ) ">

File Syntax

FillSpline (
  numpoints,
  [action,
  xPoint,
  yPoint],
  rotation
  )
Parameters

numpoints
Number of points in the spline
Action
An integer that defines what the spline does at the x, y coordinate. Can be one of the following:
0 - Move to: Move to the x, y coordinate.
1 - LineTo: draw a line from the previous x, y coordinate to the current one.
2 - BezierTo: Draw a bezier line from the previous coordinates to the current one.
3 - LineToClose: Close the line to the first coordinate.
4 - BezierClose: Close the bezier to the first coordinate.
xPoint
The x-coordinate for the spline control point.
yPoint
The y-coordinate for the spline control point.
rotation
Degree of rotation.

Oval Method
Structured Graphics Control
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
  )
Parameters

x, y
The x- and y-coordinates for the start of the bounding rectangle.
width
The width of the rectangle.
height
The height of the rectangle.
rotation
The degree of rotation from the 0 degrees position.

Oval Method example
Right-click inside the frame and choose View Source to see the HTML code for this example.

Pie Method
Structured Graphics Control
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
  )
Parameters

x
The x-coordinate.
y
The Y coordinate.
width
The width of the rectangle.
height
The height of the rectangle.
startAngle
The beginning angle, in degrees.
arcAngle
The angle of the arc, relative to startAngle, in degrees.
rotation
The degree of rotation from the 0 degrees position.

Remarks

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.

Polygon Method
Structured Graphics Control
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
  )
Parameters

nPoints
The total number of points.
x1, y1
The first point defining the shape.
x2, y2
The second point defining the shape.
x3, y3
The third point defining the shape.
x4, y4
Additional points that define the shape.
rotation
The degree of rotation from the 0 degrees position.

Remarks

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 choose View Source to see the HTML code for this example.

PolyLine Method
Structured Graphics Control
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
  )
Parameters

nPoints
The total number of points.
x1, y1
The first point defining the line.
x2, y2
The second point defining the line.
x3, y3
Additional points that define the line.
rotation
The degree of rotation from the 0 degrees position.

Remarks

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.

PolySpline Method
Structured Graphics Control
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,
  xPoint,
  yPoint],
  rotation
  ) ">

File Syntax

PolySpline (
  npoints,
  [action,
  xPoint,
  yPoint],
  rotation
  )
Parameters

nPoints
The total number of points.
Action
An integer that defines what the spline does at the x, y coordinate. Can be one of the following:
0 - Move to: Move to the x, y coordinate.
1 - LineTo: draw a line from the previous x, y coordinate to the current one.
2 - BezierTo: Draw a bezier line from the previous coordinates to the current one.
3 - LineToClose: Close the line to the first coordinate.
4 - BezierClose: Close the bezier to the first coordinate.
xPoint
The x-coordinate for the spline control point.
yPoint
The y-coordinate for the spline control point.
rotation
Degree of rotation from the 0 degrees position.

Rect Method
Structured Graphics Control
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
  )
Parameters

x
The left edge of the rectangle.
y
The top edge of the rectangle.
width
The width of the rectangle.
height
The height of the rectangle.
rotation
The degree of rotation from the 0 degrees position.

Rect Method example
Right click inside the frame and select View Source to see the HTML code for this example.

Rotate Method
Structured Graphics Control
Rotates the shape along the x-, y-, and z-axes.

Script Syntax

object.Rotate(
  x-rotation,
  y-rotation,
  z-rotation
  )
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.
x-rotation, y-rotation, z-rotation
Sets the new x, y, and z rotation values, in degrees.

Rotate Method example
Right click inside the frame and select View Source to see the HTML code for this example.

RoundRect Method
Structured Graphics Control
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
  )
Parameters

x
The left edge of the rectangle.
y
The top edge of the rectangle.
width
The width of the rectangle.
height
The height of the rectangle.
arcWidth
The horizontal diameter of the arc at the four corners.
arcHeight
The vertical diameter of the arc at the four corners.
rotation
The degree of rotation from the 0 degrees position.

RoundRect Method example
Right click inside the frame and select View Source to see the HTML code for this example.

Scale Method
Structured Graphics Control
Sets the current scaling of the x-, y-, and z-axes.

Script Syntax

object.Scale(
  x-scale,
  y-scale,
  z-scale
  )
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.
x-scale, y-scale, z-scale
Sets the new scaling for the x-, y-, and z-axes. The scaling is multiplicative, based on the current values for the shape, with the current size equivalent to 1. For example, scaling the shape by 0.9 sets the shape to 90% of its former size.

Scale Method example
Right click inside the frame and select View Source to see the HTML code for this example.

SetFillColor Method
Structured Graphics Control
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 ]
  )
Parameters

rForeColor, gForeColor, bForeColor
The red, green, and blue values for the foreground color. Each value is an integer in the range 0–255.
rBackColor, gBackColor, bBackColor
Optional. The red, green, and blue values for the background color. Each value is an integer in the range 0–255.

Remarks

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.

SetFillStyle Method
Structured Graphics Control
Sets the type for a fill.

PARAM Tag Syntax

<PARAM NAME="Line0001" VALUE="SetFillStyle(
  type
  ) ">

File Syntax

SetFillStyle(
  type
  )
Parameters

type
Sets the fill type where type is one of the following values.

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

Remarks

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.

SetFont Method
Structured Graphics Control
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
  )
Parameters

name
The new font name.
height
The size of the font, in points. If font height is set as negative value, font will be drawn upside down and backwards.
weight
The weight of the font. An integer in the range 0–700, where a value of 300 is normal weight, and a value of 700 is heavy bold.
isItalic, isUnderline, isStrikethrough
Values specifying whether the font is italic, underlined, or strikethrough. If True, the font has the corresponding attribute; if False, the font does not.

Remarks

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)">
SetGradientFill Method
Structured Graphics Control
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
  )
Parameters

startX, startY
The x and y positions, in pixels, for the start point of the rectangle that holds the gradient. These positions are relative to the upper-left corner of the page.
finishX, finishY
The x and y positions, in pixels, for the end point of the rectangle that holds the gradient. These positions are relative to the upper-left corner of the page.
strength
Sets the intensity of the first color.

Remarks

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.

SetGradientShape Method
Structured Graphics Control
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]
  )
Parameters

nPoints
The total number of points.
x0, y0 , x1, y1 , xN , yN
The x- and y-coordinate pairs.

Remarks

NOTE: The begin color is color1 and the end color is color2, as set in the SetFillColor method.
SetHatchFill Method
Structured Graphics Control
Specifies whether or not the hatch fill is transparent.

PARAM Tag Syntax

<PARAM NAME="Line0001" VALUE="SetHatchFill(
  0 | 1
  ) ">

File Syntax

SetHatchFill(
  fTransparent
  )
Parameters

o | 1 / fTransparent
If False (0), the hatch fill is not transparent. If True (1 or nonzero value), the default, the hatch fill is transparent. Default is False.

Remarks

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)">
SetIdentity Method
Structured Graphics Control
Sets the shape to its original settings.

Script Syntax

object.SetIdentity( )
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.

Remarks

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.
SetLineColor Method
Structured Graphics Control
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
  )
Parameters

r
The red value for the color. Integer in the range 0–255.
g
The green value for the color. Integer in the range 0–255.
b
The blue value for the color. Integer in the range 0–255.

Remarks

This code sets the line color to red.
<PARAM NAME="Line0001" VALUE="SetLineColor(255,0,0)">
SetLineStyle Method
Structured Graphics Control
Sets the line style of the shape.

PARAM Tag Syntax

<PARAM NAME="Line0001" VALUE="SetLineStyle(
  style,
  linewidth
  ) ">

File Syntax

SetLineStyle(
  style,
  linewidth
  )
Parameters

style
Sets the line style for the current shape type using any of the following values.

Value Description
0 Null
1 Solid
2 Dash

linewidth
integer value, sets the line width in pixels.

Remarks

The following example sets the LineStyle attribute for the shape to a dashed line four pixels wide.
<PARAM NAME="Line0002" VALUE="SetLineStyle(2,4)">
SetTextureFill Method
Structured Graphics Control
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
  )
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.
xpos, ypos
Sets the x- and y-coordinates for the origin point of the texture, in pixels.
ImageSourceURL
Sets the source image URL.
0 | 1
Sets the type of texture fill, whether scaled (0) or tiled (1) within the bounds of the shape.

SetTextureFill property example
Right click inside the frame and select View Source to see the HTML code for this example.

Text Method
Structured Graphics Control
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
  )
Parameters

str
The string to be drawn.
x, y
The position for the baseline of the first character.
rotation
The degree of rotation from the 0 degrees position.

Remarks

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>
Transform4x4 Method
Structured Graphics Control
Sets scaling, rotating, and translation information all at once, using a transform matrix.

Script Syntax

object.Transform4x4(
  transform-matrix
  )
Parameters

object
The name of the structured graphics object, as defined in the PARAM tag.
transform-matrix
An array containing the 16 values forming a 4x4 transform matrix for the control.

Remarks

The 4x4 matrix with ones on the diagonal is the default setting.
Translate Method
Structured Graphics Control
Sets the x-, y-, and z-coordinates for the shape's origin.

Script Syntax

object.Translate(
  x-coordinate,
  y-coordinate,
  z-coordinate
  )
Parameters

object
Name of the structured graphics object, as defined in PARAM tag syntax.
x-coordinate, y-coordinate, z-coordinate
The new x-, y-, and z-coordinates, in pixels, for the graphic.

© 1998 Microsoft Corporation. All rights reserved. Terms of Use.
Top of Page

object	Name of 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 control 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 DAImage (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 DATransform2 behavior (script only).

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.

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-, and z-axes 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-, and z-coordinates of the origin.

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.

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