The class BalloonCanvas implements a powerful drawing tool that provides these advanced features:
The clever use of geometric transformations is of predominant importance for the successful use of this drawing tool. An affinity to geometry is an advantage and a basic understanding of analytical geometry is certainly helpful.
The first example is very simple; it demonstrates the use of a translation to repeatedly draw a red rectangle:
| bc | bc := BalloonCanvas on: Display. Display fillWhite: (0@0 extent: 300@300). 20 to: 260 by: 20 do: [:i | 20 to: 200 by: 20 do: [:j | bc transformBy: (MatrixTransform2x3 withOffset: i @ j) during: [:tool | tool fillRectangle: (-10 @ -10 extent: 10 @ 10) fillStyle: Color red. ] ] ]
This piece of code paints this image into the top left corner of the display screen:
The first statement creates a Balloon drawing tool that draws on the display screen. The second statement draws a white background into the upper left corner of the screen. The remaining code of the example does all the drawing. Two nested loops are used to repeatedly draw a rectangle at different positions. The transformation
MatrixTransform2x3 withOffset: i @ j
With a minor modification we obtain differently colored rectangles:
| bc | bc := BalloonCanvas on: Display. Display fillWhite: (0@0 extent: 300@300). 20 to: 260 by: 20 do: [:i | 20 to: 200 by: 20 do: [:j | bc transformBy: (MatrixTransform2x3 withOffset: i @ j) during: [:tool | tool fillRectangle: (-10 @ -10 extent: 10 @ 10) fillStyle: (Color h: j + i s:0.8 v: 0.8). ] ] ]
This gives a really colorful image:
To scale the coordinates, one creates a geometric transformation with
MatrixTransform2x3 withScale: sx @ sy
In the following example, two transformations are applied to the drawing tool:
The application of two geometric transformations requires the use of the message composedWithLocal:. That message applies the receiver to the transformation that is given as its argument.
| bc | bc := BalloonCanvas on: Display. Display fillWhite: (0@0 extent: 300@300). 20 to: 260 by: 40 do: [:i | 20 to: 260 by: 40 do: [:j | | f | f := 1 - (i - 20/350)@(1 - (j - 20/350)). bc transformBy: ((MatrixTransform2x3 withOffset: i@j) composedWithLocal: (MatrixTransform2x3 withScale: f)) during: [:tool | tool fillRectangle: (-10@-10 extent: 30 @ 30) fillStyle: (Color h: j + i s:0.8 v: 0.8). ] ] ]
The displayed image demonstrates the effect of different scaling factors for x and the y coordinates. Scale factors vary from 1.0 to 0.3143.
To rotate the coordinates, one creates a geometric transformation with
MatrixTransform2x3 withAngle: angle
The angle is measured clockwise and expressed in degrees.
| bc | bc := BalloonCanvas on: Display. Display fillWhite: (0@0 extent: 300@300). 20 to: 260 by: 30 do: [:i | 20 to: 260 by: 30 do: [:j | bc transformBy: ((MatrixTransform2x3 withOffset: i@j) composedWithLocal: (MatrixTransform2x3 withAngle: i-20/5) ) during: [:tool | tool drawRectangle: (-10@-10 extent: 20 @ 20) color: Color red borderWidth: 1 borderColor: Color black. ] ] ]
We obtain this image. The rotation angles vary from 0 degrees to 48 degrees.
In the next section we use a BalloonCanvas to draw into a view.
|
|