Back to Contents

Canvas

This page describes the usage of Canvas.

• What is Canvas?
• Basics
• Functions

See also: Forms, Windows

What is Canvas?

By using Canvas, you can draw simple shapes in a specific area of a form. Canvas can draw lines, rectangles, ovals, circles, texts, arcs, and polygons. Keys can be bound to graphical elements for selection with a right or left mouse click.

In programs, you select a given Canvas area by name and you create the shapes in the Abstract User Interface tree by using the built-in DOM API.

The painted canvas is automatically displayed on the front end when an interactive instruction is executed (like MENU or INPUT).

The canvas area represents an abstract drawing page where you define size and location of shapes with coordinates from (0,0) to (1000,1000). The origin point  (0,0), is on the left-bottom of the drawing area.

Each canvas element is identified by a unique number (id). You can use this identifier to bind mouse clicks to canvas elements.

Basics

Purpose:

Use Canvas to draw simple shapes in a specific area of a form. 

Syntax:

Usage:

A canvas node is identified in the program by the name attribute. You can get the canvas DomNode by name with the Window.getElement(name) method.

You cannot drop canvas nodes, as they are read-only in a form definition.

The following table describes all the types of canvas element that are supported:

The following table describes the attributes of canvas elements:

Step by step example:

First, you must define a drawing area in the form file. The drawing area is defined by a CANVAS form item. In the following example, the name of the canvas field is 'canvas01'. This field name identifies the drawing area:

01 DATABASE FORMONLY
02 LAYOUT
03 GRID
04 {
05   Canvas example:
06   [ca01                         ]
07   [                             ]
08   [                             ]
09   [                             ]
10   [                             ]
11   [                             ]
12 }
13 END
14 END
15 ATTRIBUTES
16 CANVAS ca01 : canvas01;
17 END

In programs, you draw canvas shapes by creating Canvas nodes in the Abstract User Interface tree with the DOM API utilities.

Define a variable to hold the DOM node of the canvas and a second to handle children created for shapes:

01 DEFINE c, s om.DomNode

Define a window object variable; open a window with the form containing the canvas area; get the current window object, and then get the canvas DOM node:

01 DEFINE w ui.Window
02 OPEN WINDOW w1 WITH FORM "form1"
03 LET w = ui.Window.getCurrent()
04 LET c = w.findNode("Canvas","canvas01")

Create a child node with a specific type defining the shape:

01 LET s = c.createChild("CanvasRectangle")

Set attributes to complete the shape definition:

01 CALL s.setAttribute( "fillColor", "red" )
02 CALL s.setAttribute( "startX", 10 )
03 CALL s.setAttribute( "startY", 20 )
04 CALL s.setAttribute( "endX", 100 )
05 CALL s.setAttribute( "endY", 150 )

It is possible to bind keys / actions to Canvas items in order to let the end user select elements with a mouse click. You can assign a function key for left-button mouse clicks with the acceleratorKey1 attribute, while acceleratorKey2 is used to detect right-button mouse clicks. The function keys you can bind are F1 to F255. If the user clicks on a Canvas item bound to key actions, the corresponding action handler will be executed in the current dialog. Several canvas items can be bound to the same action keys; In order to identify what items have been selected by a mouse click, you can use the drawGetClickedItemId() function of fgldraw.4gl. This method will return the AUI tree node id of the Canvas items that was selected (i.e. s.getId()).

01 ... Create the Canvas item with s node variable ...
02 CALL s.setAttribute( "acceleratorKey1", "F50" )
03 MENU "test"
04    COMMAND KEY (F50)
05       IF drawGetClickedItemId() = s.getId() THEN
06         ...
07       END IF
08 ...
09 END MENU

To clear a given shape in the canvas, remove the element in the canvas node:

01 CALL c.removeChild(s)

To clear the drawing area completely, remove all children of the canvas node:

01 LET s=c.getFirstChild()
02 WHILE s IS NOT NULL
03   CALL c.removeChild(s)
04   LET s=c.getFirstChild()
05 END WHILE

Functions

The following table describes the built-in functions provided for backward compatibility with version 3. This list is provided to let you search for existing code using these functions. You are free to use these old functions or use the technique described in the sections above. For more details about the functions listed below, see the FGLDIR/src/fgldraw.4gl source code.