|
 |
|
|
|
If you're not familiar with DirectX, you might like to look at the Microsoft introduction Along with Direct Animation element of DirectX, we'll be dealing here with another part of the Microsoft development family, ActiveX. ActiveX is a Microsoft version of HTML objects. Direct Animation involves five different ActiveX objects. These are the MediaPlayer, the Path control, the Sequencer control, the Sprite control and the Structured Graphic Control (SGC). The Structured Graphic Control is actually very large, and contains hundreds of routines for creating and manipulating graphics on Web pages. But there is a basic level to the Structured Graphics Control that allows us to draw vector-based graphics directly to the browser window. Structured Graphic ControlTo demonstrate its power and flexibility, here are a couple of examples of the SGC in action. <HTML> This displays a red oval that is rotated by an angle of 30 degrees from the horizontal. We now have the ability to draw directly to the browser window, far more versatile than images. We can very easily extend this example and create a very cool Web page display. <HTML> Once the document has fully loaded, the oval, which has changed its color to blue, starts to spin. How are these effects done? What else can the SGC do? We will begin with a look at the technical syntax involved. <OBJECT>When we create a Structured Graphic (SG), we are creating an object that behaves exactly like any other object. For example, we can move images around on a screen, and similarly we can move SGC objects around a screen. As the object we are creating is not a standard HTML element, we use the <OBJECT> element to create and position the SG. It is good practice to give every element or object a name or ID. With the boom in DHTML Web Sites, this practice became the norm for a Web page. If we want to dynamically change an element, the element must have a name or ID. CLASSIDThe next part of the <OBJECT> element definition may throw you at first, but it is nothing to be scared of. The CLASSID attribute is a reference to an ActiveX object. So we are loading our object with an ActiveX object. This CLSID identity is the reference code for the Structured Graphic Control. <OBJECT ID="RedOval" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"> The CLASSID must be entered exactly as above, although case is not important. Once you get it working, most people copy and paste the long stream of numbers and characters. If you get the number wrong, the program will not work, but nothing disastrous will happen. STYLEFor most objects the definition as it stands is enough. For the SGC we need to define a style as well. The reason for this is because the SGC is a graphical object. Graphics rely heavily on co-ordinate systems, and the style attribute defines the co-ordinate system for the SGC object. Now we have: <OBJECT ID="RedOval" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" STYLE="position:absolute;top:0;left:0;width:400;height:400"> And this completes the opening object tag. The style defines a 'canvas' for the graphics. The concept of a canvas can be appreciated by imagining an artist's canvas placed on top of a very large piece of paper. The canvas is smaller than the piece of paper, and is positioned on the paper with the top-left corner at (0, 0), and the size of the canvas is 400 by 400. When we artistically throw paint at the two together, the final masterpiece consists only of the paint on the canvas. The paper and any paint that lands on it are discarded, or in screen terms, not displayed. By using the style attribute we have defined such a canvas. Anything that takes place outside of this canvas will not be rendered on the screen. <PARAM>The next stage is to define the appearance of the SGC. The <PARAM> sub-element of the <OBJECT> element supplies the individuality for the SG object. For the SGC, the basic syntax of the <PARAM> element is: <PARAM NAME="Linexxxx" VALUE="method(parameters)"> To successfully use this, we need to know two things. 1. The 'xxxx' must be similar to 0001, and must proceed in an integer sequential manner, e.g. 0002, 0003, etc. So, in the first example given, we used: <PARAM NAME="Line0001" VALUE="setFillColor(255, 0, 0)"> Line0001 sets the fill color to be red. This may be confusing. How can we draw at (-100, -50) when surely we are drawing off the screen? Once we have defined our canvas for the SGC, the SGC imposes it's own co-ordinate system on the canvas. The SGC places the origin at the center of the canvas. So for a 400*400 canvas, the origin is at (200, 200) physically on the screen, but this is regarded as (0, 0) inside the SGC definition. So, when we draw at (-100, -50), the bounding rectangle covers the region from (100, 150) through to (300, 250). The center of this rectangle is (200, 200), which is the origin of the canvas. In SGC co-ordinates, the oval is bounded by the rectangle (-100, -50) to (100, 50). So now we can draw different colors of filled ovals of various postions and sizes at various angles. The SGC is fully integrated with JavaScript and DHTML. The second example demonstrates this. The only difference between the two programs is that the second has a JavaScript function, and associated event handler (the color of the oval has also changed and the ID of the SG has changed to reflect this). function OvalRotate() This small routine calls the rotate(x, y, z) method, and uses the setTimeout() function to provide smooth animation. This line starts the code in motion. <BODY onLoad="OvalRotate();"> For different effects, try different numbers in the rotate method. For example: BlueOval.rotate(1, 2, 3); So there we go. No more complicated than using any other HTML element, but provides a rich layer of graphics. The full capabilities of the SGC are considerable. From the basic <PARAM> version, we can extend the SGC more completely into JavaScript through the DrawSurface property. This property allows a very fine degree of control over the graphic, but its extensive capabilities are beyond the scope of this article. Let us look at the different values we can use inside the <PARAM> elements. These can be divided into several groups: 1. Point-based vector shapes Point-based vector shapesThese are the shapes that we can create with the SGC. Arc, Oval, Pie, Polygon, Polyline, Rect, RoundRect. The shapes can be grouped into three groups, Rectangles, Arcs and Polygons. Rectangles The Rectangles group contains Rect, Oval and RoundRect. It also forms the basis for the Arc and Pie methods. Rect draws a rectangle. This rectangle can be rotated. <PARAM NAME="Linexxxx" VALUE="Rect (x ,y, width, height, rotation)"> Oval draws an oval. This oval can be rotated. <PARAM NAME="Linexxxx" VALUE="Oval(x ,y, width, height, rotation)"> RoundRect adds a couple more parameters, and draws a rectangle with rounded corners. This rounded rectangle can be rotated. <PARAM NAME="Linexxxx" VALUE="RoundRect (x ,y, width, height, arcWidth, arcHeight, rotation)"> Each parameter has the following function.
The first two methods are interchangeable, and to see the difference effects, substitute Oval for Rect in the value attribute of the <PARAM> element. <HTML> The example for RoundRect is very similar, we need to add two more parameters to determine the curvature at the corners. <HTML> Arcs This group includes the Arc and Pie methods. They take exactly the same parameters, but the graphics produced are slightly different to each other. Arc produces a curve from an oval. <PARAM NAME="Linexxxx" VALUE="Arc(x ,y, width, height, startAngle, arcAngle, rotation)"> Pie produces the same curve from an oval, but joins the two ends with the center of the oval. <PARAM NAME="Linexxxx" VALUE="Pie(x ,y, width, height, startAngle, arcAngle, rotation)"> Each parameter has the following function.
Most of the parameters have obvious consequences, but the angle parameters need further explanation. If startAngle is 0, then this means we are along the positive x-axis, which is to the right. Increasing the angle parameter twists in a counter-clockwise direction, so startAngle=45 is pointing top-right. To see this, run the following example. <HTML> Change the Arc to Pie and run the code again. You may need to experiment with the parameters to see what is happening. Polygons The polygon group contains two methods, Polygon and Polyline. They both connect a series of points, but Polygon will connect the last point back to the first one. Polygon draws a series of lines between consecutive points, and then closes the shape by connecting the first and last points. The polygon may be rotated. <PARAM NAME="Linexxxx" VALUE="Polygon(nPoints, x1, y1, x2, y2, [x3, y3, ….], rotation"> Polyline draws a series of lines between consecutive points, and may be rotated. <PARAM NAME="Linexxxx" VALUE="Polyline(nPoints, x1, y1, x2, y2, [xn, yn, ….], rotation"> Each parameter has the following function. Parameter Description This group houses the more common line function. If nPoints is 2, we merely define a line. We should use Polyline for this - not essential, but better programming. <HTML> A more intricate example involves more points. <HTML> Changing polygon to polyline in this example allows you to see the extra line that the computer adds in order to close the polygon shape. Mixing Shapes Note that we are free to mix the shapes. <HTML> Which brings this article to a close. In the next article we will examine the remaining three groups of <PARAM> methods, which allow us to alter color and pattern, and then manipulate the Structured Graphic. Jon Perry is a programmer and Web developer from the UK. |
| Suits | Ponytails | Propheads | Contact WDJ | Discuss | Web Audio | Search |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers