Simultaneous rotation, translation and scaling of a bitmap in an android canvas

I am trying to show an image that can be scaled and panned, and it rotates with the compass. In the code below, all three actions work, but they affect each other.

Here is what I want to achieve:
1. Turn around the center of the screen
2. The scale that leaves the same part of the image in the center
3. Move to the desired location in the picture.

Here's what actually happens with the code below:
1. The rotation works as intended, around the center of the screen. 2. Scaling works, but it scales around the center of the image
3. Translation works only as intended, if it angleis zero, otherwise moving in the wrong direction

// the center of the view port
float centerX = screen.right/2;
float centerY = screen.bottom/2;

Matrix m = new Matrix();
m.preRotate(angle, centerX, centerY);
m.preScale(mScaleFactor, mScaleFactor, centerX, centerY);

// scaling the amount of translation, 
// rotating the translation here gave crazy results
float x = mPosX / mScaleFactor;
float y = mPosY / mScaleFactor;
m.preTranslate(x, y);

canvas.drawBitmap(pic, m, null);

If I first translated and later rotated, the translation was performed as intended, but the rotation was no longer around the center of the viewing port.

How can I apply all three transformations without affecting each other?

+5
source share
1 answer

, , - , , ? , - :

float x = (mPosX*(cos(angle) + sin(angle)) / mScaleFactor;
float y = (mPosY*(cos(angle) - sin(angle)) / mScaleFactor;
m.preTranslate(x, y);

- ? .

:

M = |mScaleFactor*cos(angle)       sin(angle)            x|
    |     -sin(angle)          mScaleFactor*cos(angle)   y|
    |          0                         0               1|

, preTranslate() :

Mt.preTranslate(-centerX,-centerY);

Mt pic M, , -Mt

+1

All Articles