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.
This article contains the following sections.
The HTML, Scripting, and Text File Methods describe the methods you can use with HTML PARAM tags; in external text files that you import with SourceURL; and in script. They also show the syntax you need to use. The Script-Only Methods describe methods that can be called only from script.
When rendering a shape, the Structured Graphics control will stop parsing the shape if it encounters invalid HTML syntax. Some properties and methods are scriptable only. See the appropriate topic for syntax details.
You can use the Structured Graphics control to create simple primitives and complex polygon vector graphic shapes from an HTML PARAM tag description. Or, you can describe the shape in an external text file, then use the SourceURL property to read it. For example:
<SCRIPT LANGUAGE="JavaScript" FOR="SGControl" EVENT="onmouseover">
SGControl.SourceURL="star.txt"
</SCRIPT>
In this example, the text file Star.txt contains the polygon description (a star shape) as shown in the following text.
SetLineColor(255,0,0) SetLineSTYLE(1,3) SetFillColor(100,0,100) SetFillSTYLE(1) Polygon(11, 40,10, 30,30, 10,30, 26,45, 20,60, 40,50, 60,60, 54,45, 70,30, 50,30, 40,10)
In addition to HTML PARAM tags, external files, and scripting, you can also create vector graphics by using the DADrawingSurface object. You can access the DADrawingSurface object through the Structured Graphics control's DrawSurface property. For more information about the Microsoft® DirectAnimation® Drawing Surface, see the Drawing Surface topic in the DirectAnimation Programmer's Guide.
HTML and Scripting Properties
This section lists the Structured Graphics control properties.
Syntax
HTML <OBJECT ID=SGObj
STYLE="WIDTH:width; HEIGHT:height: Z-INDEX:z-index"
CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
<PARAM NAME="PropertyName" VALUE="Value">
</OBJECT>
Scripting SGObj.PropertyName=Value
Possible Values
- SGObj
- Name of the structured graphics object.
- width
- HTML only. Desired width for the Structured Graphics' drawing area (pixels or drawing area (pixels or percentage of page width).
- height
- HTML only. Desired height for the Structured Graphics' drawing area (pixels or percentage of page height).
- z-index
- HTML only. Desired z-index value for the Structured Graphics' drawing area (integer).
- PropertyName
- One of the Structured Graphics control properties in the following table.
- Value
- Valid value for the PropertyName property.
| Property | Description |
|---|---|
| CoordinateSystem | HTML only. Sets the coordinate system to use for the world. |
| DrawSurface | Scripting only. Sets or retrieves the DirectAnimation drawing surface, the visible rendering of the control's contents for use (script only). |
| ExtentHeight, ExtentWidth, ExtentLeft, ExtentTop | HTML only. Sets the height, width, left and top values of the shape (in pixels). |
| HighQuality | Turns anti-aliasing on or off. |
| Image | Scripting only. Fills the Structured Graphics shape with a DirectAnimation DAImage. |
| Library | Scripting only. Retrieves the DirectAnimation Library reference. |
| MouseEventsEnabled | Sets or retrieves whether mouse events are to be processed against the Structured Graphics object. |
| PreserveAspectRatio | Sets or retrieves a value indicating if aspect ratio should be preserved when extents are set. |
| SourceURL | Enables the Structured Graphics control to use an external file as the shape primitive description. |
| Transform | Scripting only. Transforms the object using a DirectAnimation DATransform2 behavior. |
HTML, Scripting, and Text File Methods
This topic lists the Structured Graphics control methods that can be used with HTML PARAM tags, in scripting, and in external text files. See Script-Only Methods for a list of the Structured Graphics control methods that can be used only in script.
Syntax
HTML <OBJECT ID=SGObj
STYLE="WIDTH:width; HEIGHT:height: Z-INDEX:z-index"
CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
<PARAM NAME="LINEnnnn" VALUE="MethodName(Parameters)">
</OBJECT>
Scripting SGObj.MethodName(Parameters) File MethodName(Parameters)
Parameters
- SGObj
- String identifying the object.
- width
- HTML only. Desired width for the Structured Graphics' drawing area (pixels or percentage of page width).
- height
- HTML only. Desired height for the Structured Graphics' drawing area (pixels or percentage of page height).
- z-index
- HTML only. Desired z-index value for the Structured Graphics' drawing area (integer).
- LINEnnn
- HTML only. String "line" followed by an integer. The integer is the sequence number for the method execution order. The sequence numbers must be in order starting with 0001. Skipped sequences halt execution. Proper use is shown the following example.
<PARAM NAME="Line0001" VALUE="SetFillColor(0,0,255)"> <PARAM NAME="Line0002" VALUE="SetFillStyle(1)"> <PARAM NAME="Line0003" VALUE="SetFont('Verdana',40,650,0,0,0)">- MethodName
- One of the methods in the following table.
- Parameters
- Valid parameters for the MethodName method.
| 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. |
| SetGradientShape | Sets the shape of a gradient to be an outline of a polygon shape. |
| 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. |
| SetTextureFill | Sets the texture source to be used to fill a Structured Graphics shape. |
| Text | Creates a string with the current font and color. |
Script-Only Methods
This topic contains a list of the Structured Graphics control methods that can be used only in script and gives the scripting syntax for them.
Syntax
Scripting SGObj.MethodName(Parameters)
Parameters
- SGObj
- String identifying the Structured Graphics' object.
- MethodName
- One of the methods in the following table.
- Parameters
- Valid parameters for the MethodName method.
| Method | Description |
|---|---|
| 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
This topic contains a list of the Structured Graphics control events.
Syntax
Scripting <SCRIPT LANGUAGE="JavaScript" FOR=SGeObj EVENT=event ( parameters )>
<!--script-->
</SCRIPT>
Possible Values
- SGObj
- String identifying the Structured Graphics control object.
- event
- One of the Sequencer control events in the following table.
- Parameters
- Valid parameters for the event.
Note that <!--script--> in the preceding syntax and in the syntax for each event is the script executed if the event occurs.
| Event | Description |
|---|---|
| onclick | Occurs when the user has clicked the left mouse button on the Structured Graphics control. |
| ondblclick | Occurs when the user has double-clicked on the Structured Graphics control. |
| onmousedown | Occurs when the left button is pressed over the Structured Graphics control. |
| onmousemove | Occurs when the user moves the mouse pointer across the non-transparent area of the Structured Graphics control. |
| onmouseout | Occurs when the cursor leaves the nontransparent area of the Structured Graphics control. |
| onmouseover | Occurs when the mouse pointer has entered the nontransparent region of the Structured Graphics control. |
| onmouseup | Occurs when the user releases the mouse button while the mouse pointer is over the Structured Graphics control. |
Top of Page
© 2000 Microsoft and/or its suppliers. All rights reserved. Terms of Use.