Android Compose 在图片上绘制带透明圆形的深色蒙层及实现图片裁剪

一、蒙层挖空效果修复 #

BlendMode.Clear 未生效的核心原因是Jetpack Compose 默认没有为Canvas开启独立离屏渲染缓冲，擦除操作会直接和底层像素混合，无法达到挖空效果，仅需为Canvas显式开启离屏缓冲即可修复。

低版本Compose可以用.graphicsLayer(alpha = 0.99f)替代显式离屏配置，同样可以触发缓冲机制。修复后的完整代码如下：

// 提前声明scale的可监听状态，按需调整作用域
var scale by remember { mutableStateOf(1f) }

Box(modifier = Modifier
    .clip(RectangleShape)
    .fillMaxSize()
    .background(Color.Black)
    .pointerInput(Unit) {
        detectTransformGestures { centroid, pan, zoom, rotation ->
            scale *= zoom
            scale = maxOf(.2f, minOf(5f, scale))
        }
    }) {
    Image(
        modifier = Modifier
            .align(Alignment.Center)
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
            },
        bitmap = bitmap.asImageBitmap(),
        contentDescription = null
    )
    // 关键修改：为Canvas开启离屏缓冲
    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .graphicsLayer(
                // 显式开启离屏渲染，确保BlendMode.Clear生效
                compositingStrategy = CompositingStrategy.Offscreen
            )
    ) {
        // 绘制半透明深色蒙层
        drawRect(Color.Black.copy(alpha = 0.8f))
        // 挖空透明圆，可自定义半径和中心坐标
        drawCircle(
            color = Color.Transparent,
            radius = 200.dp.toPx(), // 按需调整圆的大小
            center = center, // 默认居中，可自定义坐标
            blendMode = BlendMode.Clear
        )
    }
}

二、圆形区域图片裁剪方案 #

实现裁剪的核心逻辑是将View坐标系下的透明圆参数，转换为原始Bitmap对应的坐标系参数，再执行裁剪：

1. 确定透明圆在View坐标系下的圆心坐标、半径参数
2. 计算缩放后的图片在View中的实际偏移量、缩放比例，完成坐标系转换
3. 对原始Bitmap执行裁剪，超出Bitmap边界的部分可补透明像素处理

你可以通过onGloballyPositioned获取图片在父容器中的偏移：

var imageOffset by remember { mutableStateOf(Offset.Zero) }

Image(
    modifier = Modifier
        .align(Alignment.Center)
        .graphicsLayer {
            scaleX = scale
            scaleY = scale
        }
        .onGloballyPositioned {
            // 获取Image在父Box中的坐标偏移
            imageOffset = it.positionInParent()
        },
    bitmap = bitmap.asImageBitmap(),
    contentDescription = null
)

裁剪逻辑示例代码：

fun cropCircleArea(
    originalBitmap: Bitmap,
    viewCircleCenter: Offset,
    viewCircleRadius: Float,
    imageScale: Float,
    imageOffsetInView: Offset
): Bitmap {
    // 计算圆在原始Bitmap上的对应参数
    val bitmapCircleCenterX = (viewCircleCenter.x - imageOffsetInView.x) / imageScale
    val bitmapCircleCenterY = (viewCircleCenter.y - imageOffsetInView.y) / imageScale
    val bitmapRadius = viewCircleRadius / imageScale

    // 计算裁剪区域的左上坐标和宽高，防止超出Bitmap边界
    val cropLeft = maxOf(0f, bitmapCircleCenterX - bitmapRadius).toInt()
    val cropTop = maxOf(0f, bitmapCircleCenterY - bitmapRadius).toInt()
    val cropSize = minOf(
        (originalBitmap.width - cropLeft).toFloat(),
        (originalBitmap.height - cropTop).toFloat(),
        bitmapRadius * 2
    ).toInt()

    // 先裁剪出正方形区域
    val croppedSquare = Bitmap.createBitmap(
        originalBitmap,
        cropLeft,
        cropTop,
        cropSize,
        cropSize
    )

    // 再将正方形裁剪为圆形
    val output = Bitmap.createBitmap(cropSize, cropSize, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(output)
    val paint = Paint().apply {
        isAntiAlias = true
        color = Color.Black.toArgb()
    }
    canvas.drawCircle(cropSize/2f, cropSize/2f, cropSize/2f, paint)
    paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
    canvas.drawBitmap(croppedSquare, 0f, 0f, paint)
    
    // 回收临时Bitmap减少内存占用
    croppedSquare.recycle()
    return output
}

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