Delphi L06 GDI Drawing

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

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

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

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

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 be used with another “Component”s:
• Image1.Canvas
• Form1.Canvas

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.

Canvas
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
begin
//Canvas.Pen
Canvas.Pen.color:= clRed;
Image1.Canvas.LineTo(30,120);
end;

Canvas - functions

Note That is Not what we want

Canvas - functions
begin
Canvas.Pen.color:= clRed;
end;

Canvas
begin
Canvas.Pen.Color:= CLRed;
end;

Canvas - functions

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

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

Canvas - functions
begin
X1:= 0;
X2:= 20;
Y1:= 0;
Y2:= 40;
Image1.Canvas.Rectangle(X1,Y1,X2,Y2);
end;

Canvas - functions

Notice The
Difference

Canvas - functions
begin
X1:= 0;
X2:= 60;
Y1:= 0;
Y2:= 40;
Image1.Canvas.Ellipse(X1,Y1,X2,Y2);
end;

How To Draw A Circle?
begin
X1:= 0;
X2:= 60;
Y1:= 0;
Y2:= 60;
Image1.Canvas.Ellipse(X1,Y1,X2,Y2);
end;

Canvas - functions
begin
//Canvas.Pen
Image1.Canvas.Pen.color:= ClRed;
Image1.Canvas.Pen.Width:= 10;
end;

Canvas - functions

Now, That’s Right ;)

Canvas - functions
Canvas.Brush;
begin
Image1.Canvas.Pen.color:= clGray;
Image1.Canvas.Brush.Color:= clRed;
Image1.Canvas.Rectangle(10,10,100,100);
end;

Canvas - functions
Canvas.Brush;

begin
Image1.Canvas.Ellipse(10,10,150,150);
end;

Canvas - functions

begin
Image1.Canvas.Brush.Color:= clGreen;
Image1.Canvas.Ellipse(10,10,150,150);
end;

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.

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)

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.

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

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?

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

Canvas - TextOut
• This will help u for ur next exercise
begin
Form2103232.Canvas.TextOut(20,20,'Crushed ');
Canvas.TextOut(30,20,'Crushed ');
end;

Canvas - TextOut
begin
Form2.Canvas.Font.Size:= 14;
Form2.Canvas.Font.Color:= clRed;
Form2.Canvas.Font.Orientation:= 100;
end;

Canvas - TextOut

var
I: Integer;
begin
for I:= 0 to 10 do
Begin
Form2.Canvas.Font.Orientation:= 100 + i*100;
End;
end;

Canvas - TextOut

var
I: Integer;
begin
for I:= 0 to 10 do
Begin
Form2.Canvas.Font.Orientation:= 100 - i*100;
End;
end;

Canvas

// 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);

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)

Delphi L06 GDI Drawing

Recommended

Recommended

More Related Content

Similar to Delphi L06 GDI Drawing

Similar to Delphi L06 GDI Drawing (20)

More from Mohammad Shaker

More from Mohammad Shaker (20)

Recently uploaded

Recently uploaded (20)

Delphi L06 GDI Drawing