Thursday, July 14, 2011

C++ .NET Programming - How To Draw 2D Objects (Circle, Rectangle, etc) on Windows Forms Application

First of all, I'd like to present my first tutorial about  C++ / CLI CLR .NET Programming. This time it's about Graphical User Interface in C++ .NET (in this case, i don't want to use native C++, because it's so annoying -_-). Okay, I assume that you have a little knowledge about C++ .NET GUI (Don't tell me that you don't know how to create a new form, add text box, and some other things like that). And of course, I also assume that you understand how to program in C++ CLR behavior (don't tell me that you're a newbie here -_-). So, here we go the tutorial!

Ups, I almost forgot, before we start this kind of tutorial, I'd like to tell you about what IDE that I used. Maybe you already know (you should know), I use Microsoft Visual Studio 2008 Professional Edition. You don't have it? Then maybe you could use the Express edition, or you can use the old version such as Visual Studio 2005. Okay, Let's start the tutorial!

1. First, you have to make a new project. Press "File" - "New" - "Project..."


Choose "C++" - "CLR" - "Windows Forms Application" and name your project "Draw2DObjectForBaka".


After you make a new project, you'll see something like this:


2. What to do next? Take a break, you've successfully create a new Windows Form. Congratulations! Now, let's try to make some 2D Objects on this Form. How to make it? It's easy. First, choose "Paint" event and make a function to handle this event.


Then, you'll see something like this:

private: System::Void Form1_Paint(System::Object^  sender, System::Windows::Forms::PaintEventArgs^  e) 
{
}
3. Now, let's create some 2D objects onto the Form. First, let's try to make a circle, a rectangle, and an ellipse. It's easy, Just copy the following code!
private: System::Void Form1_Paint(System::Object^  sender, System::Windows::Forms::PaintEventArgs^  e) {
     Graphics^ g = e->Graphics;
 
     //create an ellipse with
     //  Black color
     //  start position = (10, 10) (start position is always Top Left of the object)
     //  width = 75 px, height = 50 px
     g->DrawEllipse(Pens::Black, 10, 10, 75, 50);
 
     //create an ellipse with
     //  Red color
     //  start postion = (90, 10)
     //  width = 75 px, height = 75 px
     //or you can say create a circle with
     //  Red color
     //  start position = (90, 10)
     //  diameter = 75 px
     g->DrawEllipse(Pens::Red, 90, 10, 75, 75);
 
     //create a rectangle with
     //  Blue color
     //  start position = (170, 10)
     //  width = 75, height = 75
     g->DrawRectangle(Pens::Blue, 170, 10, 75, 75);
}
4. Try to run your program. Press "F5" or "Debug" - "Start Debugging" and you'll see something like this:


You did it! Now, let's see the objects. Feel boring right? So, how about we try to fill the color inside the object? Let's go to the next step!

5. Now, let's try to make the objects filled with color. Edit your code until become like the following code:
private: System::Void Form1_Paint(System::Object^  sender, System::Windows::Forms::PaintEventArgs^  e) {
     Graphics^ g = e->Graphics;
  
     //fill an ellipse with
     //  White color
     //  start position = (10, 10) (start position is always Top Left of the object)
     //  width = 75 px, height = 50 px
     g->FillEllipse(Brushes::White, 10, 10, 75, 50);
 
     //create an ellipse with
     //  Black color
     //  start position = (10, 10) (start position is always Top Left of the object)
     //  width = 75 px, height = 50 px
     g->DrawEllipse(Pens::Black, 10, 10, 75, 50);
 
     //fill a circle with
     //  Yellow color
     //  start position = (90, 10)
     //  diameter = 75 px
     g->FillEllipse(Brushes::Yellow, 90, 10, 75, 75);
 
     //create an ellipse with
     //  Red color
     //  start postion = (90, 10)
     //  width = 75 px, height = 75 px
     //or you can say create a circle with
     //  Red color
     //  start position = (90, 10)
     //  diameter = 75 px
     g->DrawEllipse(Pens::Red, 90, 10, 75, 75);
    
     //fill a rectangle with
     //  Pink color
     //  start position = (170, 10)
     //  width = 75, height = 75
     g->FillRectangle(Brushes::Pink, 170, 10, 75, 75);
 
     //create a rectangle with
     //  Blue color
     //  start position = (170, 10)
     //  width = 75, height = 75
     g->DrawRectangle(Pens::Blue, 170, 10, 75, 75);
}

Then, try to run your program one more time, and you'll see something cool like this:


6. Looks great, right? But, if you see the picture, it's not smooth enough. Now, let's add a line of code (g->SmoothingMode = Drawing2D::SmoothingMode::HighQuality;)  to make the image looks smooth (or you can say, High Quality image).
private: System::Void Form1_Paint(System::Object^  sender, System::Windows::Forms::PaintEventArgs^  e) {
        Graphics^ g = e->Graphics;
      
     //make the image become High Quality
     g->SmoothingMode = Drawing2D::SmoothingMode::HighQuality;
 
     //fill an ellipse with
     //  White color
     ...
     ...
     ...
     ...
}
Try run your program and compare it with the result before.

7. Now, how can I draw the objects onto the Panel? It's an easy task. First, create a Panel onto your form, and choose "Paint" event of the Panel object.

 

8. Copy the Code from Form1_Paint into panel1_Paint. Try to run your program, and see the result!


Okay, I think that's all about how to draw 2D objects onto Form and Panel. Hope this simple kind of tutorial gives you a good knowledge. And one more thing, I know some of you don't like to read this article from the beginning till the end. And I also know that what you're looking for is download link of the Solution (what a lazy.. -_-). Don't worry, I already upload my project and you can free to download and use it. Please leave a comment if you need something to ask ^o^.

3 comments:

  1. Very nice tutorial, I found exactly what I needed. I am new to C++ .NET programming and would like to read more about the entire thing. I don't know what to look for when I search (the right description/ name). It would be great if you could recommend me some links or books with basics, from the actual language used and maiby something that also contains some graphics (structure, examples and so on). Thank you very much !

    ReplyDelete
  2. Hi Cezar Fleseriu, Glad this tutorial is useful for you.

    A simple Google search with keyword "C++ .NET Tutorial" will give you many useful links.
    Try this site if you want to learn more about C++ .NET http://www.functionx.com/vcnet/index.htm
    It contains almost all about C++ .NET

    ReplyDelete
  3. Hi, it's me again. The tutorial you recommended me is great, I am learning from it now. Would you happen to know how to write letters and numbers in a picture box? I would like to draw hexa values. Thank you !

    ReplyDelete

Please leave your comment here

Back to top