如何在Android应用中对ImageView进行缩放，而不会导致其跳到其他位置？

Question

我尝试创建一个应用程序，用户可以在其中拖动和缩放ImageView。但是我在以下代码中遇到了问题。

当scaleFactor不为1且第二个手指按下时，它会被稍微移动到其他地方。我不知道这个位移来自哪里...

以下是完整的类：

package me.miutaltbati.ramaview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.widget.ImageView;

import static android.view.MotionEvent.INVALID_POINTER_ID;

public class RamaView extends ImageView {
    private Context context;
    private Matrix matrix = new Matrix();
    private Matrix translateMatrix = new Matrix();
    private Matrix scaleMatrix = new Matrix();

    // Properties coming from outside:
    private int drawableLayoutId;
    private int width;
    private int height;

    private static float MIN_ZOOM = 0.33333F;
    private static float MAX_ZOOM = 5F;

    private PointF mLastTouch = new PointF(0, 0);
    private PointF mLastFocus = new PointF(0, 0);
    private PointF mLastPivot = new PointF(0, 0);
    private float mPosX = 0F;
    private float mPosY = 0F;

    public float scaleFactor = 1F;
    private int mActivePointerId = INVALID_POINTER_ID;

    private Paint paint;
    private Bitmap bitmapLayout;

    private OnFactorChangedListener mListener;
    private ScaleGestureDetector mScaleDetector;

    public RamaView(Context context) {
        super(context);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @android.support.annotation.Nullable AttributeSet attrs) {
        super(context, attrs);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @android.support.annotation.Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initializeInConstructor(context);
    }

    public void initializeInConstructor(Context context) {
        this.context = context;
        paint = new Paint();
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        mScaleDetector.setQuickScaleEnabled(false);

        setScaleType(ScaleType.MATRIX);
    }

    public Bitmap decodeSampledBitmap() {
        // First decode with inJustDecodeBounds=true to check dimensions
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inMutable = true;
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);

        // Calculate inSampleSize
        options.inSampleSize = Util.calculateInSampleSize(options, width, height); // e.g.: 4, 8

        // Decode bitmap with inSampleSize set
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);
    }

    public void setDrawable(int drawableId) {
        drawableLayoutId = drawableId;
    }

    public void setSize(int width, int height) {
        this.width = width;
        this.height = height;

        bitmapLayout = decodeSampledBitmap();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mScaleDetector.onTouchEvent(event);

        int action = event.getActionMasked();

        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                int pointerIndex = event.getActionIndex();
                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Remember where we started (for dragging)
                mLastTouch = new PointF(x, y);

                // Save the ID of this pointer (for dragging)
                mActivePointerId = event.getPointerId(0);
            }

            case MotionEvent.ACTION_POINTER_DOWN: {
                if (event.getPointerCount() == 2) {
                    mLastFocus = new PointF(mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
                }
            }

            case MotionEvent.ACTION_MOVE: {
                // Find the index of the active pointer and fetch its position
                int pointerIndex = event.findPointerIndex(mActivePointerId);

                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Calculate the distance moved
                float dx = 0;
                float dy = 0;

                if (event.getPointerCount() == 1) {
                    // Calculate the distance moved
                    dx = x - mLastTouch.x;
                    dy = y - mLastTouch.y;

                    matrix.setScale(scaleFactor, scaleFactor, mLastPivot.x, mLastPivot.y);

                    // Remember this touch position for the next move event
                    mLastTouch = new PointF(x, y);
                } else if (event.getPointerCount() == 2) {
                    // Calculate the distance moved
                    dx = mScaleDetector.getFocusX() - mLastFocus.x;
                    dy = mScaleDetector.getFocusY() - mLastFocus.y;

                    matrix.setScale(scaleFactor, scaleFactor, -mPosX + mScaleDetector.getFocusX(), -mPosY + mScaleDetector.getFocusY());

                    mLastPivot = new PointF(-mPosX + mScaleDetector.getFocusX(), -mPosY + mScaleDetector.getFocusY());
                    mLastFocus = new PointF(mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
                }

                mPosX += dx;
                mPosY += dy;

                matrix.postTranslate(mPosX, mPosY);

                break;
            }

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                mActivePointerId = INVALID_POINTER_ID;
                break;
            }

            case MotionEvent.ACTION_POINTER_UP: {
                final int pointerIndex = event.getActionIndex();
                final int pointerId = event.getPointerId(pointerIndex);

                if (pointerId == mActivePointerId) {
                    // This was our active pointer going up. Choose a new
                    // active pointer and adjust accordingly.
                    final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                    mLastTouch = new PointF(event.getX(newPointerIndex), event.getY(newPointerIndex));
                    mActivePointerId = event.getPointerId(newPointerIndex);
                } else {
                    final int tempPointerIndex = event.findPointerIndex(mActivePointerId);
                    mLastTouch = new PointF(event.getX(tempPointerIndex), event.getY(tempPointerIndex));
                }

                break;
            }
        }

        invalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();

        canvas.setMatrix(matrix);
        canvas.drawColor(Color.BLACK);
        canvas.drawBitmap(bitmapLayout, 0, 0, paint);

        canvas.restore();
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));

            return true;
        }
    }
}

