Do you want to develop a Paint like application on windows? In this project we will develop a simple paint application in Modern C++ for windows. Before this we would like to recommend you our previous posts about Bitmap Operations In C++ Builder (FireMonkey) and Quickly Learn How To Use Canvas Drawing In C++ On Windows.
This example is good to learn how to use graphics. When you code in C++ about graphics if you are doing drawings anims etc. you understand well how C++ is strong and faster on these operations. In this simple Paint example we will use C++ Builder. Here we go;
1. Create a new RAD Studio, C++ Builder Multi-Device FireMonkey Project. Save all Project and Units to MyPaintApp folder.
2. Drag a new Image (TImage) from Tools Palette on to your Form, Change WrapMode to Original, Position and size it, give some space (left side, right side or top etc.) for buttons. We will use its bitmap to draw on it.
3. Drag a another Image (TImage) from Tools Palette on to your Form, Change WrapMode to Original, Position on the previous Image in same Width and Height. We will use this as a transparent layer to draw things.
Now we will add some buttons to this space to draw things.
4. Add four Buttons from the Tools Palette right side, shape them like squares,
Change Text property of Button1 to “.” , this button will draw pixels,
Change Text property of Button2 to “/“, this button will draw lines,
Change Text property of Button3 to “[]“, this button will draw rectangles,
Change Text property of Button4 to “O“, this button will draw circles,
5. Add three more Buttons from the Tools Palette right side;
Change Text property of Button5 to “New“, this button will clear the Bitmap,
Change Text property of Button6 to “Load“, this button will load the Bitmap,
Change Text property of Button7 to “Save“, this button will save the Bitmap,
6. Now lets add two ComboColorBoxes to define Fill Brush Color and Bitmap Background colors. You can add Labels to show them as Pen and BackGround colors.
7. Add a TrackBar from the Tools Palette. We will use this to define Opacity level of Brush that we draw.
8. Add OpenDialog and SaveDialog components from the Tools Palette
9. Double click to Button1 to Buton4 add these lines respectively as below;
10. Lets create a bitmap and copy it to form when form is being created. Change this Form line as below
11. Double to our “New” Button, write this line to clear bitmap();
12. Double to “Load” and “Save” Buttons, and write these lines to load and save image;
13. Lets define some globals for this Form. To do this, we will change the header of this unit. Click to Unit1.h header tab at the bottom and add lines to public section as below;
Here we defined new public variables and functions.
LX and LY are to remember Last X and Y positions of mouse when mouse down.
draw_mode is to define tool number
drawing is to know if mouse is pressed and we are drawing to transparent image (Image2), finally will draw to the backward image (Image1) when mouse is up.
14. Now let’s Go back to Unit1.cpp by clicking Unit1.cpp tab at the bottom. Let’s define our DrawbyMouse(…) drawing function as below. , add this to the end of Unit1.cpp
15. Finally we will draw selected thing by using mouse. Note that Image2 is a transparent bitmap over Image1. Technique here is; we will get mouse down, move and up events from Image2. When we click first we will get LX and LY positions and we set drawing=true; . When mouse button is being pressed ( if(drawing==true) ) we will keep drawing to this transparent Image2 bitmap. When mouse is up, finally we will draw the final shape to Image1 bitmap.
To do all these operations, we need Down, Up and Move Mouse events. Go to Image2 Event Properties, double click to OnMouseDown, OnMouseMove and OnMouseUp events. And modify lines as below.
16. Now we can run by Run , Run with Debugging or by Hitting F9
Final Words
When you learn basics of C++ Builder it is very easy to develop applications in Modern C++. C++ is very fast on these operations. It’s FireMonkey framework is very powerful to use bitmaps, transparency. It has many tools, color components. You can also make your applications glorious by using many shiny Styles on Forms and components.
In this technique we clear the whole transparent Image2 on on MouseMove event. Professionally you should clean and draw the only part of changes.