Develop Reference

Rotate bitmap in fixed point like a clock hand in SurfaceView

I have an image in drawable folder for clock hand. I want to rotate it in fixed point like a clock hand. I have tried below code which rotates the hand in circular path around a fixed point but not as like clock hand.
Matrix matrix = new Matrix();
matrix.reset();
matrix.preTranslate(0, 0);
matrix.postRotate(angleRotation, -0, -0);
matrix.postTranslate(240, 480);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(bitmap, matrix, null);
I am struggling for hours to get it sorted out. Any help will be greatly appreciated.
I have tried below links for help as well with no success.
SurfaceView, draw image and reduce size, rotate image
Android: How to rotate a bitmap on a center point
How to rotate a bitmap in Android about images center smoothly without oscillatory movement

I found the answer. Let px and py be any point on canvas. bitmap.getWidth()/2 is middle point along bitmap width. It can be any point for x cordinate. For y cordinate I have taken it as 10. angleRotation is the angle that is as per required.
So matrix.postTranslate(-bitmap.getWidth()/2, -10); is the point of rotation.
Below is the code.
Matrix matrix = new Matrix();
matrix.reset();
Paint paint = new Paint();
float px = 240;
float py = 480;
matrix.postTranslate(-bitmap.getWidth()/2, -10);
matrix.postRotate(angleRotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, paint);
Above code satisfy my requirements. Please modify it as per your need.

I use this to rotate my bitmaps.
private Bitmap rotateImage(Bitmap src,int degrees) {
Matrix matrix = new Matrix();
matrix.postRotate(degrees);
return Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
}

Port CGAffineTransform from iOS to Android

I have the next set of values:
0.439353, -0.073688, 0.078788, 0.439353, 139.500000, 72.000000
Let's name the values: a, b, c, d, tx, ty
On the iOS version of the app, these values are sent to this object see here
In my Android app I'm trying something like this:
Matrix mtx = new Matrix();
mtx.setValues(new float[] { a, c, tx, b, d, ty, 0, 0, 1});
Taken from this post, in Android the Matrix object accepts the values in that order (a,c,tx,b,d,ty) and not like the iOS version (a,b,c,d,tx,ty).
My problem is that the rotation and scaling are done correctly, but I'm having problems with the translation part. It does not position it correctly on the screen. Anyone have any ideas what I am doing wrong?
EDIT
I'm using the matrix to post a bitmap on a canvas, like so
protected void onDraw(Canvas canvas) {
// .....
canvas.drawBitmap(bmp, mtx, null);
}

You can try to replace completely the matrix in canvas:
Canvas.save();
Canvas.setMatrix(mtx);
Canvas.drawBitmap(bmp, new Matrix(), null);
Canvas.restore();

The reason is that iOS calculate the matrix based on the center position, but android and web are based on {0,0} position. So the solution is that you have to move the bitmap to center position with correct scale relative to screen density first, then apply the matrix on. My working well android code is:
Matrix matrixA = new Matrix();
matrixA.postTranslate(-bitmapWidth/2, -bitmapHeight/2);
matrixA.postScale(screenWidth/320, screenWidth/320);
Matrix matrixB = new Matrix();
matrixB.setValues(new float[]{scale, -rotate, tX, rotate, scale, tY, 0.0F, 0.0F, 1.0F});
matrixA.postConcat(matrixB);
canvas.drawBitmap(bitmap, matrixA, null);
And the web css3 code is:
<img style="left: tX; top: tY; transform: matrix(scale, -rotate, rotate, scale, 0, 0) scale(window.screen.width/320);">

Clearly understand matrix calculation

I have this code snippet. I don't understand the Matrix.preScale and the Bitmap.createBitmap with the matrix passed. What does it mean? Is there any simulation website to understand matrix calculation? Could you give me some websites about mathematics used for graphics? I'm sorry I'm not good at mathematics. :)
public Bitmap createReflectedImages(final Bitmap originalImage) {
final int width = originalImage.getWidth();
final int height = originalImage.getHeight();
final Matrix matrix = new Matrix();
matrix.preScale(1, -1);
final Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, (int) (height * imageReflectionRatio),
width, (int) (height - height * imageReflectionRatio), matrix, false);
final Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (int) (height + height * imageReflectionRatio + 400),
Config.ARGB_8888);
final Canvas canvas = new Canvas(bitmapWithReflection);
canvas.drawBitmap(originalImage, 0, 0, null);
final Paint deafaultPaint = new Paint();
deafaultPaint.setColor(color.transparent);
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
final Paint paint = new Paint();
final LinearGradient shader = new LinearGradient(0, originalImage.getHeight(), 0,
bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, height, width, bitmapWithReflection.getHeight() + reflectionGap, paint);
return bitmapWithReflection;
}

