|
Tip #6 - Using double-buffering with canvases
Dear Developers,
In the past week, I have received a few questions on how to display animations on a canvas without all of the resulting flickering. My answer, at first, was simple: use two canvases. The advantage to this is that all of the drawing can be done off-screen on a memory canvas, and the finished product can be displayed all at once in a single pass by copying the memory canvas to the display canvas. However, the actual process involved is a little more complex than this simple explanation, so I will cover a simple case step by step.
To begin with, we'll need to create each of the canvases, one for displaying only and one to draw to. We'll also need a WRect object to specify the size of the screen.
WDisplayCanvas is the canvas class that gives us the ability to draw directly to the screen, and the WCanvas is the canvas class to which we will perform our drawing. Our drawing to the WCanvas will not appear on the screen until we give its contents to the WDisplayCanvas. Line one of the constructor creates a new display canvas, giving the current window as the drawing area, true to indicate that it should prepare the area for drawing, and false telling it not to draw over the title-bar or menu areas. Next, on line two, we create the memory canvas. We pass the Create method the display canvas, from which it can determine what it's physical properties should be, and true to indicate that it is a memory canvas. We also create a rectangle to be the size of the client area of the form, used later when performing the draw operation. The second block of code is also important: it is used to set additional physical properties for the memory canvas necessary for background drawing.
Our next step is to create our paint event. By right-clicking on the form, and selecting the more option within the events submenu, we can chose to edit the form's paint event. This is where we will draw to our memory canvas and where we will send it to the display canvas to be displayed to the screen. By performing all of our drawing routines on the memory canvas, the display canvas is not continually updated after each step, the cause of the flickering effect. After all of the drawing steps have been made to the canvas, we then call WDisplayCanvas' DrawFromCanvas method. This will copy the contents of the memory canvas into the display canvas, and the display canvas will make one update.
Notice that I am only doing one draw step, namely a DrawEllipse. This is a very simple example, and by itself probably does not warrant a double-buffering approach. However, one can imagine that the line of code could easily represent hundreds of lines, ellipses, or bitmaps, all changing depending on external conditions - this is where double-buffering is well worth the trouble.
Now, we need to trigger the paint event at regular intervals in order to create a realistic animation. For this, we need to use the Timer object from the system toolbar of the main Power++ palette. By setting its properties to tick at the desired frequency, we can edit its Timer event and cause the redraw there. However, we should not invoke the Paint event directly; this is due to Windows scheduling issues. Instead, we need to call the Update method, which will tell Windows that the application needs to be updated; Windows will then cause a Paint event.
Click here to see Tip#7Return to Power++ Home Page.
to top of page
Copyright © 1999 Sybase, Inc. All Rights Reserved.
Privacy Policy
Legal
