SlideShare a Scribd company logo
1 of 49
Download to read offline
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
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
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.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 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)
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.
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
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

// 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)
See you!

More Related Content

Similar to Delphi L06 GDI Drawing

C++ Windows Forms L08 - GDI P1
C++ Windows Forms L08 - GDI P1 C++ Windows Forms L08 - GDI P1
C++ Windows Forms L08 - GDI P1 Mohammad Shaker
 
Complete Tutorial for 3d Text on Photos
Complete Tutorial for 3d Text on PhotosComplete Tutorial for 3d Text on Photos
Complete Tutorial for 3d Text on PhotosPj Dhanoa
 
Please make the complete program, distinguishing between each class .pdf
Please make the complete program, distinguishing between each class .pdfPlease make the complete program, distinguishing between each class .pdf
Please make the complete program, distinguishing between each class .pdffaxteldelhi
 
How to Create Vintage Type Text Effect in Photoshop
How to Create Vintage Type Text Effect in PhotoshopHow to Create Vintage Type Text Effect in Photoshop
How to Create Vintage Type Text Effect in PhotoshopMetrodesk
 
Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx
Practical ActivitiesWeek06lab08-1.pngPractical Activities.docxPractical ActivitiesWeek06lab08-1.pngPractical Activities.docx
Practical ActivitiesWeek06lab08-1.pngPractical Activities.docxChantellPantoja184
 
Adobe photoshop cs4 keyboard shortcut
Adobe photoshop cs4 keyboard shortcutAdobe photoshop cs4 keyboard shortcut
Adobe photoshop cs4 keyboard shortcutJubair Ahmed Junjun
 
Photoshop Beginners Course
Photoshop Beginners CoursePhotoshop Beginners Course
Photoshop Beginners CourseMiracleOdion
 
On the tomcat drive in folder cosc210 you will find file named Paint.docx
On the tomcat drive in folder cosc210 you will find file named Paint.docxOn the tomcat drive in folder cosc210 you will find file named Paint.docx
On the tomcat drive in folder cosc210 you will find file named Paint.docxdunhamadell
 
Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts Fanus van Straten
 
Creative Coding 1 - 1 Introduction
Creative Coding 1 - 1 IntroductionCreative Coding 1 - 1 Introduction
Creative Coding 1 - 1 IntroductionTill Nagel
 
Photoshop Tutorial Booklet
Photoshop Tutorial BookletPhotoshop Tutorial Booklet
Photoshop Tutorial BookletGraveney School
 
Adobe illustrator c55 keyboard shortcut.
Adobe illustrator c55 keyboard shortcut.Adobe illustrator c55 keyboard shortcut.
Adobe illustrator c55 keyboard shortcut.Jubair Ahmed Junjun
 
What is Web Designing by Zakaria
What is Web Designing by ZakariaWhat is Web Designing by Zakaria
What is Web Designing by ZakariaZakaria Abada
 

Similar to Delphi L06 GDI Drawing (20)

Chapter 13
Chapter 13Chapter 13
Chapter 13
 
C++ Windows Forms L08 - GDI P1
C++ Windows Forms L08 - GDI P1 C++ Windows Forms L08 - GDI P1
C++ Windows Forms L08 - GDI P1
 
Scmad Chapter06
Scmad Chapter06Scmad Chapter06
Scmad Chapter06
 
dr_1
dr_1dr_1
dr_1
 
dr_1
dr_1dr_1
dr_1
 
Complete Tutorial for 3d Text on Photos
Complete Tutorial for 3d Text on PhotosComplete Tutorial for 3d Text on Photos
Complete Tutorial for 3d Text on Photos
 
Owl Clock
Owl ClockOwl Clock
Owl Clock
 
Please make the complete program, distinguishing between each class .pdf
Please make the complete program, distinguishing between each class .pdfPlease make the complete program, distinguishing between each class .pdf
Please make the complete program, distinguishing between each class .pdf
 
How to Create Vintage Type Text Effect in Photoshop
How to Create Vintage Type Text Effect in PhotoshopHow to Create Vintage Type Text Effect in Photoshop
How to Create Vintage Type Text Effect in Photoshop
 
Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx
Practical ActivitiesWeek06lab08-1.pngPractical Activities.docxPractical ActivitiesWeek06lab08-1.pngPractical Activities.docx
Practical ActivitiesWeek06lab08-1.pngPractical Activities.docx
 
