How can i get the image matrix co ordinates in android? - android

I am developing an application where is included crop functionality and in this I'm blocked at below scenario.
The scenario:
Crop overlay is not circulating the whole image when we apply straightening to the image if we change the crop overlay, ratio also is not working.
I got the code from google but it is related to matrix, I have tried using matrix, but here I need to find the coordinates(edges) of matrix to move the overlay.
How to find it? If anyone has any idea please help me...
I added the image to explain the problem
Thanks in advance..
I am using the below code but I didn't get the exact coordinates of the matrix
RectF r = new RectF();
mymatrix.mapRect(r);
Rect rect =
new Rect((int)r.left,int)r.top,int)r.right+width,int)r.bottom+height);

You should not use mapRect if you are applying rotation on your matrix. My advice is to figure out the 4 initial points representing each rectangle edge (the image itself) and use mapPoints instead.
Lets say you have an image 200px wide and 200px tall with its top left corner positioned at origin (0,0).
If you rotate this image from its center (100,100) 45 degrees and then scale it 200% from its center we will have the following scenario:
//original image coords
float[] points = {
0f, 0f, //left, top
200f, 0f, //right, top
200f, 200f, //right, bottom
0f, 200f//left, bottom
};
Matrix matrix = new Matrix();
//rotate 45 degrees from image center
matrix.postRotate(45f, 100f, 100f);
//scale 200% from center
matrix.postScale(2f, 2f, 100f, 100f);
//get the new edges coords
matrix.mapPoints(points);
After calling matrix.mapPoints(points) the points array will have the updated coords. This means points[0], points[1] will have the new left top image coord and so on.
The even indices represents the abscissas and the odd indices represents the ordinates on the points array.

Related

Find the center of a shape (path) on a canvas (Android Studio)

Is it possible to find the center of a shape on a canvas in Android studio? I've logged the touch points and can't seem to figure it out. It does however appear that the canvas (0,0) point is the top left, but the paths/shapes on the canvas see the center point as (0,0).
For an example of what I'm talking about check out the attached image, I'm trying to find where the green dot is.
Thanks in advance for any help.
IMG
To find the center of a Path use the method computeBounds(bounds,exact) which will set the first argument RectF bounds to the extent of the Path. Then it is just a matter of getting the mean of the left right and top bottom coordinates to get the geometric center of the path.
// mPath is your path. Must contain more than 1 path point
RectF bounds = new RectF();
mPath.computeBounds(bounds, false); // fills rect with bounds
PointF center = new PointF((bounds.left + bounds.right) / 2,
(bounds.top + bounds.bottom) / 2);
No Need for Mathematical Calculations
RectF bounds = new RectF();
mPath.computeBounds(bounds, false);
float centerX = rectF.centerX();
float centerY = rectF.centerY();

In Android, What kind of transform does mapRect api of Matrix class performs?

I would like to know about the function of mapRect api available under Matrix class in Android. If I have a sample Matrix A and Rectangle R, then for
RectF R = new RectF(t1,t2,t3,t4);
A.mapRect(R);
what kind of transformation is likely to happen to R. It would be more helpful if someone can illustrate the mapRect() api with some suitable examples.
Here's a very simple example:
Let's take a matrix:
Matrix matrix = new Matrix();
Set that matrix to scale everything twice as large:
matrix.setScale(2.0F, 2.0F);
Create a rectangle that is 10x10 with origin in upper left corner:
RectF rect = new RectF(0F, 0F, 10F, 10F);
So when we call
matrix.mapRect(rect);
the input rectangle we created is replaced with the output rectangle, which is the result of transforming the input:
rect.left = 0F;
rect.top = 0F;
rect.right = 20F;
rect.bottom = 20F;
There is another version of the method
matrix.mapRect(RectF dst, RectF src);
that does the same transform without affecting the input rectangle.
What is a matrix?
Consider a mirror. The mirror takes your image and creates a horizontally flipped version of your image.
Consider a microphone and an amplifier. They take your voice and create a louder version of your voice.
That's what a matrix is. It's a transformer. It takes an input and creates an output that is based on the input. So a matrix can transform a point, a rectangle, a circle, a polygon...
For more info, see my answer How does Matrix.postScale( sx, sy, px, py) work?
Also check out Affine transformations | Wikipedia. There is an awesome graphic that shows the different affine transforms and their effects.

Android canvas flipping with canvas.scale

I have a little question. :)
In my new live wallpaper I am flipping the canvas horizontally
with:
c.scale(-1f, 1f, screenWidth* 0.5f, screenHeight* 0.5f);
drawFlipped();
c.scale(-1f, 1f, screenWidth* 0.5f, screenHeight* 0.5f);
This all works great but I also happen to have an ontouch event
where the user can click the different moving object defined as a Rect.
But when the rect is drawn on the flipped canvas the x,y coordinates
are not correct. Its still in mirror and I understand that because I flip
the canvas back after drawing the sprites.
My question is: How can I calculate the on touch event from the right side of
the screen?
I tried: Screenwidth - object.x - object.width but it did not help much :(
This works for me:
int screenWidth = getScreenWidth();
Rect newCoordinates = new Rect(object.getRect()); //copies old coordinates
newCoordinates.right = screenWidth - object.getRect().left; //switch right and left since the Rect is being mirrored
newCoordinates.left = screenWidth - object.getRect().right;
object.setRect(newCoordinates);

how do I know where on my image I have touched if I have moved and resized my image with pinch, drag and zoom

I have an image, I'm using it as an image map. If the image was fixed then there would be no problem but I need to zoom and drag this image and get and use the coordinates of where the image clicked.
Do I need to keep track of exactly how much this image has moved and has been resized or can I get the 0x0 point of my image(the top left corner of my image).
Is there another way to do it
I should add I've based my image manipulation on this excellent tutorial http://www.zdnet.com/blog/burnette/how-to-use-multi-touch-in-android-2/1747?tag=rbxccnbzd1
You can get the point using the same transformation matrix that is being applied to the image. You want to transform the point between the screen's coordinate system to the image's coordinate system, reversing the effect of the original matrix.
Specifically, you want to transform the x,y coordinates where the user clicked on the screen to the corresponding point in the original image, using the inverse of the matrix that was used to transform the image onto the screen.
A bit of pseudocode assuming matrix contains the transformation that was applied to the image:
// pretend user clicked the screen at {20.0, 15.0}
float x = 20.0;
float y = 15.0;
float[] pts[2];
pts[0] = x;
pts[1] = y;
// get the inverse of the transformation matrix
// (a matrix that transforms back from destination to source)
Matrix inverse = new Matrix();
if(matrix.invert(inverse)) {
// apply the inverse transformation to the points
inverse.mapPoints(pts);
// now pts[0] is x relative to image left
// pts[1] is y relative to image top
}

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.

Categories

Resources