Android Studio：缩放图片添加按钮并绑定图片像素坐标问题

• 基于PhotoView实现可缩放图片，已完成缩放后在触摸位置添加按钮的功能
• 需求：图片恢复初始缩放状态时，按钮需固定在图片的对应像素位置，而非当前屏幕显示位置
• 当前问题：无法将触摸的屏幕坐标关联到缩放后的图片像素坐标

核心思路是：保存按钮对应的图片原始像素位置，而非屏幕位置，之后根据图片的实时缩放/平移矩阵，动态计算按钮的屏幕显示位置。

步骤1：定义存储按钮像素位置的ID #

在res/values/ids.xml中添加两个ID，用于绑定按钮对应的图片像素坐标：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="btn_img_x" type="id"/>
    <item name="btn_img_y" type="id"/>
</resources>

步骤2：修改按钮添加逻辑，保存图片像素坐标 #

利用PhotoView的onPhotoTap回调提供的相对坐标（0-1范围，对应图片的左到右/上到下比例），计算并保存按钮对应的图片原始像素位置：

image.setOnPhotoTapListener(new OnPhotoTapListener() {
    @Override
    public void onPhotoTap(ImageView view, float x, float y) {
        Drawable drawable = image.getDrawable();
        if (drawable == null) return;
        
        // 获取图片的原始宽高（Drawable的实际尺寸，不是ImageView的显示尺寸）
        int originalWidth = drawable.getIntrinsicWidth();
        int originalHeight = drawable.getIntrinsicHeight();
        
        // 将相对坐标转换为图片的原始像素坐标
        float imgPixelX = x * originalWidth;
        float imgPixelY = y * originalHeight;

        Button btn = new Button(getApplicationContext());
        btn.setText("test");
        relativeLayout.addView(btn);

        // 提前测量按钮尺寸，避免宽高为0
        btn.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        int btnWidth = btn.getMeasuredWidth();
        int btnHeight = btn.getMeasuredHeight();

        // 获取当前图片的显示区域，计算按钮初始屏幕位置
        RectF currentDisplayRect = image.getDisplayRect();
        float scale = currentDisplayRect.width() / originalWidth;
        float screenX = imgPixelX * scale + currentDisplayRect.left;
        float screenY = imgPixelY * scale + currentDisplayRect.top;

        // 设置按钮位置，让按钮中心对齐触摸点
        btn.setX(screenX - btnWidth / 2f);
        btn.setY(screenY - btnHeight / 2f);

        // 将图片像素坐标绑定到按钮的Tag中
        btn.setTag(R.id.btn_img_x, imgPixelX);
        btn.setTag(R.id.btn_img_y, imgPixelY);
    }
});

步骤3：监听图片矩阵变化，动态更新按钮位置 #

通过PhotoView的OnMatrixChangedListener监听图片的缩放、平移变化，实时计算按钮的屏幕位置：

// 先保存图片原始宽高，方便后续计算
final int[] originalImgSize = new int[2];
Drawable drawable = image.getDrawable();
if (drawable != null) {
    originalImgSize[0] = drawable.getIntrinsicWidth();
    originalImgSize[1] = drawable.getIntrinsicHeight();
}

image.setOnMatrixChangeListener(new OnMatrixChangedListener() {
    @Override
    public void onMatrixChanged(RectF rect) {
        if (originalImgSize[0] == 0 || originalImgSize[1] == 0) return;
        
        // 遍历布局中所有按钮，更新位置
        for (int i = 0; i < relativeLayout.getChildCount(); i++) {
            View child = relativeLayout.getChildAt(i);
            if (!(child instanceof Button)) continue;

            // 取出绑定的图片像素坐标
            float imgX = (float) child.getTag(R.id.btn_img_x);
            float imgY = (float) child.getTag(R.id.btn_img_y);

            // 计算当前图片的缩放比例
            float scale = rect.width() / originalImgSize[0];

            // 计算按钮的屏幕坐标：像素坐标*缩放比例 + 图片偏移量
            float screenX = imgX * scale + rect.left;
            float screenY = imgY * scale + rect.top;

            // 调整按钮位置，保持中心对齐
            child.setX(screenX - child.getWidth() / 2f);
            child.setY(screenY - child.getHeight() / 2f);
        }
    }
});

关键注意点 #

• onPhotoTap回调的x/y是图片的相对比例值，不是屏幕像素坐标，直接用它设置按钮位置会导致缩放后偏移
• 必须保存图片的原始像素位置，这样不管图片怎么缩放平移，都能通过矩阵计算出正确的屏幕位置
• 按钮位置要考虑自身宽高，否则会出现按钮左上角对齐触摸点的情况，而非中心对齐

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