Intro to Event-driven Programming
and Forms with Delphi
L06 – GDI Drawing

Mohammad Shaker
mohammadshakergtr.wordpress.com...
Randomize and Color
procedure TForm2.Button1Click(Sender: TObject);
begin
Form2.Color:= ClRed;
end;
Randomize and Color
Randomize and Color
procedure TForm2.Button1Click(Sender:
TObject);
var i:integer;
begin
i:= Random(100);
Form2.Color:= i;...
Randomize and Color
procedure TForm2.Button1Click(Sender:
TObject);
var i:integer;
begin
i:= Random(RandSeed);
Form2.Color...
Drawing
• What’s a Canvas?
• Canvas Methods
Canvas.Method()

// Form Object

Object.Canvas.Method()

// An Object
Canvas
• It’s an “Object”
• It’s used mainly for “drawing”
• Canvas:
– Can be used as a “Variable”:
• Can: tCanvas

– Can ...
Canvas
• Move the start point to a specific point.
Canvas.MoveTo(x,y)

• Move the start point to a specific point.
• Draw ...
Canvas
procedure TForm2.Button1Click(Sender: TObject);
begin
Canvas.MoveTo(10,10);
Canvas.LineTo(200,200);
end;
Canvas - functions
//Canvas.Pen
Canvas.Pen.color:= ClBlack;

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

Form1.Canvas.Pen.Width:= 10;
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
//Canvas.Pen
Canvas.Pen.color:= clRed;
Canvas.Pen...
Canvas - functions

Note That is Not what we want
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.LineTo(30,120);
Canvas.Pen.color:= ...
Canvas - functions
• Why?
Canvas
procedure TForm2.Button1Click(Sender: TObject);
begin
Canvas.MoveTo(10,10);
Canvas.LineTo(50,70);
Canvas.LineTo(120...
Canvas
Canvas - functions

Canvas.Rectangle(X1,Y1,X2,Y2);
Canvas.Ellipse(X1,Y1,X2,Y2);
Canvas.RoundRect(X1,Y1,X2,Y2,X3,Y3);
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 10;
X2:= 20;
Y1:= ...
Canvas - functions
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 0;
X2:= 20;
Y1:= 0...
Canvas - functions

Notice The
Difference
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 0;
X2:= 60;
Y1:= 0...
Canvas - functions
How To Draw A Circle?
procedure TForm2.Button1Click(Sender: TObject);
Var X1,X2,Y1,Y2: Integer;
begin
X1:= 0;
X2:= 60;
Y1:...
How To Draw A Circle?
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
//Canvas.Pen
Image1.Canvas.Pen.color:= ClRed;
Ima...
Canvas - functions

Now, That’s Right ;)
Canvas - functions
Canvas.Brush;
procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.Pen.color:= clGray;
I...
Canvas - functions
Canvas - functions
Canvas.Brush;

procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.Pen.color:= clGray;
...
Canvas - functions
Canvas - functions

procedure TForm2.Button1Click(Sender: TObject);
begin
Image1.Canvas.Pen.color:= clGray;
Image1.Canvas....
Canvas - functions
Common Canvas Prop.
Delphi help
Properties

Descriptions

Font

Specifies the font to use when writing text on the image. ...
Common Canvas methods
Delphi help
Method

Descriptions

Arc

Draws an arc on the image along the perimeter of the ellipse ...
Common Canvas methods
Delphi help
LineTo
MoveTo

Draws a line on the canvas from PenPos to the point specified by X and Y,...
Common Canvas methods
Delphi help
RoundRect

Draws a rectangle with rounded corners on the canvas.

StretchDraw

