This tutorial is related to the SimpleDrawing bada app (v. 1.1.0) that you can find in the projects section. I will use it as an example to show, in my opinion, the most effective way to draw on a form through the use of double buffering.

The idea behind double-buffering is that you perform many drawing operations on an invisible bitmap, and only when you are ready to “submit” all the changes to the screen, this bitmap is copied as a whole to the bitmap that is finally made visible. This approach saves a lot of drawing resources, since the screen does not have to update each single time a small part is drawn. This is specially useful in games and other drawing-intensive bada apps.

The only difference in our example is that we will not use bitmaps but rather Canvas objects. First of all the drawing board gets a private member called Canvas * canvas_ , it will be our buffer we draw on. First we need to construct it though:

canvas_ = new Canvas();
 canvas_->Construct(GetBounds());
 canvas_->SetBackgroundColor(Color::COLOR_WHITE);
 canvas_->Clear();

We set its size to the size of our form (through GetBounds()), give it a white background and clear it. Then we edit the drawing function that is called by touch events:

inline void
DrawingBoardForm::DrawBrush(const Osp::Ui::Control & source,
 const Osp::Graphics::Point& currentPosition)
{
 int radius = brush_->size;
 int x = currentPosition.x-radius;
 int y = currentPosition.y-radius;

 canvas_->FillEllipse(brush_->color.GetRGB32(),
 Rectangle(x, y,radius*2,radius*2));

 this->RequestRedraw(true);
}

We simply draw on our canvas buffer and then, when all the drawing is done, we request an asynchronous redrawing of the form through RequestRedraw(true). Please note that in this example the drawing operation is quiet simple. In a complex game you would perform hundreds of drawing operations on the buffer before requesting a redraw. The boolean passed to RequestRedraw() tells the form whether it should automatically call Show() after drawing.

Finally, we override the OnDraw() function of the form:

result
DrawingBoardForm::OnDraw()
{
 Canvas* pCanvas = GetCanvasN();

 if (pCanvas)
 {
 pCanvas->Copy(Point(GetClientAreaBounds().x, GetClientAreaBounds().y),*canvas_, GetClientAreaBounds());
 delete pCanvas;
 }

 // Do not call Show(). It will be called automatically after OnDraw() callback.
 return E_SUCCESS;
}

There we simply copy the buffered canvas contents into the canvas of the form. The form is redrawn and shown with this new contents. Pretty easy, huh?

I was pretty amazed on how much smoother the thing runs, compared to earlier versions when I was first getting started in bada

Oh well, we are all bada beginners!

Related posts:

1. bada Tutorial: displaying a transparent image on a form
2. Motion Detection in Bada: Snap, Shake, Double-Tap!
3. Bada Project: Simple Finger Drawing App