Canvas

Setting up

Formation studio allows you to draw on the Tkinter canvas. To draw on the canvas, you need to first place a canvas on the designer. The canvas will be in the legacy (tk) group in the Components pane under Container.

_images/canvas_component.png — Canvas component

To place a canvas on the designer, drag and drop the canvas component from the Components pane to the designer. Once the canvas is placed and selected, The Canvas section will appear in the Components pane.

_images/canvas_component_group.png — Canvas items

Adding items

To draw a canvas item, you need to select the item in the Canvas section and the cursor on the designer will change to a crosshair. You can then draw the item on the canvas by clicking and dragging the mouse over the canvas. For multipoint items like lines and polygons, you can double click to finish drawing the item.

_images/draw_canvas_item.png — Drawing a canvas item

Selection, Resizing and Moving

To switch to selection mode, you can click on the selected item in the Canvas section to deselect it. Alternatively, you can CTRL + click on the canvas to switch to selection mode. In selection mode, the cursor changes from a cross-hair to a pointer allowing you to select items on the canvas by clicking on them. Once an item is selected, you can move it by dragging it. For multipoint items like lines and polygons, you can move individual points by dragging them or add new points by right-clicking on an edge/line and selecting add_point. You can also delete a point by right-clicking on it and selecting remove. Just like widgets, canvas items can be multi-selected by CTRL + click.

_images/canvas_item_selection.png — Selecting and manipulating canvas items

Styling

The canvas items can be styled using the Canvas Item section in the Styles pane. The available styles depend on the type of item selected. If you select multiple items, only the styles that are common to all the selected items will be shown.

_images/canvas_item_attributes.png — Styling canvas items

Stacking Order

The stacking order of the canvas items can be changed using the context menu. There are four self-explanatory options available in the context menu:

bring to front

send to back

back one step

forward one step

The stacking order can also be adjusted manually by dragging the canvas items in the Component tree. The higher the item in the tree, the lower it will be in the stacking order.

_images/canvas_item_stacking.png — Changing stacking order

Accessing the canvas items in code

Assumming you have a canvas object named canvas_1 and you have drawn a line on it with the item id line_1, the line object can be manipulated in code as shown below:

from formation import AppBuilder

app = AppBuilder(path="hello.xml")

#access the canvas object
canvas = app.canvas_1

#configure the line item
canvas.itemconfig(app.line_1, fill="red")

#change coordinates of the line
canvas.coords(app.line_1, 0, 0, 100, 100)

app.mainloop()

Generally, the name/id of the item will point to the itemid that can be used to manipute the item in any of the canvas item methods.