Background: I have an ImageView that I've modified to be scrollable (drag) and zoom-able (pinch zoom). I used the exact technique mentioned in the "Hello, Android" 3rd edition book that can also be found here. This technique uses matrix transformation to handle both scrolling and zooming.
My Problem: When a user taps on the image, I want the coordinates of that tap in relation to the image itself, regardless of how the image has been scrolled or magnified. For instance, if my image is 1000x2000 and I scroll and zoom the image. Then I tap on the image at a certain point, I want to know what that point is in relation to the 1000x2000, not just the screen area. How can I do this?
I found a solution to this using bits of info I've pieced together from other questions on this site. To give back to the community, I figured it was only right to share what I learned. Hope this helps somebody:
// Get the values of the matrix
float[] values = new float[9];
matrix.getValues(values);
// values[2] and values[5] are the x,y coordinates of the top left corner of the drawable image, regardless of the zoom factor.
// values[0] and values[4] are the zoom factors for the image's width and height respectively. If you zoom at the same factor, these should both be the same value.
// event is the touch event for MotionEvent.ACTION_UP
float relativeX = (event.getX() - values[2]) / values[0];
float relativeY = (event.getY() - values[5]) / values[4];
Thanks to these sources: source 1 and source 2
You can also calculate the inverse matrix and use the mapPoints() method:
// Get the inverse matrix
Matrix inverseMatrix = new Matrix();
matrix.invert(inverseMatrix);
// Transform to relative coordinates
float[] point = new float[2];
point[0] = e.getX();
point[1] = e.getY();
inverseMatrix.mapPoints(point);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With