围绕点旋转位图，但不以位图为中心

Question

I have a bitmap that I would like to rotate about a point on a canvas. The point I want to rotate it about is not the center of the bitmap. I am using a matrix. Here is an example of what I have.

    Bitmap image = ContentManager.getInstance().getImage(imageId);
    Matrix matrix = new Matrix();
    matrix.setTranslate(-image.getWidth()/2f, -image.getHeight()/2f);
    matrix.postRotate(rotationDegrees);
    matrix.postTranslate(x / scaleX, y / scaleY);
    matrix.postScale(scaleX, scaleY);
    paint.setAlpha(alpha);
    canvas.drawBitmap(image, matrix, paint);

I want to manipulate this code slightly to not rotate around the bitmap's center point but a different point. To illustrate more clearly I have created this picture:

.

I have tried everything I can think of from setting

    matrix.setTranslate(-image.getWidth()/2f, -image.getHeight()/2f);

to

    matrix.setTranslate(pivotPoint.x, pivotPoint.y);

and a lot of other stuff. The result is the bitmap is always way off from where I expected it. (eg. rotate it about the center of the screen 90 degrees would put the bitmap 90 degrees from where it was and consequently would be rotated.) The bitmap always seems to rotate about its center point and then ends up in a random spot on the screen.

Answer 1

When rotating an object, it will rotate around the origin (upper left corner). You'll want to first translate the bitmap so the pivot point becomes (0, 0), rotate the bitmap then translate back to it's original position.

you could try something like this:

matrix.setTranslate(-px, -py);
matrix.postRotate(rotationDegrees);
matrix.setTranslate(px, py);
// Then do other things.

Answer 2

After much messing around and find this very difficult or buggy, not sure which, found the easiest solution to this is to find the new center of the bitmap and drop the image there instead, seem more complicated but it works where plain rotation/translation wasn't.

  float angle;
  float radius;

  Bitmap wheelSelectBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
  Matrix matrix = new Matrix();

  Point pivotPoint = new Point();
  pivotPoint.set(pivotPoint.x, pivotPoint.y)
  Point newCenter = new Point();
  newCenter.set((int)(pivotPoint.x + (radius * Math.cos(angle)), (int)(pivotPoint.y - (radius * Math.sin(angle)));

  matrix.postTranslate(newCenter.x - (bitmap.getWidth()/2f), newCenter.y - (bitmap.getHeight()/2f));
  matrix.postRotate(angle, newCenter.x, newCenter.y);

  Bitmap rotatedBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), null, true);
  canvas.drawBitmap(bitmap, matrix, null);

This might not be perfect but working this way solved the problem for me and stopped bitmaps flying around all over the shop. It also rotates clockwise by default unlike your diagram so just use -angle for counter-CW. Not sure what is going on here as this code definitely failed to get the desired effect for me:

 matrix.postTranslate(pivotPoint.x, pivotPoint.y);
 matrix.postRotate(angle);
 matrix.postTranslate(radius - (bitmap.getWidth()/2f), -bitmap.getHeight()/2f);

Cant see what is wrong with logic here ? But in my case the bitmap was not visible in the view here.