Jetpack Compose中如何获取Coil AsyncImage（ContentScale.Fit）加载后的实际尺寸与位置？

要解决在AsyncImage上叠加对应原始坐标按钮的问题，核心是拿到图片原始尺寸、计算容器内的缩放比例，再转换坐标。以下是具体实现步骤：

1. 获取图片原始尺寸 #

通过Coil的ImageRequest监听加载成功回调，拿到图片的原始像素宽高，存入Compose状态中：

val originalImageSize = remember { mutableStateOf<Size?>(null) }

val imageRequest = ImageRequest.Builder(LocalContext.current)
    .data(yourImageSource) // 替换为你的图片资源/URL
    .listener(
        onSuccess = { _, metadata ->
            originalImageSize.value = Size(
                metadata.size.width.toFloat(),
                metadata.size.height.toFloat()
            )
        }
    )
    .build()

2. 计算图片在容器内的实际绘制区域 #

利用Modifier.onSizeChanged获取AsyncImage容器的尺寸，结合原始图片宽高比，计算出缩放后图片的实际大小和偏移（因为ContentScale.Fit会让图片居中显示，上下/左右可能有留白）：

val containerSize = remember { mutableStateOf<Size?>(null) }
val scaledImageRect = remember { mutableStateOf<Rect?>(null) }

AsyncImage(
    model = imageRequest,
    contentDescription = "Ground plan",
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .fillMaxWidth()
        .onSizeChanged { size ->
            containerSize.value = Size(size.width.toFloat(), size.height.toFloat())
            
            // 仅当原始尺寸和容器尺寸都就绪时计算
            originalImageSize.value?.let { originalSize ->
                val containerWidth = size.width.toFloat()
                val containerHeight = size.height.toFloat()

                // 计算适配容器的缩放因子
                val scaleFactor = minOf(
                    containerWidth / originalSize.width,
                    containerHeight / originalSize.height
                )

                // 缩放后的图片宽高
                val scaledWidth = originalSize.width * scaleFactor
                val scaledHeight = originalSize.height * scaleFactor

                // 图片在容器内的居中偏移量
                val offsetX = (containerWidth - scaledWidth) / 2f
                val offsetY = (containerHeight - scaledHeight) / 2f

                // 保存图片的实际绘制区域（左、上、右、下坐标）
                scaledImageRect.value = Rect(
                    left = offsetX,
                    top = offsetY,
                    right = offsetX + scaledWidth,
                    bottom = offsetY + scaledHeight
                )
            }
        }
)

3. 转换原始坐标为实际布局坐标 #

拿到scaledImageRect后，将按钮的原始像素坐标按比例转换为Compose中的布局坐标，再叠加到图片上：

// 用Box布局包裹AsyncImage和按钮，实现叠加
Box(modifier = Modifier.fillMaxWidth()) {
    // 这里放上面的AsyncImage代码

    scaledImageRect.value?.let { rect ->
        originalImageSize.value?.let { originalSize ->
            // 示例：原始像素坐标的按钮
            val originalBtnX = 300f // 按钮在原始图片上的X像素坐标
            val originalBtnY = 500f // 按钮在原始图片上的Y像素坐标

            // 计算比例系数
            val xScale = rect.width / originalSize.width
            val yScale = rect.height / originalSize.height

            // 转换后的实际坐标（相对于Box容器的左上角）
            val actualBtnX = rect.left + originalBtnX * xScale
            val actualBtnY = rect.top + originalBtnY * yScale

            // 绘制按钮
            Button(
                onClick = { /* 按钮点击逻辑 */ },
                modifier = Modifier
                    .offset(x = actualBtnX, y = actualBtnY)
                    .size(48.dp)
            ) {
                Text("按钮")
            }
        }
    }
}

关键注意点 #

• 必须等待originalImageSize和containerSize都不为空时再计算缩放区域，避免空指针异常。
• 如果AsyncImage用wrapContentHeight()，容器高度会在图片加载完成后自动调整，onSizeChanged会再次触发，此时计算的结果会更准确。
• 若需要支持图片缩放、拖动，可结合Modifier.graphicsLayer处理变换，坐标转换逻辑只需基于当前的缩放和偏移量调整即可。

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