Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android - Adjusting Image View Position on Top of a Zoomable Image View

I'm working on image, making a feature which allows user to place tags on images (like Facebook photo tag). I have a zoomable ImageView (using Mike Ortiz's TouchImageView) as a background image, and some ImageViews as image tags.

Each tag has X and Y position, and there is no problem in displaying both background image and image tags in correct position. However, when user triggers pinch zoom, the position of background image is changed. Which means, the position of each image tags must also be changed/updated according to the current background image's zoom level and scroll position.

I'm currently using this method:

float currentZoom = mImageView.getCurrentZoom();
float zoomedX = x / currentZoom;
float zoomedY = y / currentZoom;

But when I tried, it went totally wrong. Can anyone help me finding correct method/equation?

EDIT:

I tried using Matrix.mapPoints(), but I don't understand how this matrix could help me solving my problem. Here is an image for better explanation:

image

like image 888
Harry Avatar asked Nov 09 '22 23:11

Harry


1 Answers

I finally get the answer (thanks to pskink)! To get the exact tag position on image, all we have to do is to use Matrix.mapPoints(). But that alone will not give the new X & Y position after zoom. We have to multiply the current X & Y position with the current zoom level to get the "after zoom position".

In other words:

Matrix matrix = mImageView.getImageMatrix();
float[] pts = {0, 0};
matrix.mapPoints(pts);
float newTagX = (tagX * currentZoom) + pts[0];
float newTagY = (tagY * currentZoom) + pts[1];
like image 93
Harry Avatar answered Nov 14 '22 23:11

Harry