Android实现基于四角Rectf锚点的ImageView拖拽缩放功能

核心逻辑 #

通过监听触摸事件，根据拖拽角的偏移量调整图片显示矩形，再通过Matrix更新ImageView显示，同时同步更新四个角的方形位置。

步骤实现 #

1. 触摸事件处理 #

在ImageView的OnTouchListener中处理三个关键动作：

• ACTION_DOWN：记录初始触摸坐标、图片当前的宽高，为后续计算做准备
• ACTION_MOVE：计算触摸偏移量，更新图片显示矩形、ImageView的Matrix以及角部方形位置，并触发重绘
• ACTION_UP：结束拖拽状态

2. 计算并更新图片显示矩形 #

根据被触摸的角（已知索引），将偏移量映射到图片矩形的对应边，同时限制最小宽高避免缩放过度：

• 左上：调整left和top边
• 右上：调整right和top边
• 右下：调整right和bottom边
• 左下：调整left和bottom边

3. 通过Matrix更新ImageView显示 #

基于新的图片矩形计算缩放比例和平移量，将Matrix应用到ImageView（需提前设置scaleType="matrix"）。

4. 同步更新角部方形位置 #

根据更新后的图片矩形，重新计算四个角方形的Rectf坐标，保持每个方形中心与图片角对齐。

代码示例 #

// 预先定义的变量
private RectF imageRect; // 图片当前显示区域
private RectF[] cornerRects; // 四个角的方形，顺序：左上、右上、右下、左下
private int touchedCornerIndex; // 已确定的被触摸方形索引
private float downX, downY;
private float initialImageWidth, initialImageHeight;

// 绑定触摸监听
imageView.setOnTouchListener((v, event) -> {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downX = event.getX();
            downY = event.getY();
            initialImageWidth = imageRect.width();
            initialImageHeight = imageRect.height();
            return true;
        case MotionEvent.ACTION_MOVE:
            float offsetX = event.getX() - downX;
            float offsetY = event.getY() - downY;
            updateImageRect(offsetX, offsetY);
            updateImageViewMatrix();
            updateCornerRects();
            imageView.invalidate();
            return true;
        case MotionEvent.ACTION_UP:
            return true;
    }
    return false;
});

// 更新图片显示矩形
private void updateImageRect(float offsetX, float offsetY) {
    final float minSize = 50; // 图片最小宽高限制
    switch (touchedCornerIndex) {
        case 0: // 左上
            imageRect.left += offsetX;
            imageRect.top += offsetY;
            imageRect.left = Math.min(imageRect.left, imageRect.right - minSize);
            imageRect.top = Math.min(imageRect.top, imageRect.bottom - minSize);
            break;
        case 1: // 右上
            imageRect.right += offsetX;
            imageRect.top += offsetY;
            imageRect.right = Math.max(imageRect.right, imageRect.left + minSize);
            imageRect.top = Math.min(imageRect.top, imageRect.bottom - minSize);
            break;
        case 2: // 右下
            imageRect.right += offsetX;
            imageRect.bottom += offsetY;
            imageRect.right = Math.max(imageRect.right, imageRect.left + minSize);
            imageRect.bottom = Math.max(imageRect.bottom, imageRect.top + minSize);
            break;
        case 3: // 左下
            imageRect.left += offsetX;
            imageRect.bottom += offsetY;
            imageRect.left = Math.min(imageRect.left, imageRect.right - minSize);
            imageRect.bottom = Math.max(imageRect.bottom, imageRect.top + minSize);
            break;
    }
}

// 更新ImageView的显示矩阵
private void updateImageViewMatrix() {
    Matrix matrix = new Matrix();
    float scaleX = imageRect.width() / initialImageWidth;
    float scaleY = imageRect.height() / initialImageHeight;
    // 计算平移量，保证图片缩放后位置匹配新矩形
    float transX = imageRect.left - (initialImageWidth * scaleX - initialImageWidth) / 2;
    float transY = imageRect.top - (initialImageHeight * scaleY - initialImageHeight) / 2;
    matrix.postScale(scaleX, scaleY);
    matrix.postTranslate(transX, transY);
    imageView.setImageMatrix(matrix);
}

// 更新四个角的方形位置
private void updateCornerRects() {
    float cornerSize = 40; // 角部方形的尺寸
    // 左上
    cornerRects[0].set(imageRect.left - cornerSize/2, imageRect.top - cornerSize/2,
            imageRect.left + cornerSize/2, imageRect.top + cornerSize/2);
    // 右上
    cornerRects[1].set(imageRect.right - cornerSize/2, imageRect.top - cornerSize/2,
            imageRect.right + cornerSize/2, imageRect.top + cornerSize/2);
    // 右下
    cornerRects[2].set(imageRect.right - cornerSize/2, imageRect.bottom - cornerSize/2,
            imageRect.right + cornerSize/2, imageRect.bottom + cornerSize/2);
    // 左下
    cornerRects[3].set(imageRect.left - cornerSize/2, imageRect.bottom - cornerSize/2,
            imageRect.left + cornerSize/2, imageRect.bottom + cornerSize/2);
}

注意事项 #

• 必须将ImageView的scaleType设置为matrix，否则Matrix无法生效
• 若需要保持图片宽高比，可在updateImageRect中根据初始比例调整对应边的偏移，避免图片拉伸
• 可根据需求调整角部方形的尺寸和最小图片尺寸参数

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