delphi l06 gdi drawing
TRANSCRIPT
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
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
Form1.Canvas.Pen.Width:= 10;
Canvas.Pen.Width:= 10;
Canvas - functions
procedure TForm2.Button1Click(Sender: TObject);
begin
//Canvas.Pen
Canvas.Pen.color:= clRed;
Canvas.Pen.Width:= 10;
Image1.Canvas.LineTo(30,120);
end;
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:= clRed;
Canvas.Pen.Width:= 10;
Canvas.LineTo(0,120);
end;
Canvas - functions
• Why?
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;
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:= 30;
Y2:= 40;
Canvas.Rectangle(X1,Y1,X2,Y2);
end;
Canvas - functions
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;
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;
Y2:= 40;
Image1.Canvas.Ellipse(X1,Y1,X2,Y2);
end;
Canvas - functions
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;
How To Draw A Circle?
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;
Canvas - functions
Now, That’s Right ;)
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;
Canvas - functions
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;
Canvas - functions
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;
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.
Common Canvas methodsDelphi help
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.
Common Canvas methodsDelphi 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
procedure TForm2103232.Button1Click(Sender: TObject);
begin
Form2103232.Canvas.TextOut(20,20,'Crushed ');
Canvas.TextOut(30,20,'Crushed ');
end;
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;
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;
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;
Canvas
• Let’s draw
Canvas
• This will help u for ur next exercise
// 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!