Draws a g...
Canvas
procedure TForm2.Image1Click(Sender: TObject);
Var X,Y: Integer;
begin
Image1.Canvas.LineTo(Mouse.CursorPos.X,Mouse...
Canvas
procedure TForm2.Image1Click(Sender: TObject);
Var X,Y: Integer;
begin
Image1.Canvas.LineTo(Mouse.CursorPos.X Form2...
Canvas - TextOut
• This will help u for ur next exercise
procedure TForm2103232.Button1Click(Sender: TObject);
begin
Form2...
Canvas - TextOut
• This will help u for ur next exercise
procedure TForm2.Button1Click(Sender: TObject);
begin
Form2.Canva...
Canvas - TextOut
• This will help u for ur next exercise

procedure TForm2.Button1Click(Sender: TObject);
var
I: Integer;
...
Canvas - TextOut
• This will help u for ur next exercise

procedure TForm2.Button1Click(Sender: TObject);
var
I: Integer;
...
Canvas
• Let’s draw
Canvas
• This will help u for ur next exercise

// Returns the Mouse Cursor position on the X-Axis
Mouse.CursorPos.X
// Re...
Canvas
• Let’s have this exercise:
– We have a “form” that contains an “Image”
• 1st: we want to draw in the “Image” as it...
See you!
Delphi L06 GDI Drawing
Upcoming SlideShare
Loading in …5
×

Delphi L06 GDI Drawing

1,155 views

Published on

Published in: Technology, Business
  • Be the first to comment

Delphi L06 GDI Drawing

  1. 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
  2. 2. Randomize and Color procedure TForm2.Button1Click(Sender: TObject); begin Form2.Color:= ClRed; end;
  3. 3. Randomize and Color
  4. 4. Randomize and Color procedure TForm2.Button1Click(Sender: TObject); var i:integer; begin i:= Random(100); Form2.Color:= i; end;
  5. 5. Randomize and Color procedure TForm2.Button1Click(Sender: TObject); var i:integer; begin i:= Random(RandSeed); Form2.Color:= i; end;
  6. 6. Drawing • What’s a Canvas? • Canvas Methods Canvas.Method() // Form Object Object.Canvas.Method() // An Object
  7. 7. 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
  8. 8. 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.
  9. 9. Canvas procedure TForm2.Button1Click(Sender: TObject); begin Canvas.MoveTo(10,10); Canvas.LineTo(200,200); end;
  10. 10. Canvas - functions //Canvas.Pen Canvas.Pen.color:= ClBlack; //Canvas.Pen Form1.Canvas.Pen.color:= ClBlack;
  11. 11. Canvas - functions Canvas.Pen.Width:= 10; Form1.Canvas.Pen.Width:= 10;
  12. 12. Canvas - functions procedure TForm2.Button1Click(Sender: TObject); begin //Canvas.Pen Canvas.Pen.color:= clRed; Canvas.Pen.Width:= 10; Image1.Canvas.LineTo(30,120); end;
  13. 13. Canvas - functions Note That is Not what we want
  14. 14. 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;
  15. 15. Canvas - functions • Why?
  16. 16. 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;
  17. 17. Canvas
  18. 18. Canvas - functions Canvas.Rectangle(X1,Y1,X2,Y2); Canvas.Ellipse(X1,Y1,X2,Y2); Canvas.RoundRect(X1,Y1,X2,Y2,X3,Y3);
  19. 19. 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;
  20. 20. Canvas - functions
  21. 21. 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;
  22. 22. Canvas - functions Notice The Difference
  23. 23. 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;
  24. 24. Canvas - functions
  25. 25. 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;
  26. 26. How To Draw A Circle?
  27. 27. 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;
  28. 28. Canvas - functions Now, That’s Right ;)
  29. 29. 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;
  30. 30. Canvas - functions
  31. 31. 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;
  32. 32. Canvas - functions
  33. 33. 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;
  34. 34. Canvas - functions
  35. 35. 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.
  36. 36. 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)
  37. 37. 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.
  38. 38. 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
  39. 39. 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?
  40. 40. 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
  41. 41. 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;
  42. 42. 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;
  43. 43. 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;
  44. 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(100,20,'Crushed '); End; end;
  45. 45. Canvas • Let’s draw
  46. 46. 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);
  47. 47. 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)
  48. 48. See you!

×