Adobe photoshop cs4 keyboard shortcut
Adobe photoshop cs4 keyboard shortcutAdobe photoshop cs4 keyboard shortcut
Adobe photoshop cs4 keyboard shortcut
 
Photoshop Beginners Course
Photoshop Beginners CoursePhotoshop Beginners Course
Photoshop Beginners Course
 
On the tomcat drive in folder cosc210 you will find file named Paint.docx
On the tomcat drive in folder cosc210 you will find file named Paint.docxOn the tomcat drive in folder cosc210 you will find file named Paint.docx
On the tomcat drive in folder cosc210 you will find file named Paint.docx
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts Adobe Illustrator CS5 Keyboard Shortcuts
Adobe Illustrator CS5 Keyboard Shortcuts
 
Creative Coding 1 - 1 Introduction
Creative Coding 1 - 1 IntroductionCreative Coding 1 - 1 Introduction
Creative Coding 1 - 1 Introduction
 
Inkscape - A brief
Inkscape - A briefInkscape - A brief
Inkscape - A brief
 
Photoshop Tutorial Booklet
Photoshop Tutorial BookletPhotoshop Tutorial Booklet
Photoshop Tutorial Booklet
 
Adobe illustrator c55 keyboard shortcut.
Adobe illustrator c55 keyboard shortcut.Adobe illustrator c55 keyboard shortcut.
Adobe illustrator c55 keyboard shortcut.
 
What is Web Designing by Zakaria
What is Web Designing by ZakariaWhat is Web Designing by Zakaria
What is Web Designing by Zakaria
 

More from Mohammad Shaker

12 Rules You Should to Know as a Syrian Graduate
12 Rules You Should to Know as a Syrian Graduate12 Rules You Should to Know as a Syrian Graduate
12 Rules You Should to Know as a Syrian GraduateMohammad Shaker
 
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]Mohammad Shaker
 
Interaction Design L06 - Tricks with Psychology
Interaction Design L06 - Tricks with PsychologyInteraction Design L06 - Tricks with Psychology
Interaction Design L06 - Tricks with PsychologyMohammad Shaker
 
Short, Matters, Love - Passioneers Event 2015
Short, Matters, Love -  Passioneers Event 2015Short, Matters, Love -  Passioneers Event 2015
Short, Matters, Love - Passioneers Event 2015Mohammad Shaker
 
Unity L01 - Game Development
Unity L01 - Game DevelopmentUnity L01 - Game Development
Unity L01 - Game DevelopmentMohammad Shaker
 
Interaction Design L03 - Color
Interaction Design L03 - ColorInteraction Design L03 - Color
Interaction Design L03 - ColorMohammad Shaker
 
Interaction Design L05 - Typography
Interaction Design L05 - TypographyInteraction Design L05 - Typography
Interaction Design L05 - TypographyMohammad Shaker
 
Interaction Design L04 - Materialise and Coupling
Interaction Design L04 - Materialise and CouplingInteraction Design L04 - Materialise and Coupling
Interaction Design L04 - Materialise and CouplingMohammad Shaker
 
Android L04 - Notifications and Threading
Android L04 - Notifications and ThreadingAndroid L04 - Notifications and Threading
Android L04 - Notifications and ThreadingMohammad Shaker
 
Android L09 - Windows Phone and iOS
Android L09 - Windows Phone and iOSAndroid L09 - Windows Phone and iOS
Android L09 - Windows Phone and iOSMohammad Shaker
 
Interaction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsInteraction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsMohammad Shaker
 
Interaction Design L02 - Pragnanz and Grids
Interaction Design L02 - Pragnanz and GridsInteraction Design L02 - Pragnanz and Grids
Interaction Design L02 - Pragnanz and GridsMohammad Shaker
 
Android L10 - Stores and Gaming
Android L10 - Stores and GamingAndroid L10 - Stores and Gaming
Android L10 - Stores and GamingMohammad Shaker
 
Android L06 - Cloud / Parse
Android L06 - Cloud / ParseAndroid L06 - Cloud / Parse
Android L06 - Cloud / ParseMohammad Shaker
 
