Develop Reference

How to find center position of a bitmap that rotated and scaled with a matrix?

I want to calculate center of a bitmap that is drawn on a canvas with a matrix, it can be rotated, scaled or translated with a arbitrary value. What is the easiest way to find center of the this bitmap on canvas?

You need to apply the matrix to the coordinates of the center of bitmap.
If you use a canvas that has a transformation matrix, you can get the final matrix through Canvas.getMatrix()
If you draw the Bitmap on the Canvas with a Matrix : drawBitmap(bitmap, matrix, paint), then you you need to use that Matrix, or concatenate it to that of the Canvas (in the case it has one).
Then you can finally apply that matrix to the center of the matrix using Matrix.mapPoints.
Something like :
canvas.drawBitmap(bitmap, bitmap_transform, paint);
Matrix full_transform = new Matrix(canvas.getMatrix());
full_transform.postConcat(bitmap_transform);
float[] center = new float[] {bitmap.getHeight()/2.0, bitmap.getWidth()/2.0};
full_transform.mapPoints(center);
Alternatively, if you apply transformations to your bitmap without a matrix, you can use the full_transform.postRotate, full_transform.postScale, etc with the same values. In particular, if you draw your bitmap with drawBitmap(bitmap, left, top, paint) then you need to do a full_transform.postTranslate(left, top).

If you're looking for the "easiest" way then just sticking with the translate rotate and scale functions would solve the problem. The reason that those were developed was so developers wouldn't have to do vector calculus for simple animations. Also the only value you would have to actually calculate in that sense it is the translate value after you take into account the original coordinates.

Using "Matrix" to rotate two "Bitmap"

I have a Canvas and a Bitmap.I have to draw bitmap twice on canvas and rotate them.This is my code:
Bitmap bitmap = ... ;
Matrix matrix = new Matrix();
Camera camera = new Camera();
camera.save();
// First drawing:
camera.rotateX(x_rotate_angle);
camera.rotateY(y_rotate_angle);
camera.getMatrix(matrix);
matrix.postTranslate(0, 0);
matrix.postScale(3, 3);
canvas.drawBitmap(bitmap, matrix, null);
camera.restore();
// Second drawing:
camera.rotateX(x_rotate_angle);
camera.rotateY(y_rotate_angle);
camera.getMatrix(matrix);
matrix.postTranslate(10, 10 + bitmap.getHeight());
matrix.postScale(3, 3);
canvas.drawBitmap(bitmap, matrix, null);
Result before rotation:
When bitmaps rotate only axis X,all things are fine.In this case result looks like this:
In both above images you can see that all edges are parallel.But when bitmaps rotate axis Y,edges will not be parallel(bottom edge of top bitmap crosses top edge of bottom bitmap):
Did I do any thing wrong?

You're not doing anything wrong, it's just that you haven't understood the results you were going to get from your code. The camera you're using is a 3D camera and you're seeing the results of moving the camera in 3D space. When you rotate a camera, parallel lines do not in general remain parallel. You noticed the artifact when rotating about the y-axis, but it's also present in your illustration for the x-axis rotation. Notice that for the x-axis, the left and right sides are not parallel; the left side is closer to vertical than the right.
The Android canvas object has scale, skew, translate, and rotate operations. If it's 2D operations that you need, you can ditch the camera object entirely.

Possible to calculate the width/height of a rotated matrix?

If I use this:
mCamera.rotateY(45);
mCamera.getMatrix(mMatrix);
mMatrix.preTranslate(-pivotX, -pivotY);
mMatrix.postTranslate(pivotX + centerX, pivotY + centerY);
And do:
canvas.drawBitmap(bitmap, mMatrix, null);
Then the drawn picture will be taller and slimmer and the matrix will be nicely applied to the whole picture. Now, is there any way to calculate the rotated size? I want to fit the image by scaling it and now when I rotate it some of the top and bottom is clipped because of the parent's constraints. Thanks!
EDIT:
What I am going to do is spin the image and the range for rotateY will be from 0 to 90.

Well, you could easily let the matrix map the corners of your bitmap and then calculate the bounds, as the mapped corners will be the max / min for x and y coordinate. Maybe you can do it without too many if clauses :)
Edit:
Check out
RectF r = new RectF(/*your bitmap's corners*/);
matrix.mapRect(r);
That way you should get r's new size.

