Monday, November 2, 2009

Fast PictureBox/Graphics Context Drawing (Manual Backbuffering) in C#

While I was working on my Lissajous Curves application, I ran into the issue of re-draw. I was using Visual Studio 2008, .NET 3.5, and everything was going fine except for the refresh rate on the picturebox. It was rather unacceptable. Keep in mind that my very first step had already been to check the Backbuffered property on the Form to true. One would think that it would show similar gains as any traditional backbuffering implementation would, but on the contrary I found no real benefit to the flag. It ended up that manually backbuffering was faster, so I present my implementation.

There are probably other ways to go about this, but this is the fastest I have come across so far. It's rather simple and is just the backbuffering process word for word basically. Instead of drawing straight to our target, we will have two targets, and one we show while we draw on the other. When we finish drawing, we switch out the targets and begin drawing on the one they WERE seeing, and repeat.

If you are doing any serious kind of computer graphics work then you should probably already be familiar with this concept, so I will stop elaborating on it. On to the important bits!

First, I presume you use CreateGraphics(), probably on the component you wish to issue draw commands to. You then use your received context's DrawEllipse() or what have you to draw on it.

All we do differently now, is we are going hold two graphical contexts and one bitmap.

In your declaration, or in the function, or whatever you are currently using, you probably have something as described above, like:
Graphics pictureboxContext;

We will be replacing this, as described above, with:
Bitmap backbuffer;
Graphics backbufferContext;
Graphics pictureboxContext;

Now, in your form's _Load() function, where you should have something along the lines of:
pictureboxContext = picturebox1.CreateGraphics();

We will now add to this and expand it to: (note pictureboxContext remains, so of course match the names to fit - just incase you're not paying attention ;P)
backbuffer = new Bitmap(pictureBox1.Width, pictureBox1.Height);
backbufferContext = Graphics.FromImage(backbuffer);
pictureboxContext = pictureBox1.CreateGraphics();

Now, instead of drawing to our picturebox's Context, we will be drawing to the backbuffer's. When we are finished drawing onto the backbufferContext ( e.g. backbufferContext.DrawEllipse(...) ) and want to display our new buffer, we will need to blit it out to the picturebox's context. We can easily do this using the Graphic's class's DrawImage function:
pictureboxContext.DrawImage(backbuffer, 0, 0);


There is nothing special about this, and I honestly feel that this is what the Backbuffered flag should have been doing behind the scenes all along, but oh well. I found this useful enough of a discovery to back-propogate it to my internship's C# terrain editor's display. So I hope someone else out there finds it useful :o)

~Jasmine

1 comment:

  1. Hi Jasmine,

    Why not just draw on your backbuffer and then invalidate your picturebox. I found this to be much faster than redrawing on the picturebox control. An even faster metod could be to just invalidate the same area as you draw on the backbuffer.

    ReplyDelete