Don't think about it too hard, at least not at the early stages.
Just think of a matrix as an array of numbers. In this case, an Android Matrix has 3 rows of 3 numbers. Each number tells an Android graphics function what to do to scale (bigger/smaller), translate (move), rotate (turn) or skew (distort in a 2D plane) the "thing" which the matrix is applied to.
The matrix looks like this (see the docs here).
{Scale X, Skew X, Transform X
Skew Y, Scale Y, Transform Y
Perspective 0, Perspective 1, Perspective 2}
The good news is that you don't need to know any matrix maths, indeed almost no maths, to use matrices in Android. That's what methods like preScale() do for you. To understand the maths behind is not that hard, for most things you only need add, multiply and SOHCAHTOA.
matrix-transform-for-the-mathematically-challenged/
When you read the Matrix documentation, you will see methods for rotate, translate etc with prefixes of 'set', 'post' or 'pre'.
Imagine that you create a new matrix. You then use setRotate() to setup the matrix to do a rotation. You then use preTranslate() to do a translation. Because you used 'pre', the translation happens before the rotation. Had you used 'post', the rotation would happen first. 'set' clears whatever is in the matrix and starts again.
To answer your specific question, new Matrix() creates the 'identity matrix'
{1, 0, 0
0, 1, 0
0, 0, 1}
which scales by 1 (therefore same size) and does no translation, rotation or skew. Therefore, applying the identity matrix will do nothing. The next method is preScale() which is applied to this identity matrix and in the case you've shown, results in a matrix that scales, and does nothing else so could also be done using setScale() or postScale().

Rotating Bitmap Not Rotating

I have tried several hours to rotate a bitmap with no success. I have read numerous articles about this subject on this web site and it seems the prefered solution involves creating a temporary canvas. Well I did this and I still do not see a roated bitmap.
My bitmap is a 40x40 blue square and I am trying to rotate it 45 degrees. Thats not asking for much is it? When the code runs, the bitmap that appears on the screen is the non-rotated original. ( I have also tried a translate with no success as well)
Here is my code:
// Load the bitmap resource
fillBMP2 = BitmapFactory.decodeResource(context.getResources(), R.drawable.test1);
// Copy to a mutable bitmap
mb = fillBMP2.copy(Bitmap.Config.ARGB_8888, true);
// Create canvas to draw to
Canvas offscreenCanvas = new Canvas (mb);
// Create Matrix so I can rotate it
Matrix matrix = new Matrix();
matrix.setRotate (45);
offscreenCanvas.setMatrix (matrix);
// Send the contents of the canvas into a bitmap
offscreenCanvas.setBitmap(mb);
Later in an OnDraw I do the following:
canvas.drawBitmap(mb, 200, 200, null);
Any ideas what I am doing wrong? Seems like it should work.
Thanks

Try using this
Matrix matrix = new Matrix();
matrix.setRotate(15);
canvas.drawBitmap(bmp, matrix, paint);
setRotation method takes in a float representing
the degrees of rotation.

Try this...
Matrix matrix = new Matrix();
float px = 200;
float py = 200;
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getWidth()/2);
matrix.postRotate(45);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, paint);

You definitely want to use transformations: check out this link.
Basically it's this:
// save the canvas
ctx.save();
// move origin to center
ctx.translate(x,y);
// rotate
ctx.rotate(angle * (Math.PI / 180));
// draw image
ctx.drawImage(image, x, y, w, h, .w/2, h/2, w, h);
// restore
ctx.restore();

Problem in rotating image in android

I am facing problme in rotating image
Following code works fine
Matrix matrix = new Matrix();
matrix.postRotate(DEGREE,mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);
Bitmap m = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),mBitmap.getHeight(), matrix, true);
canvas.drawBitmap(m, mX, mY, null);
But I dont want to create a new bitmap again and again so I am using the following code
Matrix matrix = new Matrix();
matrix.postTranslate(mX, mY);
matrix.postRotate(DEGREE,mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);
canvas.drawBitmap(mBitmap, matrix, null);
In that case image goes out of the view. It is not visible.

Matrix matrix = new Matrix();
canvas.translate(mX, mY);
canvas.drawBitmap(...);
canvas.translate(-mX, -mY);

Try first rotating it then translating it, because when you translate it first the center is not in the middle any more so you are rotating it with wrong pivot coordinates.

The pivot point by default when rotating is the top left corner of the image, which is why the view goes out of view. You need to add logic to make the pivot point the center of the image. Unfortunately, geometry is not my strong suit so maybe someone who somewhat enjoys geometry can give you the calculations to make this happen.