我觉得问题出在这一行：

matrix.setScale(scaleFactor, scaleFactor, -mPosX + mScaleDetector.getFocusX(), -mPosY + mScaleDetector.getFocusY());

我尝试了很多方法，但无法使其正常工作。 更新： 以下是如何初始化RamaView实例的方法：

主活动的onCreate：

rvRamaView = findViewById(R.id.rvRamaView);

final int[] rvSize = new int[2];
ViewTreeObserver vto = rvRamaView.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    @Override
    public boolean onPreDraw() {
        rvRamaView.getViewTreeObserver().removeOnPreDrawListener(this);
        rvSize[0] = rvRamaView.getMeasuredWidth();
        rvSize[1] = rvRamaView.getMeasuredHeight();

        rvRamaView.setSize(rvSize[0], rvSize[1]);
        return true;
    }
});

rvRamaView.setDrawable(R.drawable.original_jpg);

- Mitulát báti

---

我尝试按照以下方式运行您的RamaView类：RamaView ramaView = findViewById(R.id.ramaView); ramaView.setDrawable(R.drawable.photo); ramaView.setSize(500, 500); 但是在运行时，即使我进行一两个手指手势，我仍然只能得到一个黑色视图。您如何初始化RamaView？ - ffernandez

@ffernandez，它应该可以工作。我更新了问题，说明了如何初始化它。 - Mitulát báti

PhotoView 是一个已经准备好并且非常直观易扩展的库，可以满足您的需求。 - nfl-x

Answer 1

代码似乎不完整（例如，我看不到矩阵如何使用以及scaleFactor在哪里赋值），但我认为翻译不一致的原因是，在两个指针的情况下，您从mScaleDetector.getFocus获取[x，y]位置。正如ScaleGestureDetector.getFocusX()文档所述：

获取当前手势焦点的X坐标。如果手势正在进行中，则焦点位于形成手势的每个指针之间。

您应该仅使用mScaleDetector获取当前比例，但是翻译应始终计算为mLastTouch和event.getXY(pointerIndex)之间的差异，以便仅考虑一个指针进行翻译。如果用户添加第二个手指并释放第一个手指，请确保重新分配pointerIndex并且不执行任何翻译以避免跳动。

- Miloš Černilovský

---

谢谢您回答我的问题。我已经更新了代码，现在它是完整的类。做了一点修改，这是我目前能想到的最好的方法。现在唯一的问题是，当第二个手指按下时，它会跳动。 - Mitulát báti

我也尝试了你建议的方法（只用一个手指翻译），但这种情况下，在缩放时焦点不会是两个手指的中心（因为它也在不断地移动）。我需要以焦点为中心进行翻译。 - Mitulát báti

Answer 2

最好使用矩阵来“累加”变换而不是尝试自己重新计算变换。您可以使用矩阵的“后置…”和“前置…”方法，并远离重置矩阵的“设置…”方法。

以下是重新设计的RamaView类，除了上述特定矩阵处理方式外，大部分都是正确的。修改在“onTouchEvent（）”方法中进行。视频是代码在示例应用程序中运行的输出。

RamaView.java

public class RamaView extends ImageView {
    private final Matrix matrix = new Matrix();

    // Properties coming from outside:
    private int drawableLayoutId;
    private int width;
    private int height;

    private static final float MIN_ZOOM = 0.33333F;
    private static final float MAX_ZOOM = 5F;

