LCB Canvas Operations

The onPaint handler

This widget is very simple so only the OnPaint handler is required to draw the widget.

The OnPaint handler will be a public handler which takes no parameters and does not return a value.

Add the OnPaint definition to the widget code.

public handler OnPaint()

end handler

There are a number of steps to take in the OnPaint handler. The first step is to draw the unrotated text in the widget.

1. Work out the size of the widget by getting its width and height.
2. Work out the rectangle of the area we have to draw into.
3. Draw the text at the center of the available space.

Drawing the Text

For the basic widget we will use “LiveCode” as the text.

1. Declare variables for the text to be displayed and height and width of the canvas.
2. Update the variables with the relevant values.
3. Declare a rectangle variable.
4. Put the rectangle describing the area of the canvas into the rectangle variable.
5. Draw the text in the center of the canvas.

public handler OnPaint()

   variable tText as String
   variable tHeight as Real
   variable tWidth as Real

   put my width into tWidth
   put my height into tHeight
   put "LiveCode" into tText

   variable tRectangle as Rectangle
   put rectangle [0,0,tWidth,tHeight] into tRectangle
   fill text tText at center of tRectangle on this canvas
end handler

• my width: Returns the width of the widget.
• my height: Returns the height of the widget.
• rectangle: Specifies an area, consists of a list of 4 integers left, top, right, bottom e.g. put rectangle [0,0,tWidth,tHeight] into tRectangle
• fill text at: Renders text on a canvas e.g. fill text “Widget Label” at top left of rectangle [50, 100, 250, 200] on this canvas

For more on each of these keywords see the API entries in the LiveCode Dictionary.

Rotating text

To draw rotated text we

1. Rotate the canvas.
2. Get the rectangle of the rotated canvas as a path.
3. Rotate the path back.
4. Get the rectangle of the un-rotated path.
5. Draw the text within the un-rotated rectangle, on the rotated canvas.

This draws the text horizontally, but relative to the position of the canvas. Because the canvas is rotated the text also appears rotated.

Drawing rotated text

1. Rotate the canvas by the value stored in the mRotation variable.
2. Declare a rectangle variable tRectangle and a path variable tPath.
3. Put the rectangle path of the canvas into tPath.
4. Rotate the path by -mRotation, setting it to a horizontal rectangle.
5. Get the bounding box of the un-rotated path and put it into the tRectatangle. variable, this gives the rectangle the completely encloses un-rotated the path in tPath
6. Draw the text at the center of the rectangle given by tRectangle.

The text in drawn in a horizontal rectangle, but relative to the canvas, so appears drawn on an angle.

public handler OnPaint()

 variable tText as String
 variable tHeight as Real
 variable tWidth as Real

 put my width into tWidth
 put my height into tHeight
 put "LiveCode" into tText

 rotate this canvas by mRotation

 variable tRectangle as Rectangle
 variable tPath as Path
 put rectangle path of rectangle [0,0,tWidth,tHeight] into tPath
 rotate tPath by (mRotation * -1)

 put rectangle [0,0,tWidth,tHeight] into tRectangle
 put the bounding box of tPath into tRectangle
 fill text tText at center of tRectangle on this canvas
end handler