Android Compose Canvas使用BlendMode出现异常结果的问题排查

你当前代码的核心问题有两个：

• 遮罩颜色错误：BlendMode.DstIn需要依赖不透明的遮罩层才能生效。你用Color.Transparent画圆，相当于没有任何有效遮罩，自然无法裁剪图片。
• 遮罩形状不符合需求：你画的是完整圆形，但目标是四分之一圆，需要只保留单个象限的区域。

方案一：修正BlendMode实现 #

将遮罩改为不透明颜色，并且只绘制对应象限的四分之一圆（这里以左上角象限为例，可根据需求调整位置）：

GlideImage(
    modifier = Modifier
        .requiredSize(158.dp)
        .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
        .drawWithContent {
            val quarterRadius = size.width - 28.dp.toPx()
            // 先绘制图片
            drawContent()
            // 用不透明颜色绘制四分之一圆遮罩，配合DstIn裁剪
            drawCircle(
                blendMode = BlendMode.DstIn,
                color = Color.Black, // 必须是不透明颜色
                radius = quarterRadius,
                center = Offset(quarterRadius, quarterRadius),
                // 只绘制左上角象限的圆弧
                startAngle = 90f,
                sweepAngle = 90f
            )
        },
    contentScale = ContentScale.Crop,
    model = model.imageUrl,
    contentDescription = null,
)

方案二：使用ClipPath更直观实现 #

相比BlendMode，用clipPath实现形状裁剪逻辑更清晰，也更容易控制：

GlideImage(
    modifier = Modifier
        .requiredSize(158.dp)
        .clipPath {
            val quarterRadius = size.width - 28.dp.toPx()
            // 添加四分之一圆路径（左上角象限）
            addArc(
                rect = Rect(0f, 0f, quarterRadius * 2, quarterRadius * 2),
                startAngle = 90f,
                sweepAngle = 90f
            )
            // 闭合路径，确保裁剪区域是四分之一圆
            lineTo(0f, 0f)
            close()
        },
    contentScale = ContentScale.Crop,
    model = model.imageUrl,
    contentDescription = null,
)

补充说明 #

• 如果你的四分之一圆是其他象限（比如右上角、右下角），只需要调整startAngle和路径的起始位置即可。
• CompositingStrategy.Offscreen在使用BlendMode时是必要的，它确保绘制操作在离屏缓冲区进行，避免和其他元素的合成干扰。

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