The Small Basic GraphicsWindow has 3 layers that appear on top of each other.

GraphicsWindow Layers

Layer 1 - Background

The bottom layer is just controlled by the GraphicsWindow.BackgroundColor property.  When this property is changed the colour of the canvas changes and all drawings and shapes remain.

Layer 2 - Drawings

On top of the background are stationary objects that can be drawn on the canvas.  All of these are found in the GraphicsWindow.Draw… and GraphicsWindow.Fill… methods.  These are good for objects that do not move and cannot be deleted or changed easily.

Layer 3 – Shapes and Controls

On top of the background and drawings on the canvas are shapes that float above the lower layers. These can be found in the Shapes.Add… and Controls.Add… methods. These objects can be moved and modified in other ways and are useful for moving objects.

The shapes include images that can be set. Often it is best to preload images using ImageList and use png images if your image has transparent regions.

Note that the GraphicsWindow.Clear() command will remove ALL drawings and shapes, leaving only the background colour and everything else will need to recreated again.

Shapes Properties

Shapes are the most interesting objects because they can be created and deleted and other properties modified.

All of these effects are found in the Shapes method and apply equally to Shapes and Controls. Most shapes have an interior colour set by GraphicsWindow.BrushColor and stroke (or border) set by GraphicsWindow.PenColor and GraphicsWindow.PenWidth.

Shapes can be moved, zoomed, rotated, hidden, reshown, opacity (transparency) changed and deleted.

Moving Shapes

To move a shape we need to set the coordinates (x and y) for the new position. In Small Basic, x is the number of pixels from the left and y is the number of pixels from the top. Both x and y start at 0, for the left and top sides of the GraphicsWindow.

The position of a shape is defined by a bounding box. The bounding box is a rectangle that completely covers the shape when it was created. The position of the shape on the canvas is defined by the top left corner of the bounding box. The bounding box has a width and height which corresponds to the size set when the shape was created.

• If a shape has width w and height h, then to position a shape with its centre at (x,y), we need to set the top left corner at (x-w/2,y-h/2).
• Note that when a rotated or zoomed shape is moved it appears as if the rotation or zoom was performed after the positioning movement – the position is the top left corner of the un-rotated and un-zoomed bounding box.

In the images above, 3 ellipse shapes have been created and moved. The bounding box for each ellipse is shown in red. The second image has been zoomed and third has been zoomed and rotated. Notice that the second and third ellipses are still positioned by the top left corner of its original bounding box.

To create movement we need to move the shape a small amount in a series of steps. Often it is best to store the position and perhaps velocity in variables. This also allows us to know the location of the shape in the program code.