(Replacing page with '{{Propose Delete}} Reason: see full article Create Your Own Paint Program') |
|||
| Line 1: | Line 1: | ||
| + | {{Propose Delete}} |
||
| ⚫ | |||
| ⚫ | |||
| − | In this section, you will add '''save''' and '''open''' features to your paint program, and a color chooser. |
||
| − | |||
| − | ===Saving the Painting=== |
||
| − | |||
| − | Doubleclick on the mainmenu component on your mainform. Right click on "Exit" under the file menu and choose '''Insert''' (the exit command should be last in the file menu so we’ll insert other items above it). Enter "Save As" as the caption for the new item. Close the mainmenu editor. |
||
| − | |||
| − | Remember the "Save As" dialog is the same in all Windows programs - it is built in. Choose a "Save As" component from the dialogs tab on the component palette. Click it anywhere on your form. Notice that it is named "SaveDialog1". We have to add code to make the menu command use SaveDialog1 to write the image into a file. Create a response procedure for "Save As" by pulling down your form’s file menu and choosing "Save As". Look for the procedure in your main unit and fill it in with this code: |
||
| − | <code><pre> |
||
| − | procedure TMainform.SaveAs1Click(Sender: TObject); |
||
| − | begin |
||
| − | SaveDialog1.DefaultExt := 'BMP'; {set the default extension} |
||
| − | if saveDialog1.execute then {show dialog; if user clicks ok then ...} |
||
| − | begin |
||
| − | filename := SaveDialog1.filename; {remember the filename entered} |
||
| − | Image1.Picture.SaveToFile(filename); {tell Image1 to save itself} |
||
| − | end; |
||
| − | end; |
||
| − | </pre></code> |
||
| − | Notice that each statement ends with a semicolen (a statement like if-then often extends over several lines). Begin-end is used to put several statements together in the then part. It is very helpful if the begin-end pairs are indented equally. The comments in curly brackets are most helpful when reading the code months or years later. Study the code and comments until they make sense and you understand what the computer does when someone uses the save command. |
||
| − | |||
| − | It is interesting to attempt to run the program at this point. You will get an error message telling you that the compiler doesn't know what "filename" is. It knows the "filename" in "SaveDialog1.filename" but it doesn't recognize the other "filename" that is not part of the SaveDialog. We need to tell Delphi in advance that we are going to use a variable called "filename" to store the name of the file. Put |
||
| − | <code><pre> |
||
| − | filename: string; |
||
| − | </pre></code> |
||
| − | in your list of variables near the top of the unit (after drawingNow: Boolean). A '''string''' is a variable that holds a series of text characters. It probably is a little confusing that the program can have two variables with the same name, one that is part of the SaveDialog and another that is not, but it is a very useful feature of object oriented programming. And a bit dangerous - it might be better to use a different name for your own variable holding the file name. |
||
| − | |||
| − | Test your "save as" command by drawing something and saving it. The .bmp file created should open with Windows paint so you can see that it successfully saved. |
||
| − | |||
| − | At this stage you might be wondering how a programmer can possibly remember all the things that an object knows how to do. The answer is that most programmers do not; they have to refer to Delphi's help system. Click once on the image to select it, then hold down the control key and press F1 to see the help on TImage (that is, "Type Image" which is a class of objects). Click the "Methods" heading to see all the things that an Image knows how to do. No "SaveToFile" command is listed! Try clicking the "properties" heading and note that an Image has a "Picture". Click on "picture", then on the "Tpicture" link to see what methods or capabilities it has. You will find "SaveToFile" there and so the command must be entered as '''Image1.Picture.SaveToFile'''. The help entry on SaveToFile |
||
| − | <code><pre> |
||
| − | procedure SaveToFile(const FileName: string); |
||
| − | </pre></code> |
||
| − | shows that a filename string must be entered in brackets following the command name. |
||
| − | |||
| − | The help is very powerful, but a bit awkward. If you have Delphi 5 or later, try this technique. Erase the saveToFile line in your program and type it again. If you pause after typing "Image1.", Delphi will prompt you with a list of the properties Image1 has, so you can choose "picture". Pause again after typing the dot after that, and it will again prompt with a list of possible commands so you can choose SaveToFile. This feature is called '''code completion'''. |
||
| − | |||
| − | ===Opening a file=== |
||
| − | |||
| − | Can you do the file - open command yourself? It will be very similar to the save command. You'll have to add an item to the menu, a file-open dialog from the component palette, and a bit of code to get the filename from the dialog and use it to load the file. |
||
| − | After you get it working, you might add this statement |
||
| − | <code><pre> |
||
| − | OpenDialog1.Filter := 'Bitmap (*.bmp)|*.BMP'; |
||
| − | </pre></code> |
||
| − | to make the open dialog show only bmp files (the only kind we can open at present). |
||
| − | |||
| − | ===Color Chooser: a button and a dialog=== |
||
| − | |||
| − | Delphi has a color selection component. On the dialogs tab of the component palette, choose a color dialog and add it to the form. Alternatively you can choose TJvFullColorDialog from the Jedi suite. All we have to do is add a button to activate it. On the "additional" tab, choose a "BitBtn" and put it on your form (it could be on the tool panel, but doesn't have to be). In the object inspector, name this button "ColorBtn" and add the caption "colors". If you wish, you can choose a glyph for this button as well. |
||
| − | |||
| − | Doubleclick on the color button to add a response method to the unit. Enter these statements in the new procedure: |
||
| − | <code><pre> |
||
| − | colordialog1.execute; |
||
| − | image1.Canvas.pen.color := colordialog1.color; |
||
| − | </pre></code> |
||
| − | The first line runs the dialog where the use chooses a color. The 2nd line tells the image what the chosen color was. An image has a pen for drawing lines and a brush for filling interiors, which we will work with later. |
||
| − | |||
| − | [[Create Your Own Paint Program 4|go on to page 4]] |
||
Latest revision as of 14:33, 14 January 2009
This page has been proposed for deletion. Please discuss the proposal on the discussion page.
Reason: see full article Create Your Own Paint Program