如何在Jetpack Compose中测量适配后图片的偏移量？

问题根源在于fillMaxSize()让AsyncImage占据了父容器的全部空间，onGloballyPositioned获取到的是AsyncImage自身的布局边界，而非内部图片经过ContentScale.Fit缩放后的实际绘制区域。下面提供两种可行的解决思路：

方法一：通过计算获取图片实际绘制区域（简单高效） #

利用图片的原始尺寸和父容器尺寸，结合ContentScale.Fit的缩放规则，直接计算出图片的缩放比例、最终尺寸和偏移量。

@Composable
fun ScaledImageWithOffset(src: String) {
    val imageSize = remember { mutableStateOf(IntSize.Zero) }
    val imageOffset = remember { mutableStateOf(Offset.Zero) }
    val painterState = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .data(src)
            .crossfade(true)
            .build(),
        placeholder = painterResource(id = R.drawable.rip),
        error = painterResource(id = R.drawable.rip)
    )

    AsyncImage(
        painter = painterState,
        contentScale = ContentScale.Fit,
        contentDescription = null,
        modifier = Modifier
            .background(Color.DarkGray)
            .fillMaxSize()
            .onGloballyPositioned { layoutCoordinates ->
                val parentSize = layoutCoordinates.size
                val intrinsicSize = painterState.intrinsicSize
                // 确保图片已加载完成，避免初始阶段的无效计算
                if (intrinsicSize.width > 0 && intrinsicSize.height > 0) {
                    // 计算Fit模式下的缩放比例
                    val scale = min(
                        parentSize.width / intrinsicSize.width,
                        parentSize.height / intrinsicSize.height
                    )
                    val scaledWidth = intrinsicSize.width * scale
                    val scaledHeight = intrinsicSize.height * scale
                    // 计算居中偏移
                    val offsetX = (parentSize.width - scaledWidth) / 2f
                    val offsetY = (parentSize.height - scaledHeight) / 2f

                    imageSize.value = IntSize(scaledWidth.toInt(), scaledHeight.toInt())
                    imageOffset.value = Offset(offsetX, offsetY)
                }
            }
    )

    // 示例：使用计算出的偏移量在图片上绘制内容
    Canvas(modifier = Modifier.fillMaxSize()) {
        drawCircle(
            color = Color.Red,
            radius = 20f,
            center = imageOffset.value + Offset(imageSize.value.width / 2f, imageSize.value.height / 2f)
        )
    }
}

方法二：自定义LayoutModifier测量图片实际位置 #

通过自定义布局修饰符，手动处理图片的测量与布局，直接回调出图片的实际尺寸和偏移量，适合需要更精确布局控制的场景。

// 自定义LayoutModifier，用于测量ContentScale.Fit模式下的图片实际区域
fun Modifier.measureImageFit(
    contentScale: ContentScale,
    onMeasured: (size: IntSize, offset: Offset) -> Unit
) = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    val originalSize = Size(placeable.width.toFloat(), placeable.height.toFloat())
    val targetSize = Size(constraints.maxWidth.toFloat(), constraints.maxHeight.toFloat())
    
    // 利用ContentScale内置方法计算缩放比例
    val scaleFactor = contentScale.computeScaleFactor(originalSize, targetSize)
    val scaledSize = originalSize * scaleFactor.scale
    val offset = Offset(
        (targetSize.width - scaledSize.width) / 2f,
        (targetSize.height - scaledSize.height) / 2f
    )

    // 按父容器尺寸布局，内部图片居中放置
    layout(constraints.maxWidth, constraints.maxHeight) {
        placeable.place(offset.x.toInt(), offset.y.toInt())
        onMeasured(IntSize(scaledSize.width.toInt(), scaledSize.height.toInt()), offset)
    }
}

// 使用示例
@Composable
fun ScaledImageWithCustomLayout(src: String) {
    val imageSize = remember { mutableStateOf(IntSize.Zero) }
    val imageOffset = remember { mutableStateOf(Offset.Zero) }

    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(src)
            .crossfade(true)
            .build(),
        contentScale = ContentScale.Fit,
        placeholder = painterResource(id = R.drawable.rip),
        error = painterResource(id = R.drawable.rip),
        contentDescription = null,
        modifier = Modifier
            .background(Color.DarkGray)
            .fillMaxSize()
            .measureImageFit(ContentScale.Fit) { size, offset ->
                imageSize.value = size
                imageOffset.value = offset
            }
    )

    // 示例绘制
    Canvas(modifier = Modifier.fillMaxSize()) {
        drawRect(
            color = Color.Green.copy(alpha = 0.3f),
            topLeft = imageOffset.value,
            size = imageSize.value.toSize()
        )
    }
}

关键说明 #

• 两种方法都保留了fillMaxSize()，确保图片容器适配父容器边界；
• 方法一依赖图片加载完成后的intrinsicSize，需判断尺寸有效性避免初始阶段的错误计算；
• 方法二通过自定义布局直接获取图片实际位置，不受图片加载状态影响（占位图/错误图也能正确测量）。

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