Zoom in a canvas using canvas.scale function?

Question

I have implemented a long onDraw method which draws a set of rectangles. The rectangles are too small and I want them to appear bigger. But unfortunately I can't change the rectangle coordinates because they are stored in a database. So is there any way I can zoom in the canvas using canvas.scale() ?

Answer 1

I'm going to preface this answer by saying you will need to draw everything at 0,0 and then scale it, and finally translate it to behave properly.

Simply do the following in your onDraw method:

canvas.save();
    canvas.translate(xValue, yValue);
    canvas.scale(xScale, yScale)
    /* draw whatever you want scaled at 0,0*/
canvas.restore();

xScale shrinks or stretches in the X direction, yScale shrinks or stretches in the Y direction.

1.0 is the default for these, so 2.0 would stretch it by double and 0.5 would shrink it by half.

Example:

canvas.save();
    canvas.translate(50, 50);
    canvas.scale(0.5f, 0.5f);
    canvas.drawRect(0.0, 0.0, 5.0, 5.0, paint);
canvas.restore();

This will draw a rectangle with length 5.0, and width 5.0, scale it down to 2.5 for length and width, and then move it to (50, 50).

The result will be a rectangle drawn as if you did this:

canvas.drawRect(50.0, 50.0, 52.5, 52.5, paint);

I hope this helps!