Question

I know this has been discussed over and over again but I can’t find a solution to suit my needs.

Scenario: To keep the explanation simple, I have a custom view which displays two images a big one for the background and a smaller one as a Wheel. The user can rotate/scale the background image with onTouch events. He also can rotate the Wheel image to make some operations. Everything is done on a custom View not SurfaceView because I need it to be transparent.

The problem: With onDraw() I always need to check what Rotation/Scale has the background image, scale/rotate it and then draw it. If the background image is smaller, let’s say 512×512 the Wheel image rotation is fine. If the background image is bigger, 1280×1707, the wheel image rotation is laggy. So my guess is, manipulation and rotation of a big image in background, for each onDraw() gives me performance issues, when basically the background image should be redrawn only the the user manipulates it.

The rotation is done in something like:

    canvas.save();
    float dx = (maxX + minX) / 2;
    float dy = (maxY + minY) / 2;
    drawable.setBounds((int) minX, (int) minY, (int) maxX, (int) maxY);
    canvas.translate(dx, dy);
    canvas.rotate(angle * 180.0f / (float) Math.PI);
    canvas.translate(-dx, -dy);
    drawable.draw(canvas);
    canvas.restore();

Possible solutions: I could make a new custom View which could only draw the background image and on top of it, put my current View and send touch events, when the case to my background image view. This will allow me to redraw the background image only when needed. Any other ideas ?

Answer 1

I was having similar performance problems and the solution I found is what I described here. Similar to what you already suggested, basically the background is only drawn once and the custom ImageView handles all transformations on its touch events.