Lessons 59–60 · 2 lessons · N. I. Taylaqov (general editor), A. B. Akhmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatics and Information Technologies, Grade 10, 1st edition. “Extremum-Press”, Tashkent, 2017
59
Working with graphics in Delphi
Textbook: pp. 132–137
GoalDraws on an Image object with the Canvas: uses the Pen and Brush properties, the Rectangle, Ellipse, MoveTo and LineTo methods, the Pixels property and colours (cl names, RGB, $BBGGRR).
New words
Canvas: the drawing surface of an object such as an Image · CanvasPen / Brush: the pen draws lines, the brush fills areas · Pen / BrushRGB: a function that makes a colour from red, green and blue values 0–255 · RGBPixels: the colours of single dots of the canvas, given by two coordinates · Pixels
Explanation
Many objects have a Canvas property: shapes are drawn on it. For drawing it is convenient to use the Image object from the Additional tab, because a shape drawn on it is not lost when the window is covered and shown again (a shape drawn directly on Form1.Canvas can disappear when the window is covered by another). Coordinates are counted from the upper left corner of the canvas: x – to the right, y – down. Rectangle(x1, y1, x2, y2) draws a rectangle and Ellipse(x1, y1, x2, y2) an ellipse inscribed in that rectangle; an ellipse in a square is a circle. MoveTo(x, y) moves the pen to a point and LineTo(x, y) draws a segment from the current point to the given point. The Pen (Color, Width, Style) draws lines and the Brush (Color, Style) fills the inner area. A colour is given with cl names (clRed, clBlue, clYellow) or with RGB(red, green, blue), each value from 0 to 255, so there are 256·256·256 = 16777216 colours. One dot can be coloured with Canvas.Pixels[x, y] := RGB(255, 0, 0); In Lazarus use RGBToColor(r, g, b) instead of RGB.
Worked examples
A house: Image1 (300×200). procedure TForm1.Button1Click(Sender: TObject); ⏎ begin ⏎ Image1.Canvas.Rectangle(40, 80, 140, 160); ⏎ Image1.Canvas.MoveTo(40, 80); ⏎ Image1.Canvas.LineTo(90, 40); ⏎ Image1.Canvas.LineTo(140, 80); ⏎ end; The wall is 140–40 = 100 pixels wide and 160–80 = 80 high; the roof peak is at x = (40+140)/2 = 90.
The semi-axes of Ellipse(10, 40, 70, 120) are (70–10)/2 = 30 and (120–40)/2 = 40. A sun: Image1.Canvas.Brush.Color := clYellow; Image1.Canvas.Ellipse(220, 20, 260, 60); – a circle in a 40×40 square. RGB(255, 255, 0) is yellow, RGB(0, 0, 255) is blue, RGB(0, 0, 0) is black and RGB(255, 255, 255) is white.
Class activity
“House and sun”: a pair draws a house, a door and a sun with their own coordinates; they calculate the width and height of the wall in advance and compare them with the sizes in the picture.
Practice
1
Where are the Canvas coordinates counted from?
From the upper left corner
2
What are the width and height of Rectangle(30, 50, 130, 150)?
100 and 100
3
What are the semi-axes of Ellipse(10, 20, 90, 60)?
40 and 20
4
Why is drawing on an Image more reliable than drawing on Form1.Canvas?
An Image keeps the picture itself; the drawing is not lost when the window is covered and uncovered.