How to rotate a bitmap in Android about images center smoothly without oscillatory movement

Question

I want to rotate a bitmap image based on user click by 10 deg. Following numerous stackoverflow and google answers, I tried various combinations of Matrix rotation.

However the image doesn't really rotate as expected and gives a jittery view of rotation + oscillation about canvas center. To test I am increasing rotation angle by 10 deg (instead of clicks) each time object's draw method is called. The image is a symmetrical circle [64x64 enclosing rectangle] and I expect it to rotate at center of screen about it's own center like a wheel, but it rotates and moves diagonally towards right-down and moves back upto center of screen in an oscillatory fashion.

 public void draw(Canvas canvas) {
    Matrix matrix = new Matrix();

    rotation += 10;
    float px = this.viewWidth/2;
    float py = this.viewHeight/2;
    matrix.setRotate(rotation, bitmap.getWidth()/2, bitmap.getHeight()/2);
    Bitmap newbmp = Bitmap.createBitmap(bitmap, 0, 0, getImgWidth(), getImgHeight(), matrix, true);
    canvas.drawBitmap(newbmp, px - (getImgWidth()/2), py - (getImgHeight()/2), null);

 }

score 19 · Accepted Answer · answered Nov 15 '12 at 16:38

19

Here is an example. I broke it to 3 steps. The first translate moves the bitmap so that it's center is at 0,0 Then a rotation, and finally move the bitmap center to where you want it on the canvas. You don't need the second bitmap.

Matrix matrix = new Matrix();
rotation += 10;
float px = this.viewWidth/2;
float py = this.viewHeight/2;
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
matrix.postRotate(rotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, null);

As an optimization, create the Matrix once outside this method and replace the creation with a call to matrix.reset()

answered Nov 15 '12 at 16:38

yoah

7,180
2
30
30

2

Thanks a bunch!. Got this working with moving the Matrix out of 'draw' method and ensuring matrix isn't reset [gives smooth rotation effect]. Also used `matrix.setRotate(rotation, bitmap.getWidth()/2, bitmap.getHeight()/2);` instead of first two post* methods. – Anshul Nov 15 '12 at 17:07
Which is this view here? – Akshatha S R Aug 20 '14 at 08:45
How do i get bitmap(scaled bitmap) ? – Hiren Dabhi Oct 29 '14 at 10:10
Instead of first translating by half it to the center point, you could use `matrix.postTranslate(px, py, centerx, centery)`. – Ionoclast Brigham Apr 17 '17 at 02:24

score 0 · Answer 2 · answered Nov 15 '12 at 14:16

You need to translate the bitmap to the 0,0 point (or draw it at 0,0) and rotate it there, then translate it back, as such:

canvas.save();
    canvas.translate(this.viewWidth, this.viewHeight);
    canvas.rotate(rotation);
    canvas.drawBitmap(newbmp, -(getImgWidth()/2), -(getImgHeight()/2), null);
canvas.restore();

Here I draw it with the center at 0,0 (I think), because when you rotate, it's about 0,0 and not the center of the screen as one would think. If you draw the center at 0,0 then it will rotate about the center of the bitmap.

If my code does not accomplish drawing the bitmap center at 0,0 then you can change my code to draw it at the center and it will work as you want.

Hope this helps!

:( . The above method made things worse. Now my wheel goes right-bottom corner and oscillates around right-bottom corner while the rest of background and objects "look" as it is. canvas.translate simply shifts the wheel center — Anshul, Nov 15 '12 at 16:10
This actually works if you translate over `getImgWidth()/2` and `getImgHeight()/2` instead of the view dimensions. — Ja͢ck, Mar 09 '14 at 11:18

score 0 · Answer 3 · answered Dec 27 '17 at 14:39

// x : x coordinate of image position
// y : y coordinate of image position
// w : width of canvas
// h : height of canvas
canvas.save();
canvas.rotate(angle, x + (w/2), y + (h/2));
canvas.drawBitmap(image, x, y, null);
canvas.restore();

The steps are

Save the existing canvas
Rotate the canvas about the center of the bitmap, that you would draw on canvas with an angle of rotation
Draw the image
Restore the image

How to rotate a bitmap in Android about images center smoothly without oscillatory movement

3 Answers3

Linked