如何在QML的Image组件中获取鼠标点击的像素级位置？

当使用Image.PreserveAspectFit时，图像会按比例缩放后居中显示在Image组件内，鼠标点击返回的是组件的坐标，而非图像实际显示区域的坐标，更不是原图的真实像素坐标。需要通过坐标转换来得到目标值。

解决步骤 #

• 获取原图真实宽高：利用Image组件的sourceSize属性直接读取，无需硬编码尺寸
• 计算图像在组件内的实际显示尺寸和偏移量：通过对比原图与组件的宽高比，确定缩放后的显示大小，再算出图像在组件中的居中偏移
• 坐标映射：将鼠标点击的组件坐标转换为图像显示区域内的相对坐标，再通过比例映射到原图的真实像素坐标

修改后的代码 #

Image {
    id: sourceImage
    width: parent.width
    height: parent.height
    fillMode: Image.PreserveAspectFit
    source: "D://test.png"
    mipmap: true
    smooth: true
    antialiasing: true

    // 计算图像实际显示的宽高
    property real displayWidth: {
        const srcRatio = sourceSize.width / sourceSize.height;
        const compRatio = width / height;
        return compRatio > srcRatio ? height * srcRatio : width;
    }
    property real displayHeight: {
        const srcRatio = sourceSize.width / sourceSize.height;
        const compRatio = width / height;
        return compRatio > srcRatio ? height : width / srcRatio;
    }

    // 计算图像在组件内的偏移量
    property real offsetX: (width - displayWidth) / 2
    property real offsetY: (height - displayHeight) / 2

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // 过滤图像区域外的点击
            if (mouse.x >= offsetX && mouse.x <= offsetX + displayWidth &&
                mouse.y >= offsetY && mouse.y <= offsetY + displayHeight) {
                // 转换为图像显示区域内的相对坐标
                const relX = mouse.x - offsetX;
                const relY = mouse.y - offsetY;
                // 映射到原图真实像素坐标
                const realX = Math.round(relX * sourceSize.width / displayWidth);
                const realY = Math.round(relY * sourceSize.height / displayHeight);
                print("真实像素坐标:", realX, realY);
            } else {
                print("点击在图像区域外");
            }
        }
    }
}

关键说明 #

• sourceSize属性会自动加载原图的真实宽高，适配不同尺寸的图片，比硬编码更灵活
• 通过宽高比计算显示尺寸，确保图像始终按原比例缩放
• 增加点击区域判断，避免在组件空白区域点击时输出无效坐标
• 用Math.round对结果取整，符合像素坐标的整数特性

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