Canvas Drawing

[Home]   [Puzzles & Projects]    [Delphi Techniques]   [Math Topics]   [Library]   [Utilities]

 

Search

 

Search DelphiForFun.org only

Support DFF

 If you shop at Amazon anyway,  consider using this link. We receive a few cents from each purchase.   Thanks.

In Association with Amazon.com

 

Support DFF

 If you benefit from the website,  in terms of knowledge, entertainment value, or something otherwise useful, consider making a donation via PayPal  to help defray the costs.  (No PayPal account necessary to donate via credit card.)  Transaction is secure.

 

 

Contact

Feedback:  Send an e-mail with your comments about this program (or anything else).

 

Search DelphiForFun.org only

 

 

 

 

 

Here's a simple program that illustrates how to draw on a canvas, save the drawing to a bitmap (or file), clear the canvas  and redisplay a previously saved image.    Oh, and scribble too if you want.

We'll use a TImage component to provide the canvas.  Even though  forms have canvas properties, drawing on them generally  causes more headaches than it's worth.   First, it is impossible to redraw the image when the form is redisplayed.  Also the canvas covers the entire form so it's easy to draw on top of other controls ( buttons. labels, etc.), usually with undesirable results.     Both of these problems disappear when we use TImage.   

I placed several buttons on the form: 

bulletCreate ellipses adds 10 ellipses of random size and color to the canvas,   You can see here how clipping is beneficial.   TColor fields are made of 3 bytes representing the red, green and blue components (RGB format).  So I colored each ellipse using Random(256*256*256);  Don't be concerned about efficiency loss from not pre-multiplying these numbers - Delphi compiler will do it for you one time so the object code will contain only the product.    We also could have written Random($FFFFFF); to specify the same result as 3 hexadecimal bytes. 
bulletClear simply draws a white rectangle over the entire screen.
bulletSave canvas to list creates a TBitmap, copies the canvas to it, and saves the bitmap as an object in the listbox items stringlist.   Copyrect is the standard procedure to accomplish this.
bulletSave canvas to file only takes a couple of lines of code to save the current canvas to a file.  Savedialog provides the user interface to get the filename for us.  

Retrieving the images from the listbox when the user selects and item is pretty easy - just copy the bitmap from the selected item back to the canvas, again using Copyrect.   

Finally I added a scribble feature to allow user drawing on the canvas.  This uses a OnMouseDown exit to set the initial drawing parameters (Pen width and color) and to set a Drawing boolean variable so that OnMouseMove will know whether a line  is to be drawn.   And of course, OnMouseUp exits just to reset the Drawing flag to false.     I learned here that cursor refresh while drawing sometimes erases a portion of the line being drawn.  The solution trick is to set the Cursor to CrNone before the line is drawn and CrDefault after.  

Plenty of room to expand on this if you want --  user control of pen colors and widths, erase or undo mode, customized cursors, for starters.   

Have fun!

Click here to download source code.   

 

  [Feedback]   [Newsletters (subscribe/view)] [About me]
Copyright 2000-2014, Gary Darby    All rights reserved.