1. Intro to Event-driven Programming
and Forms with Delphi
L06 – GDI Drawing
Mohammad Shaker
mohammadshakergtr.wordpress.com
Intro to Event-driven Programming and Forms with Delphi
@ZGTRShaker
2010, 2011, 2012

3. Randomize and Color
procedure TForm2.Button1Click(Sender: TObject);
begin
Form2.Color:= ClRed;
end;

4. Randomize and Color

5. Randomize and Color
procedure TForm2.Button1Click(Sender:
TObject);
var i:integer;
begin
i:= Random(100);
Form2.Color:= i;
end;

6. Randomize and Color
procedure TForm2.Button1Click(Sender:
TObject);
var i:integer;
begin
i:= Random(RandSeed);
Form2.Color:= i;
end;

7. Drawing
• What’s a Canvas?
• Canvas Methods
Canvas.Method()
// Form Object
Object.Canvas.Method()
// An Object

8. Canvas
• It’s an “Object”
• It’s used mainly for “drawing”
• Canvas:
– Can be used as a “Variable”:
• Can: tCanvas
– Can be used with another “Component”s:
• Image1.Canvas
• Form1.Canvas

9. Canvas
• Move the start point to a specific point.
Canvas.MoveTo(x,y)
• Move the start point to a specific point.
• Draw a line to the specific point.
Canvas.LineTo(x,y)
• Note that “LineTo” contains “MoveTo” also.

10. Canvas
procedure TForm2.Button1Click(Sender: TObject);
begin
Canvas.MoveTo(10,10);
Canvas.LineTo(200,200);
end;

11. Canvas - functions
//Canvas.Pen
Canvas.Pen.color:= ClBlack;
//Canvas.Pen
Form1.Canvas.Pen.color:= ClBlack;

12. Canvas - functions
Canvas.Pen.Width:= 10;
Form1.Canvas.Pen.Width:= 10;

13. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
//Canvas.Pen
Canvas.Pen.color:= clRed;
Canvas.Pen.Width:= 10;
Image1.Canvas.LineTo(30,120);
end;

14. Canvas - functions
Note That is Not what we want

15. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.LineTo(30,120);
Canvas.Pen.color:= clRed;
Canvas.Pen.Width:= 10;
Canvas.LineTo(0,120);
end;

16. Canvas - functions
• Why?

17. Canvas
procedure TForm2.Button1Click(Sender: TObject);
begin
Canvas.MoveTo(10,10);
Canvas.LineTo(50,70);
Canvas.LineTo(120,100);
Canvas.LineTo(50,50);
Canvas.Pen.Color:= CLRed;
Canvas.MoveTo(300,10);
Canvas.LineTo(310,80);
Canvas.LineTo(250,90);
end;

18. Canvas

19. Canvas - functions
Canvas.Rectangle(X1,Y1,X2,Y2);
Canvas.Ellipse(X1,Y1,X2,Y2);
Canvas.RoundRect(X1,Y1,X2,Y2,X3,Y3);

20. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 10;
X2:= 20;
Y1:= 30;
Y2:= 40;
Canvas.Rectangle(X1,Y1,X2,Y2);
end;

21. Canvas - functions

22. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 0;
X2:= 20;
Y1:= 0;
Y2:= 40;
Image1.Canvas.Rectangle(X1,Y1,X2,Y2);
end;

23. Canvas - functions
Notice The
Difference

24. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 0;
X2:= 60;
Y1:= 0;
Y2:= 40;
Image1.Canvas.Ellipse(X1,Y1,X2,Y2);
end;

25. Canvas - functions

26. How To Draw A Circle?
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 0;
X2:= 60;
Y1:= 0;
Y2:= 60;
Image1.Canvas.Ellipse(X1,Y1,X2,Y2);
end;

27. How To Draw A Circle?

28. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
//Canvas.Pen
Image1.Canvas.Pen.color:= ClRed;
Image1.Canvas.Pen.Width:= 10;
Image1.Canvas.LineTo(30,120);
end;

29. Canvas - functions
Now, That’s Right ;)

30. Canvas - functions
Canvas.Brush;
procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.Pen.color:= clGray;
Image1.Canvas.Pen.Width:= 5;
Image1.Canvas.Brush.Color:= clRed;
Image1.Canvas.Rectangle(10,10,100,100);
end;

31. Canvas - functions

32. Canvas - functions
Canvas.Brush;
procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.Pen.color:= clGray;
Image1.Canvas.Pen.Width:= 5;
Image1.Canvas.Brush.Color:= clRed;
Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Ellipse(10,10,150,150);
end;

33. Canvas - functions

34. Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.Pen.color:= clGray;
Image1.Canvas.Pen.Width:= 5;
Image1.Canvas.Brush.Color:= clRed;
Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Brush.Color:= clGreen;
Image1.Canvas.Ellipse(10,10,150,150);
end;

35. Canvas - functions

36. Common Canvas Prop.
Delphi help
Properties
Descriptions
Font
Specifies the font to use when writing text on the image. Set the properties of the TFont
object to specify the font face, color, size, and style of the font.
Brush
Determines the color and pattern the canvas uses for filling graphical shapes and backgrounds.
Set the properties of the TBrush object to specify the color and pattern or bitmap to use when
filling in spaces on the canvas.
Pen
Specifies the kind of pen the canvas uses for drawing lines and outlining shapes. Set the
properties of the TPen object to specify the color, style, width, and mode of the pen.
PenPos
Specifies the current drawing position of the pen.
Pixels
Specifies the color of the area of pixels within the current ClipRect.

