 | [Imagination is more important than knowledge - Albert Einstein] |
| 101 discussions on Graphic, Bitmap objects (Creating W3Coder GDI+ Draw Pad) [Author:Sreedhar Koganti Dt:Jul062003] |
Aim:
The aim of this article is to explain the usage of Graphic, Bitmap etc objects in GDI+. While explaining these, I will make a simple GDI+ Draw pad (intro to paint brush).
Introduction:
Recently some one sent me an email on asking a question on drawing an image on picture box object. I guess he read my previous articles on intro GDI+ (or Pie chart drawing using web services) and after reading he tried to draw an image on picture box. His question was, he tried to draw an image on a pictures box, but he could not able to make it due to lack of conceptual knowledge on GDI+ and he needs some information on it. That leads me to make this article to explain GDI+ more simpler way.
To make it more interesting, here I made a paintbrush kind of application and I called it as W3Coder GDI+ Draw Pad ;) To make that application I used various GDI+ classes and methods. Some of those are Graphic, Bitmap, and Pen objects.
Concepts made easy:
In order to use GDI+, first you need System.Drawing assembly. By default for windows applications, VS.Net will add it for you.
Here our intention is we wanted to draw an image. Let’s take an ideal daily life scenario. If you want to write some thing or draw some thing, what you would do? You would use paper or draw pad, am I right? In the same way in GDI+, if you want to draw some thing, you have to use Bitmap object. You can think Bitmap object is similar to paper or draw pad.
Syntax:
Dim bmp As Bitmap
bmp = New Bitmap(Width, Height)
Here bmp is our draw pad to draw the needed content. OK we got Bitmap object to draw. In real time, if you were not a good painter, what you would do? You will take help of some painter and you will ask him to draw the image.
In GDI+ world, Graphic object will help us in drawing. Let’s assume we have a Bitmap to draw, next thing is we have to attach that to Graphic object to draw some thing on Bitmap. This Graphic Draws the needed content on Bitmap.
Syntax:
Dim g As Graphics
g = Graphics.FromImage(bmp)
Now, you have a Bitmap, and Graphic object to draw some thing on Bitmap. Now we are ready to draw.
As I told earlier, we can draw the needed object on Bitmap with the help of Graphic Class. Like a painter (human), Graphic object also has limited number of properties and methods to draw. Of course painter can learn if he doesn’t know, but if we need some additional features in Graphic Object, we have to make a request to big brains at GDI+ team in Microsoft ;)
OK, what are the things Graphic Object can do for us? Below are the some of the important methods.
g.Clear
g.DrawArc
g.DrawBezier
g.DrawBeziers
g.DrawClosedCurve
g.DrawCurve
g.DrawEllipse
g.DrawIcon
g.DrawImage
g.DrawLine
g.DrawPie
g.DrawPolygon
g.DrawRectangle
g.DrawString
Please see SDK to know more on these. In order to use them properly, you have to pass the needed parameters to those functions.
One more important object is Pen. That helps us to pick the color to draw.
Moving to Reality:
In our example we are trying to make a Draw Pad (Similar to Paint brush). You can see that in below figure.
What we can do with this:
1. You can draw lines, Rectangles and circles in Drawing Board.
2. You can also use Red, Blue and Green colors to draw (By choosing of desired color from Pen Color).
3. You can increase the size of the pen by changing the Pixel size.
4. You can save the drawing board content by using Save button.
5. You can clear the drawing board content by using Clear button.
Fig: W3Coder GDI+ Draw Pad.
First we need Picture Box. Picture box will acts as a Drawing Board for us here. Next important thing is declaring Bitmap and Pen objects globally to access them in entire program in order to draw.
Dim myPen As New Pen(Color.Red) Dim bmp As Bitmap |
bmp = New Bitmap(PictureBox1.Width, PictureBox1.Height) bmpnew = New Bitmap(PictureBox1.Width, PictureBox1.Height) myPen.Width = 1 Dim g As Graphics g = Graphics.FromImage(bmp) g.Clear(Color.White) PictureBox1.Image = bmp |
Also in above code, we cleared the image with the help of g.Clear(Color.White)
and we assigned the Bitmap to Picture Box.
The above steps made our application ready to draw. Rest everything is easy. We
used various functions of Graphic object to make our Draw Pad to draw. For
example to draw rectangles, we used DrawRectangle method of Graphic
object. Download the code and analyze it. Detailed comments are there in the
code. Those will help you to learn it easily.
Home Work:
Yes, I left some things for you ;) Please do these, then you will get
more confidence.
1. In this we can draw and save the Image, right now there is no way to load
the image into it. So you have to add that part to it.
2. This is not efficient logic to draw Circle/Rectangle, and you can draw
rectangle to right side only. Change it to draw to any side.
3. Filling of Circle/Rectangle with desired color.
4. Cleaning of variables before exiting from the applicaiton.
5. Try to use Option Explicit/Option Strict in the beginning.
Conclusion:
What next! Where you want to go with this, well! Your creativity and your ideas
lead you to your next step in improving Draw Pad. Take it as a first step in
GDI+ and explore it, as you needed.
Downloads
W3Coder GDI+ Draw Pad Source
Code for version 1.0
W3Coder GDI+ Draw Pad
Source Code for version 1.1
Please provide your comments here.
If you are not a member please register. It's free. Just to track I need this
information http://www.w3coder.com/subscribe.aspx
Happy Programming !!!!
| <--[Author: Sreedhar Koganti] |
|
|
|