Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Port CGAffineTransform from iOS to Android

Tags:

android

ios

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);
}
like image 626
AndreiBogdan Avatar asked Dec 11 '13 07:12

AndreiBogdan


2 Answers

You can try to replace completely the matrix in canvas:

Canvas.save();
Canvas.setMatrix(mtx);
Canvas.drawBitmap(bmp, new Matrix(), null);
Canvas.restore();
like image 200
Eugene Dudnyk Avatar answered Oct 24 '22 01:10

Eugene Dudnyk


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);">
like image 3
Allen Avatar answered Oct 24 '22 01:10

Allen