Last Updated
Viewed 09 Times

I have a FrameLayout which holds an ImageView (SVG). when I pinch-to-zoom and drag the image, I essentially perform Scale and Translate on the image view.

Now, when user taps on the screen, I need to know the coordinates of that touch inside the ImageView in original mode (not scaled/translated), because I want to map this point to some Bitmap that I store which is a copy of the imageview that is displayed.

Theoretically, in order to achieve that what I tried to do is:

  1. Take the touch event from the FrameLayout, and translate it to coordinates in the ImageView.

  2. Apply matrix transformation (scale, translate) on the point we got from step 1. Now we know the coordinates inside the scaled/translated ImageView.

  3. Now I need to apply some sort of "reverse" tranformation to an original state (unscaled, untranslated) in order to get the point on the original image drawable.

So for step 1:

val ratioX = width / it.width
val ratioY = height / it.height

val touchX = e.getX(pointerIndex) / ratioX
val touchY = e.getY(pointerIndex) / ratioY

Then for step 2 :

 val mt = Matrix()
 mt.reset()
 mt.postScale(scale, scale)
 mt.postTranslate(translationX, translationY)
 val arrayPoint = floatArrayOf(touchX, touchY)
 mt.mapPoints(arrayPoint)

Then for step 3 :

 mt.reset()
 mt.postScale(1f, 1f)
 mt.postTranslate(0f, 0f)
 val arrayPointOriginal = floatArrayOf(arrayPoint[0], arrayPoint[1])
 mt.mapPoints(arrayPointOriginal)

But that doesn't work for some reason. The coordinates I get from arrayPointOriginal are wrong. What have I missed?

I am trying to manually get an image inside an imageview centered and fitting the screen. I need to do it with a matrix (I will later dynamically change the matrix transformation).

Problem is I can't get the image centered in the view (scale is appropriate). Here is the code:

// Compute the scale to choose (this works)
float scaleX = (float) displayWidth / (float) imageWidth;
float scaleY = (float) displayHeight / (float) imageHeight;
float minScale = Math.min(scaleX, scaleY);

// tx, ty should be the translation to take the image back to the screen center
float tx = Math.max(0, 
        0.5f * ((float) displayWidth - (minScale * imageWidth)));
float ty = Math.max(0, 
        0.5f * ((float) displayHeight - (minScale * imageHeight)));

// Compute the matrix
Matrix m = new Matrix();
m.reset();

// Middle of the image should be the scale pivot
m.postScale(minScale, imageWidth/2, imageHeight/2);

// Translate
m.postTranslate(tx, ty);

imageView.setImageMatrix(m);

The above code works if I don't center the scale on the image center (but I will need to do it later so I need to figure out the formula now).

I thought doing the following would correct the issue, but the image is still offset (towards bottom and right).

tx += 0.5*imageWidth*minScale;
ty += 0.5*imageHeight*minScale;

Some values I have: - image: 200x133 - display: 800x480 - minScale: 2.4 - final top-left corner of the image: 100, 67 (should be 17, 0)

I have strange behavior with ImageView (scale type = Matrix).

I have some parent view (FrameLayout actually, marked grey on picture). On the top of this FrameLayout my ImageView is located with MATCH_PARENT attributes.

So I expect ImageView should fill parent view. I have Bitmaps with different sizes to set in different cases in my ImageView (with MATRIX ScaleType). Sometimes it is smaller than ParentView, sometimes bigger. I want to adjust bitmap to parent bounds using imageView.setScaleY(scaleFactor) and it totally works if scaleFactor is > 1. But if Bitmap is actually bigger and scaleFactor is < 1, ImageView behaves pretty strange: ImageView's Drawable is scaled correctly and try to fill all parent view, but for some reason ImageView bounds is scaled down (in comparison to MATCH_PARENT). The result is illustrated in picture below (with scale factor ~ 0.5).

So looks like ImageView size is scaled down with Bitmap and I cannot prevent it with using imageView.setMinimumWidth/Height or LayoutParams.

Any ideas?

enter image description here

P.S. I cannot scale ImageView using Matrix transformation (because it is used for different purposes in my app - zoom/move/rotate)

I need to scale an Image inside an ImageView, I need to use the matrix for doing so,

So I do;

private void scaleImage(float scaleFactor, float focusX,float focusY) {
    Matrix displayMatrix= new Matrix();
    matrix.postScale(scaleFactor, scaleFactor);
    displayMatrix.set(matrix);
    imageView.setImageMatrix(displayMatrix);
}

The problem is no matter what i am not able to center the image inside the ImageView,

I need to put the image at the center (leaving white margins if the image is smaller than the view)

I have been bangin my head for hours, please help.


I have looked extensively at this https://stackoverflow.com/a/6172226/1815311, but without success.

Similar Question 8 (1 solutions) : Dynamically created ImageView is not rotated

Similar Question 9 (1 solutions) : Using setRotate rescales the imageview

cc