    private PointF mLastTouch = new PointF(0, 0);
    private PointF mLastFocus = new PointF(0, 0);

    public float scaleFactor = 1F;
    private int mActivePointerId = INVALID_POINTER_ID;

    private Paint paint;
    private Bitmap bitmapLayout;

    //    private OnFactorChangedListener mListener;
    private ScaleGestureDetector mScaleDetector;

    public RamaView(Context context) {
        super(context);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initializeInConstructor(context);
    }

    public RamaView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initializeInConstructor(context);
    }

    public void initializeInConstructor(Context context) {
        paint = new Paint();
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        mScaleDetector.setQuickScaleEnabled(false);

        setScaleType(ScaleType.MATRIX);
    }

    public Bitmap decodeSampledBitmap() {
        // First decode with inJustDecodeBounds=true to check dimensions
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inMutable = true;
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);

        options.inSampleSize = Util.calculateInSampleSize(options, width, height); // e.g.: 4, 8

        // Decode bitmap with inSampleSize set
        options.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(getResources(), drawableLayoutId, options);
    }

    public void setDrawable(int drawableId) {
        drawableLayoutId = drawableId;
    }

    public void setSize(int width, int height) {
        this.width = width;
        this.height = height;

        bitmapLayout = decodeSampledBitmap();
    }

    private float mLastScaleFactor = 1.0f;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mScaleDetector.onTouchEvent(event);

        int action = event.getActionMasked();

        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                int pointerIndex = event.getActionIndex();
                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Remember where we started (for dragging)
                mLastTouch = new PointF(x, y);

                // Save the ID of this pointer (for dragging)
                mActivePointerId = event.getPointerId(0);
            }

            case MotionEvent.ACTION_POINTER_DOWN: {
                if (event.getPointerCount() == 2) {
                    mLastFocus = new PointF(mScaleDetector.getFocusX(), mScaleDetector.getFocusY());
                }
            }

            case MotionEvent.ACTION_MOVE: {
                // Find the index of the active pointer and fetch its position
                int pointerIndex = event.findPointerIndex(mActivePointerId);

                float x = event.getX(pointerIndex);
                float y = event.getY(pointerIndex);

                // Calculate the distance moved
                float dx = 0;
                float dy = 0;

                if (event.getPointerCount() == 1) {
                    // Calculate the distance moved
                    dx = x - mLastTouch.x;
                    dy = y - mLastTouch.y;

                    // Remember this touch position for the next move event
                    mLastTouch = new PointF(x, y);
                } else if (event.getPointerCount() == 2) {
                    // Calculate the distance moved
                    float focusX = mScaleDetector.getFocusX();
                    float focusY = mScaleDetector.getFocusY();
                    dx = focusX - mLastFocus.x;
                    dy = focusY - mLastFocus.y;

                    // Since we are accumating translation/scaling, we are just adding to
                    // the previous scale.
                    matrix.postScale(scaleFactor/mLastScaleFactor, scaleFactor/mLastScaleFactor, focusX, focusY);
                    mLastScaleFactor = scaleFactor;

                    mLastFocus = new PointF(focusX, focusY);
                }

                // Translation is cumulative.
                matrix.postTranslate(dx, dy);

                break;
            }

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                mActivePointerId = INVALID_POINTER_ID;
                break;
            }

            case MotionEvent.ACTION_POINTER_UP: {
                final int pointerIndex = event.getActionIndex();
                final int pointerId = event.getPointerId(pointerIndex);

                if (pointerId == mActivePointerId) {
                    // This was our active pointer going up. Choose a new
                    // active pointer and adjust accordingly.
                    final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                    mLastTouch = new PointF(event.getX(newPointerIndex), event.getY(newPointerIndex));
                    mActivePointerId = event.getPointerId(newPointerIndex);
                } else {
                    final int tempPointerIndex = event.findPointerIndex(mActivePointerId);
                    mLastTouch = new PointF(event.getX(tempPointerIndex), event.getY(tempPointerIndex));
                }

                break;
            }
        }

        invalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();

        canvas.setMatrix(matrix);
        canvas.drawColor(Color.BLACK);
        canvas.drawBitmap(bitmapLayout, 0, 0, paint);

        canvas.restore();
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));

            return true;
        }
    }
}

- Cheticamp

---

你提供了我正在寻找的答案。现在我也明白了我做错了什么。谢谢。 - Mitulát báti