Android中如何为ImageView静态图片实现Pinch-off触摸缩放功能？

核心思路 #

通过自定义ImageView，结合原生ScaleGestureDetector处理捏合缩放逻辑，同时监听触摸事件实现点击标记功能，完全基于Android原生API实现，无需第三方依赖。

1. 自定义可缩放ImageView类 #

创建ZoomableImageView继承自AppCompatImageView，封装缩放和标记逻辑：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import androidx.appcompat.widget.AppCompatImageView;
import java.util.ArrayList;
import java.util.List;

public class ZoomableImageView extends AppCompatImageView {
    private ScaleGestureDetector scaleDetector;
    private GestureDetector gestureDetector;
    private float scaleFactor = 1.0f;
    private float focusX, focusY;
    private List<PointF> markers = new ArrayList<>();
    private Paint markerPaint;

    public ZoomableImageView(Context context) {
        super(context);
        init();
    }

    public ZoomableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ZoomableImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        scaleDetector = new ScaleGestureDetector(getContext(), new ScaleListener());
        gestureDetector = new GestureDetector(getContext(), new GestureListener());
        markerPaint = new Paint();
        markerPaint.setColor(Color.RED);
        markerPaint.setStyle(Paint.Style.FILL);
        markerPaint.setStrokeWidth(8);
        setScaleType(ScaleType.MATRIX);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        scaleDetector.onTouchEvent(event);
        gestureDetector.onTouchEvent(event);
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.scale(scaleFactor, scaleFactor, focusX, focusY);
        super.onDraw(canvas);
        for (PointF marker : markers) {
            canvas.drawCircle(marker.x, marker.y, 10, markerPaint);
        }
        canvas.restore();
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            scaleFactor *= detector.getScaleFactor();
            scaleFactor = Math.max(0.5f, Math.min(scaleFactor, 3.0f));
            focusX = detector.getFocusX();
            focusY = detector.getFocusY();
            invalidate();
            return true;
        }
    }

    private class GestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            float x = (e.getX() - focusX) / scaleFactor + focusX;
            float y = (e.getY() - focusY) / scaleFactor + focusY;
            markers.add(new PointF(x, y));
            invalidate();
            return true;
        }
    }
}

2. 布局中使用自定义View #

在XML布局文件中直接引用该自定义ImageView：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.yourpackage.ZoomableImageView
        android:id="@+id/zoomable_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/your_static_image"/>

</LinearLayout>

3. 关键逻辑说明 #

• 捏合缩放：通过ScaleGestureDetector捕捉捏合手势，获取缩放因子和中心点，在onDraw中对画布进行缩放变换，确保缩放围绕捏合中心进行，和谷歌地图缩放逻辑一致。
• 点击标记：通过GestureDetector监听确认的单击事件，将屏幕坐标转换为缩放后的图片原始坐标，保存标记点并在onDraw中绘制红色圆点。
• 缩放范围限制：代码中限制缩放倍数在0.5到3倍之间，可根据需求调整上下限。

内容的提问来源于stack exchange，提问作者harsuu