Drawing Arcs

Drawing arcs is easy with the arc method defined in the LzDrawView class. All you need to do is pass the position of the arc center, the radius, the start and end angles, and whether OpenLaszlo should draw it clockwise or counterclockwise. Here is the signature of the arc method.

arc(x, y, radius, startAngle, endAngle, clockwise)

Draws an arc centered at (x, y) on this LzDrawView, starting from startAngle and ending at endAngle. The radius argument specifies the radius in pixels and the clockwise argument is a boolean that indicates whether or not the arc is drawn clockwise.

The LZX application in Listing 10.3 draws three arcs.

Listing 10.3. Drawing arcs

<canvas height="200">
    <drawview height="200" width="600">
        <method event="oninit">
            this.arc(100, 100, 75, 0, 90, true);
            this.arc(200, 100, 75, 0, 90, false);
            this.arc(400, 100, 75, 0, 360, false);
            this.stroke();
        </method>
    </drawview>
</canvas>

Note that the third arc spans 360 degrees to make a circle.

You can test and run the application in Listing 10.3 by using this URL:

http://localhost:8080/lps-4.0.x/app10/arcTest1.lzx

The generated application is displayed in Figure 10.3.