Android L08 - Google Maps and Utilities
Android L08 - Google Maps and UtilitiesAndroid L08 - Google Maps and Utilities
Android L08 - Google Maps and UtilitiesMohammad Shaker
 
Android L03 - Styles and Themes
Android L03 - Styles and Themes Android L03 - Styles and Themes
Android L03 - Styles and Themes Mohammad Shaker
 
Android L02 - Activities and Adapters
Android L02 - Activities and AdaptersAndroid L02 - Activities and Adapters
Android L02 - Activities and AdaptersMohammad Shaker
 
Indie Series 03: Becoming an Indie
Indie Series 03: Becoming an IndieIndie Series 03: Becoming an Indie
Indie Series 03: Becoming an IndieMohammad Shaker
 

More from Mohammad Shaker (20)

12 Rules You Should to Know as a Syrian Graduate
12 Rules You Should to Know as a Syrian Graduate12 Rules You Should to Know as a Syrian Graduate
12 Rules You Should to Know as a Syrian Graduate
 
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
 
Interaction Design L06 - Tricks with Psychology
Interaction Design L06 - Tricks with PsychologyInteraction Design L06 - Tricks with Psychology
Interaction Design L06 - Tricks with Psychology
 
Short, Matters, Love - Passioneers Event 2015
Short, Matters, Love -  Passioneers Event 2015Short, Matters, Love -  Passioneers Event 2015
Short, Matters, Love - Passioneers Event 2015
 
Unity L01 - Game Development
Unity L01 - Game DevelopmentUnity L01 - Game Development
Unity L01 - Game Development
 
Interaction Design L03 - Color
Interaction Design L03 - ColorInteraction Design L03 - Color
Interaction Design L03 - Color
 
Interaction Design L05 - Typography
Interaction Design L05 - TypographyInteraction Design L05 - Typography
Interaction Design L05 - Typography
 
Interaction Design L04 - Materialise and Coupling
Interaction Design L04 - Materialise and CouplingInteraction Design L04 - Materialise and Coupling
Interaction Design L04 - Materialise and Coupling
 
Android L05 - Storage
Android L05 - StorageAndroid L05 - Storage
Android L05 - Storage
 
Android L04 - Notifications and Threading
Android L04 - Notifications and ThreadingAndroid L04 - Notifications and Threading
Android L04 - Notifications and Threading
 
Android L09 - Windows Phone and iOS
Android L09 - Windows Phone and iOSAndroid L09 - Windows Phone and iOS
Android L09 - Windows Phone and iOS
 
Interaction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsInteraction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile Constraints
 
Interaction Design L02 - Pragnanz and Grids
Interaction Design L02 - Pragnanz and GridsInteraction Design L02 - Pragnanz and Grids
Interaction Design L02 - Pragnanz and Grids
 
Android L10 - Stores and Gaming
Android L10 - Stores and GamingAndroid L10 - Stores and Gaming
Android L10 - Stores and Gaming
 
Android L06 - Cloud / Parse
Android L06 - Cloud / ParseAndroid L06 - Cloud / Parse
Android L06 - Cloud / Parse
 
Android L08 - Google Maps and Utilities
Android L08 - Google Maps and UtilitiesAndroid L08 - Google Maps and Utilities
Android L08 - Google Maps and Utilities
 
Android L03 - Styles and Themes
Android L03 - Styles and Themes Android L03 - Styles and Themes
Android L03 - Styles and Themes
 
Android L02 - Activities and Adapters
Android L02 - Activities and AdaptersAndroid L02 - Activities and Adapters
Android L02 - Activities and Adapters
 
Android L01 - Warm Up
Android L01 - Warm UpAndroid L01 - Warm Up
Android L01 - Warm Up
 
Indie Series 03: Becoming an Indie
Indie Series 03: Becoming an IndieIndie Series 03: Becoming an Indie
Indie Series 03: Becoming an Indie
 

Recently uploaded

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

Delphi L06 GDI Drawing

  • 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.
  • 3. Randomize and Color procedure TForm2.Button1Click(Sender: TObject); begin Form2.Color:= ClRed; end;
  • 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.
  • 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;
  • 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;
  • 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;
  • 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;
  • 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;
  • 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;
  • 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;
  • 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)