如何在Jetpack Compose的Image组件中仅显示位图指定区域？

方案一：组合现有修饰符实现 #

核心思路是用Box作为裁剪容器，配合offset和scale调整图像位置与大小，通过裁剪只保留目标区域。

步骤说明：

• 将图像像素坐标的Rect转换为Compose像素单位（借助LocalDensity处理dp与像素的转换）
• 计算缩放比例：让目标区域适配容器尺寸（保持比例）
• 计算偏移量：将目标区域左上角对齐容器左上角，偏移隐藏图像其他部分
• 开启容器裁剪，自动截断超出部分

示例代码：

val box: Rect = ... // 图像目标区域像素坐标（左250、上10、宽80、高150）
val imgPath = ...
val containerSize = Size(200.dp, 200.dp)

Box(
    modifier = Modifier
        .size(containerSize)
        .clipToBounds() // 关键：裁剪超出容器的内容
) {
    val density = LocalDensity.current
    val containerWidthPx = with(density) { containerSize.width.toPx() }
    val containerHeightPx = with(density) { containerSize.height.toPx() }
    
    // 计算缩放比例：保持目标区域比例适配容器
    val scaleX = containerWidthPx / box.width
    val scaleY = containerHeightPx / box.height
    val finalScale = min(scaleX, scaleY)
    
    // 计算偏移量：让目标区域左上角对齐容器左上角
    val offsetX = with(density) { (-box.left * finalScale).toDp() }
    val offsetY = with(density) { (-box.top * finalScale).toDp() }

    Image(
        painter = rememberAsyncImagePainter(imgPath),
        contentDescription = "Cropped image",
        modifier = Modifier
            .scale(finalScale)
            .offset(offsetX, offsetY),
        contentScale = ContentScale.None
    )
}

方案二：自定义修饰符实现（更简洁复用） #

封装成可复用的修饰符，通过drawWithCache直接绘制指定区域，无需额外偏移和裁剪容器。

示例代码：

// 自定义裁剪修饰符
fun Modifier.cropImageToRect(targetRect: Rect) = this.drawWithCache {
    val painter = (this@drawWithCache as? DrawModifierNode)?.painter ?: return@drawWithCache onDrawContent()
    
    val imageBitmap = (painter as? BitmapPainter)?.bitmap ?: return@drawWithCache onDrawContent()
    // 确保目标区域在图像范围内
    val validSrcRect = Rect(
        left = max(0, targetRect.left.toInt()),
        top = max(0, targetRect.top.toInt()),
        right = min(imageBitmap.width, targetRect.left.toInt() + targetRect.width.toInt()),
        bottom = min(imageBitmap.height, targetRect.top.toInt() + targetRect.height.toInt())
    )
    
    onDrawWithContent {
        drawImage(
            image = imageBitmap,
            srcOffset = IntOffset(validSrcRect.left, validSrcRect.top),
            srcSize = IntSize(validSrcRect.width, validSrcRect.height),
            dstSize = IntSize(size.width.toInt(), size.height.toInt())
        )
    }
}

// 使用方式
val box: Rect = ...
val imgPath = ...

Image(
    painter = rememberAsyncImagePainter(imgPath),
    contentDescription = "Cropped image",
    modifier = Modifier
        .size(200.dp)
        .cropImageToRect(box),
    contentScale = ContentScale.None
)

之前尝试失败的原因 #

• 坐标转换错误：直接用像素值作为IntOffset，未考虑Compose密度适配（dp与像素的转换）
• 缩放偏移逻辑不匹配：未计算正确缩放比例，导致目标区域无法对齐容器
• 缺少裁剪：未开启容器clipToBounds，图像其他部分仍可见

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