Drawing Lines

You draw a line by using the lineTo method on an LzDrawView object. You start by moving the internal digital pen to the origin of the line. For example, to draw a line from coordinate (0, 100) to (80, 100), you will call the moveTo, lineTo, and stroke methods in this order:

moveTo(0, 100);
lineTo(80, 100);
stroke();

For example, the small program in Listing 10.1 shows you how to draw a few lines. Note that you must call the stroke methods to actually draw your shapes.

Listing 10.1. Drawing lines

<canvas height="200">
    <drawview height="200" width="200">
        <method event="oninit">
            this.moveTo(0, 100);
            this.lineTo(80, 100);
            this.lineTo(100, 140);
            this.lineTo(120, 100);
            this.lineTo(200, 100);
            this.stroke();
        </method>
    </drawview>
</canvas>

To test the program, direct your browser to this location:

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

The generated OpenLaszlo application is shown in Figure 10.1.