If you stick to 45° then Pythagoras is the key

Rotate an image around center

How can I rotate an image around it's center point? This rotates it but also moves it:
Matrix mat = new Matrix();
mat.postRotate(45);
Bitmap bMapRotate = Bitmap.createBitmap(dialBM, 0, 0, dialBM.getWidth(),dialBM.getHeight(), mat, true);
dial.setImageBitmap(bMapRotate);
I've checked other examples on this site, but they either fail to work or use canvas, I do not wish to use canvas.

The second and third arguments to postRotate is the x and y pivot point.
mat.postRotate(45, dialBM.getWidth()/2, dialBM.getHeight()/2);

Probably because your matrix rotates around (0,0), and not the middle of your bitmap. You should declare two additional matrices - one for moving the bitmap's center to (0,0) (shift by -getWidth()/2, -getHeight(2)) and one to move the bitmap's center back to (0,0). Multiply the three matrices, and then the result.

Skewing a bitmap only in the vertical direction

I want to skew (correct me if this is not the correct word) a bitmap so that it appears to have depth. A good way to visualize what I am asking for is how the credits of Star Wars are angled to show depth.
I have tried the following:
canvas.getMatrix().postSkew(kx,ky,px,py);
and
canvas.skew(sx,sy);
But I have not had much success. The above methods seem to always transform the bitmap into a parallelogram. Is there a way to transform the bitmap into a trapezoid instead?
Here is a snippet of code that I took from the examples that Romain pointed me to.
canvas.rotate(-mOrientation[0] + mHeading, mCenterX, mCenterY);
camera.save();
if (mReverse) {
camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}
camera.rotateX(mOrientation[1]);
camera.applyToCanvas(canvas);
canvas.drawPath(mPath, mPaint);
canvas.drawCircle(mCenterX, mCenterY, mRadius - 37, mPaint);
camera.restore();

I spent a lot of time working on this today (ran into the same problem) and came up with the code below.
Key thing to note, you need to set preTranslate() and postTranslate() to the center (or somewhere else) of your Canvas area. It seems to mean that it uses the center of the image to apply the transformation from, instead of the upper left corner (x=0,y=0) by default. This is why you would get a parallelogram instead of what you would expect, a trapezoid (Thanks for teaching me the names of those).
The other important thing that I picked up is the Save/Restore functions on the Canvas/Camera. Basically, if you call the Rotate functions consecutively three times without restoring the state back each time, you would keep rotating your object around and around each time you draw. That might be what you want, but I certainly didn't in my case. Same applies to the canvas as you are basically applying the Matrix from the Camera object to the Canvas and it needs to be reset otherwise the same thing occurs.
Hope this helps someone, this is not well documented for beginners. Tip to anyone reading this, check out the APIDemos folder in the SDK Samples. There is a Rotate3dAnimation.java file which demonstrates this as well.
//Snippet from a function used to handle a draw
mCanvas.save(); //save a 'clean' matrix that doesn't have any camera rotation in it's matrix
ApplyMatrix(); //apply rotated matrix to canvas
Draw(); //Does drawing
mCanvas.restore(); //restore clean matrix
//
public void ApplyMatrix() {
mCamera.save();
mCamera.rotateX(-66);
mCamera.rotateY(0);
mCamera.rotateZ(0);
mCamera.getMatrix(mMatrix);
int CenterX = mWidth / 2;
int CenterY = mHeight / 2;
mMatrix.preTranslate(-CenterX, -CenterY); //This is the key to getting the correct viewing perspective
mMatrix.postTranslate(CenterX, CenterY);
mCanvas.concat(mMatrix);
mCamera.restore();
}

You cannot achieve the effect you want with skew(). However, you can use a Camera object and 3D rotations to achieve this effect. The Camera will generate a Matrix for you that you can then apply on the Canvas. Note that the result will not be perspective correct, but good enough for your purpose. This how 3D rotations are done in Honeycomb's Launcher for instance (and many other apps.)

I don't think the "Star Wars effect" is an affine transformation, which I think are the only operations supported by Matrix.