android - To get exact touch position (from screen coordinates to canvas coordinates) from a scaled canvas

Question

Hi,

I have an application which zoom/pans the image within screen bounds. I have custom ImageView class inside my CustomFrameLayout as defined below.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:background="@android:color/darker_gray" >

<com.example.panzoomapplication.panzoom.CustomFrameLayout
                        android:id="@+id/custom_frame_layout"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        >

<com.example.panzoomapplication.panzoom.CustomImageView
                            android:id="@+id/drawing_view"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawingCacheQuality="high"
                            android:layout_gravity="center"
                            android:src="@drawable/image"
                            android:adjustViewBounds="true" />
</com.example.panzoomapplication.panzoom.CustomFrameLayout>

</FrameLayout>

I am scaling canvas in CustomFrameLayout class using,

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {

                    @Override
                    public boolean onScale(ScaleGestureDetector detector) {
                        mScaleFactor *= detector.getScaleFactor();
                        // Don't let the object get too small or too large.
                        mScaleFactor = Math.max(MIN_ZOOM, Math.min(mScaleFactor, MAX_ZOOM));
                        calculatePanZoomMatrix();
                        return true;
                    }
                }

                    private void calculatePanZoomMatrix() {
                     mPanZoomMatrix.reset();
                     // scale the view w.r.t to center of the canvas.
                     mPanZoomMatrix.setScale(mScaleFactor, mScaleFactor, getWidth() / 2, getHeight() / 2);
                     invalidate();
                    }

                    and in ondraw() of CustomFrameLayout,

                     @Override
                     protected void onDraw(Canvas canvas) {
                         canvas.concat(mPanZoomMatrix);
                     }

The canvas zooms well and takes correct touch position when mScalFactor = 1 (or in initial state). But when scaled by a factor greater than 1, the touch event coordinate shifts by a certain amount. I have tried to simulate this issue by drawing a circle at touch position in CustomImageView class.

                @Override
                    protected void onDraw(Canvas canvas) {
                        super.onDraw(canvas);
                        Paint paint = new Paint();
                        paint.setPathEffect(null);
                        paint.setStyle(Paint.Style.FILL_AND_STROKE);
                        paint.setColor(getResources().getColor(R.color.red));
                        if (mCirclePoint != null)
                            canvas.drawCircle(touchEvent.x, touchEvent.y, 6, paint);
                       }

The circle draws well at initial state of canvas (mScalFactor = 1), but shifts its position from actual touch point when scaled by a factor greater than 1. I have tried to fix this issue using matrix as follows,

            public float[] getAbsolutePosition(float touchX, float touchY) {
                    float[] scaledPoints = new float[2];
                    scaledPoints[0] = touchX ;
                    scaledPoints[1] = touchY;
                    Matrix matrix = new Matrix();
                    matrix.reset();
                    foat scaleFactor = mCustomFrameLayout.getScaleFactor();
                    float centerX = mCustomFrameLayout.getCenterScaleX();
                    float centerY = mCustomFrameLayout.getCenterScaleY();
                    matrix.setScale(scaleFactor, scaleFactor, centerX, centerY);
                    matrix.mapPoints(scaledPoints);
                   return scaledPoints;
              }

but end up with same problem.

Could you please help me to fix this issue? I have googled a lot but with no perfect solution.*

Answer 1

You shouldn't use Canvas to scale, is better to use matrix

to get touch coordinates from image(not screen):

void coorImagen(MotionEvent e){
    float []m = new float[9];
    matrix.getValues(m);
    float transX = m[Matrix.MTRANS_X] * -1;
    float transY = m[Matrix.MTRANS_Y] * -1;
    float scaleX = m[Matrix.MSCALE_X];
    float scaleY = m[Matrix.MSCALE_Y];
    lastTouchX = (int) ((e.getX() + transX) / scaleX);
    lastTouchY = (int) ((e.getY() + transY) / scaleY);
    lastTouchX = Math.abs(lastTouchX);
    lastTouchY = Math.abs(lastTouchY);

}

to get coordinates of screen use:

e.getX();
e.getY();