Home and Learn: Intermediate Programming
Bitmap and Graphics Objects
Stick Figure App - Coding Prep Work
We now need to set up a Bitmap object and a Graphics object. Otherwise, we won't be able to draw anything.
At the top of you code, along with all the other variables you have set up there, add these two globals in VB Net:
Dim bitmapObject As Bitmap
Dim graphicsObject As Graphics
And these two in C#:
Bitmap bitmapObject;
Graphics graphicsObject;
The top of your code should be looking like this now, in VB Net (don't worry that they're all greyed out):
And this in C#:
We need to create objects from the bitmapObject and graphicsObject. We can do that in the Form Load event.
Add these two lines to your form load event in VB Net: (Add them just before the 'LOAD COMBOX' code.)
bitmapObject = New Bitmap(PbSurface.Width, PbSurface.Height)
graphicsObject = Graphics.FromImage(bitmapObject)
And here's the two lines to add in C#:
bitmapObject = new Bitmap(PbSurface.Width, PbSurface.Height);
graphicsObject = Graphics.FromImage(bitmapObject);
The first new line creates a Bitmap image object. It uses the width and height of the Picture Box called PbSurface between the round brackets of Bitmap.
The second new line create a new Graphics object. This has a routine called FromImage. In between the round brackets of FromImage you type the name of your Bitmap object. What you're doing here is using the Graphics object to draw on a bitmap. This is drawn in memory and retrieved when you want to display something on the Picture Box drawing surface. You'll see how it works in practice soon.
One more line we can add to the Form Load event is to set one of the Booleans to true. Add this line (with the semicolon on the end in C# and a lowercase "t" for "true"):
drawStickManStraight = True;
This means that we'll have a default stick figure. If you don't click one of the stick figure buttons when the form loads but just start drawing then you'll get the stick figure man with arms straight.
But your Form Load event should look like this in VB Net:
And this in C#:
Now we need to create a Paint event for the Picture Box. It's in the Paint Event where we load that bitmap we have in memory, the bitmap that contains the drawing.
Go back to Design View. Click on your PbSurface Picture Box to select it. In the properties area, click the lightning bolt to see a list of events for a Picture Box. Locate the Paint item. Double click on Paint item to generate a code stub. Now enter this line (with a semicolon on the end in C#):
e.Graphics.DrawImage(bitmapObject, 0, 0)
Again, we use the e variable from the round brackets of the Paint Event. This has a Graphics object. The Graphics object has a DrawImage routine. In between the round brackets of DrawImage, we first have our bitmapObject. This contains our drawing. The 0, 0 at the end means you want to grab the top left of the bitmap.
We're close to actually drawing something now!
Drawing a Circle
Let's just draw a simple circle, so that we know everything is working fine.
First, we'll have two Subs/methods so that our code doesn't become too cluttered. Add these two Subs in VB Net:
Private Sub DrawStickMan()
End Sub
Private Sub DrawStickLady()
End Sub
And these two methods in C#:
private void DrawStickMan()
{
}
private void DrawStickLady()
{
}
Now go back to your PbSurface_MouseUp event. We only have this so far:
mouseX1 = e.X
mouseY1 = e.Y
What we'll do is to detect if the left mouse was clicked and then get where the coordinates are when mouse button is released. We can also call our two new routines.
Add this If statement in VB Net:
If e.Button = MouseButtons.Left Then
End If
And this one in C#:
if (e.Button == MouseButtons.Left)
{
}
Now move your mouseX1 and mouseY1 code inside of the new If statement. Just after the mouse code, set the Smoothing Mode of the graphics object to Anti Alias with this line (you need a semicolon on the end in C#):
graphicsObject.SmoothingMode = SmoothingMode.AntiAlias
Just after the Anti Alias line, add this If … Else statement in VB Net:
If drawStickWoman Then
DrawStickLady()
Else
DrawStickMan()
End If
And this one in C#:
if (drawStickWoman)
{
DrawStickLady();
} else {
DrawStickMan();
}
So we're only setting the mouse coordinates and calling our new routines if the left mouse button is clicked.
The final line to add is the Invalidate command. We did this in a previous tutorial. The line to add is this (with the semicolon on the end in C#)
PbSurface.Invalidate()
When you issue the Invalidate command it calls the Paint Event. Our Paint event then grabs the bitmap from memory and draw it on our Picture Box.
Add the Invalidate line just after your second If statement but inside the first. Your MouseUp code should look like this in VB Net:
And this in C#:
Now go to your DrawStickMan routine. Inside the empty code stub, let's draw a simple circle. Add this line rather long line (semicolon on the end in C#):
graphicsObject.DrawEllipse(drawingPen, mouseX, mouseY, mouseY1 - mouseY, mouseY1 - mouseY)
If you remember, we drew a circle in a previous tutorial. You use the inbuilt routine of the graphics object called DrawEllipse. You first need a Pen object. Ours is the drawingPen object we set up earlier. You then need four values: x, y, width, height. What you're doing with DrawEllipse is actually drawing a rectangle. The ellipse is then draw between the bounds of the rectangle. The x and y are where you want to start drawing your rectangle. We have our mouseX and mouseY here, which we got from the Mouse Down event we created. The Width and Height of the rectangle are the same: it's mouseY1 - mouseY. This gets you a square. (When an ellipse is drawn in a square, it's a circle.) The mouseY1 value is one we get when the left mouse button is lifted - from the MouseUp event, in other words.
If that's a bit confusing, here's an image that illustrates it:
Here's what your code should look like in VB Net:
And here's the C# version:
You can try it out now. Run your program. Hold your left mouse button down on your white drawing surface. Keep it held down and drag to the left. Let go of the left mouse button. A circle will be drawn. Try different colors and brush sizes. You'll get something like this:
We now have a head for our stick figures!
One last thing we can do here, before we start drawing the rest of the stick figure is to change the mouse pointer. It's stuck on the default arrow when we draw. It would be nice if we could have a change of cursor when the mouse is over the Picture Box. This is easy to do.
In your Form Load event, as the first line, add this (semicolon on the end in C#):
PbSurface.Cursor = Cursors.Cross
As soon as you type the word Cursors, then a dot, you'll see a popup appear with a list of cursor choices. Select any you like. We went for Cross.
When you run your program now, the cursor will change when you move your mouse over the Picture Box. It will change back when your mouse is not over the Picture Box. It's much better for drawing when you have a different cursor than the default.
The next part of the stick figure we'll draw is the body. However, before doing that, we can create a Class that sets up the dimensions for the whole of the stick figure.
