delphi l06 gdi drawing

Mohammad Shakermohammadshakergtr.wordpress.com

Intro to Event-driven Programming and Forms with Delphi@ZGTRShaker

2010, 2011, 2012

Intro to Event-driven Programming and Forms with Delphi

L06 – GDI Drawing

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;

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.

• Move the start point to a specific point.• Draw a line to the specific point.

• Note that “LineTo” contains “MoveTo” also.

Canvas.LineTo(x,y)

Canvas.MoveTo(x,y)

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

Form1.Canvas.Pen.Width:= 10;

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 - functions

• Why?

Canvas


begin





Canvas.Pen.Color:= CLRed;




end;

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


Var X1,X2,Y1,Y2: Integer;

begin

X1:= 10;

X2:= 20;

Y1:= 30;

Y2:= 40;

Canvas.Rectangle(X1,Y1,X2,Y2);

end;

Canvas - functions

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;

Canvas - functions

How To Draw A Circle?



begin

X1:= 0;

X2:= 60;

Y1:= 0;

Y2:= 60;

Image1.Canvas.Ellipse(X1,Y1,X2,Y2);

end;

How To Draw A Circle?

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 - functions

Canvas.Brush;


begin





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

end;

Canvas - functions

Canvas - functions


begin





Image1.Canvas.Brush.Color:= clGreen;

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

end;

Canvas - functions

Common Canvas Prop.Delphi help

Properties Descriptions

Font Specifies the font to use when writing text on the image. Set the properties of the TFontobject 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 methodsDelphi 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(VCL only)

Fills an area of the canvas using the current brush.

FrameRect(VCL only)

Draws a rectangle using the Brush of the canvas to draw the border.


LineTo Draws a line on the canvas from PenPos to the point specified by X and Y, and sets the pen position to (X, Y).

MoveTo 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.


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

• Let’s draw

Canvas


// Now we can use it like the following

Canvas.LineTo(Mouse.CursorPos.X,Mouse.CursorPos.Y);

// Returns the Mouse Cursor position on the X-Axis

Mouse.CursorPos.X

// Returns the Mouse Cursor position on the Y-Axis

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)

See you!

delphi l06 gdi drawing

Technology

canvas functions canvas

canvas methods canvas

pen canvas

y2 canvas

clred canvas

drawing canvas

canvas form1

canvas functionscanvas