I’m trying to create a simple app for painting some lines using a stylus. Afterwards these lines will need to be erased (think first version of MS Paint). I first looked at the demo approach for the Multitouch demo, storing a bunch of paths and then drawing / painting them. Obviously this gets very slow very fast as you start to generate long paths and have them persist.
Now I’m trying to use an Image and just paint updates to the image and then redraw the image. Here is some small example code:
setSize (600, 400);
image = ImageCache::getFromMemory(BinaryData::tinfoil_jpg, BinaryData::tinfoil_jpgSize);
void MainComponent::paint (Graphics& g)
g.drawImageAt(image, 0, 0, false);
void MainComponent::mouseDrag (const MouseEvent& event)
// ignore repainting when mouse hasn't moved
if (event.getPosition() == lastCoords)
lastCoords = event.getPosition();
g.fillRect(event.x, event.y, 10, 10);
repaint(event.x, event.y, 10, 10);
Even this approach seems to use 20-30% of the CPU when drawing. Before I start trying other methods, I wanted to ask if anybody has advice on better approaches.
1.) drawing the path directly will always be much faster than drawing on an image and copying/potentially scaling a lot of pixels
2.) if you measure performance, do this in a release build and use a proper tool (Profiler, XCode Instruments etc.)
TL;DR: don’t waste your time inventing an image buffering…
Well I’m not trying to explicitly use an Image buffer if not needed. The challenge is I need to paint on a background image. If just store a bunch of Path objects and then paint them every time with strokepath then CPU will incrementally increase with every new path (with potentially tons of lineTo’s inside). It will redraw them all on every paint() callback.
I did some profiling and CPU usage is quite high with just the strokepath method. Using a OpenGL context seems to help at least on my Mac.
My current thinking is to draw the current path (that is the one that is being drawn via the MouseDrag events) then once the mouse is released to capture the current state of the component into image and then start drawing the next path on top of that image. Thus not needing to redraw every previous path. If I ever need to resize then I’ll just store all paths and redraw them again once.
Or does anybody else have any other wise suggestions or approaches?
Stroke paths in an image and then redraw the image everytime you need (when you are stroking new paths) like
If you don’t wanna use an Image, then you must stroke them with vertical/horizontal lines or raw pixels painting which is more efficient (specially the latter one) or just go OpenGL. But the former aproach worked great for me