37. Common Canvas methods
Delphi help
Method
Descriptions
Arc
Draws an arc on the image along the perimeter of the ellipse bounded by the
specified rectangle.
Chord
Draws a closed figure represented by the intersection of a line and an ellipse.
CopyRect
Copies part of an image from another canvas into the canvas.
Draw
Renders the graphic object specified by the Graphic parameter on the canvas
at the location given by the coordinates (X, Y).
Ellipse
Draws the ellipse defined by a bounding rectangle on the canvas.
FillRect
Fills the specified rectangle on the canvas using the current brush.
FloodFill Fills an area of the canvas using the current brush.
(VCL only)
FrameRect Draws a rectangle using the Brush of the canvas to draw the border.
(VCL only)

38. Common Canvas methods
Delphi help
LineTo
MoveTo
Draws a line on the canvas from PenPos to the point specified by X and Y, and sets the pen
position to (X, Y).
Changes the current drawing position to the point (X,Y).
Pie
Draws a pie-shaped the section of the ellipse bounded by the rectangle (X1, Y1) and (X2, Y2) on
the canvas.
Polygon
Draws a series of lines on the canvas connecting the points passed in and closing the shape by
drawing a line from the last point to the first point.
Polyline
Draws a series of lines on the canvas with the current pen, connecting each of the points passed
to it in Points.
Rectangle
Draws a rectangle on the canvas with its upper left corner at the point (X1, Y1) and its lower right
corner at the point (X2, Y2). Use Rectangle to draw a box using Pen and fill it using Brush.

39. Common Canvas methods
Delphi help
RoundRect
Draws a rectangle with rounded corners on the canvas.
StretchDraw
Draws a graphic on the canvas so that the image fits in the specified rectangle. The
graphic image may need to change its magnitude or aspect ratio to fit.
TextHeight,
TextWidth
Returns the height and width, respectively, of a string in the current font. Height includes
leading between lines.
TextOut
Writes a string on the canvas, starting at the point (X,Y), and then updates the PenPos to
the end of the string.
TextRect
Writes a string inside a region; any portions of the string that fall outside the region do
not appear

40. Canvas
procedure TForm2.Image1Click(Sender: TObject);
Var X,Y: Integer;
begin
Image1.Canvas.LineTo(Mouse.CursorPos.X,Mouse.CursorPos.Y);
end;
Note That it’s Not that
Accurate, Why?

41. Canvas
procedure TForm2.Image1Click(Sender: TObject);
Var X,Y: Integer;
begin
Image1.Canvas.LineTo(Mouse.CursorPos.X Form2.Left,Mouse.CursorPos.Y - Form2.Top);
end;
Note Now that it’s So
Much More Accurate

42. Canvas - TextOut
• This will help u for ur next exercise
procedure TForm2103232.Button1Click(Sender: TObject);
begin
Form2103232.Canvas.TextOut(20,20,'Crushed ');
Canvas.TextOut(30,20,'Crushed ');
end;

43. Canvas - TextOut
• This will help u for ur next exercise
procedure TForm2.Button1Click(Sender: TObject);
begin
Form2.Canvas.Font.Size:= 14;
Form2.Canvas.Font.Color:= clRed;
Form2.Canvas.Font.Orientation:= 100;
Form2.Canvas.TextOut(20,20,'Crushed ');
end;

44. Canvas - TextOut
• This will help u for ur next exercise
procedure TForm2.Button1Click(Sender: TObject);
var
I: Integer;
begin
for I:= 0 to 10 do
Begin
Form2.Canvas.Font.Size:= 14;
Form2.Canvas.Font.Color:= clRed;
Form2.Canvas.Font.Orientation:= 100 + i*100;
Form2.Canvas.TextOut(150,100,'Crushed ');
End;
end;

45. Canvas - TextOut
• This will help u for ur next exercise
procedure TForm2.Button1Click(Sender: TObject);
var
I: Integer;
begin
for I:= 0 to 10 do
Begin
Form2.Canvas.Font.Size:= 14;
Form2.Canvas.Font.Color:= clRed;
Form2.Canvas.Font.Orientation:= 100 - i*100;
Form2.Canvas.TextOut(100,20,'Crushed ');
End;
end;

46. Canvas
• Let’s draw

47. Canvas
• This will help u for ur next exercise
// Returns the Mouse Cursor position on the X-Axis
Mouse.CursorPos.X
// Returns the Mouse Cursor position on the Y-Axis
Mouse.CursorPos.Y
// Now we can use it like the following
Canvas.LineTo(Mouse.CursorPos.X,Mouse.CursorPos.Y);

48. Canvas
• Let’s have this exercise:
– We have a “form” that contains an “Image”
• 1st: we want to draw in the “Image” as it’s in the direction of the four
“Arrow”s.
• 2nd: we want to draw a line every two clicks, (Not every click).
• 3rd: we want to draw a line in the same direction of the “Cursor” each
time the “Mouse” moves.
• 4th: Now, we’ll add a Timer & a ProgressBar (more on this when u finish)

49. See you!