如何隐藏Jetpack Compose Canvas中超出画布范围的内容？

要隐藏Canvas中超出边界的内容，有两种简单的实现方式：

方法一：使用Modifier的裁剪属性 #

直接给Canvas的Modifier添加clipToBounds()，它会自动保留组件范围内的内容，裁剪掉超出部分，这是最简便的实现方式：

Canvas(modifier = Modifier.size(300.dp).background(Color.Blue).clipToBounds()){
    drawCircle(
        color = Color.White,
        center = Offset(x = size.width / 2f, y = size.height / 2f),
        radius = (size.minDimension / 2f)+50
    )
}

如果需要自定义裁剪形状（比如圆形裁剪），可以换成clip(CircleShape)这类指定形状的方法，但你的需求是裁剪到画布矩形边界，clipToBounds()最为适配。

方法二：在Canvas内部手动设置裁剪区域 #

如果需要更精细的裁剪控制，可以在Canvas绘制前手动定义裁剪区域，通过saveClipRect和restore来实现：

Canvas(modifier = Modifier.size(300.dp).background(Color.Blue)){
    // 保存当前画布状态，定义裁剪区域为整个Canvas边界
    saveClipRect(left = 0f, top = 0f, right = size.width, bottom = size.height)
    drawCircle(
        color = Color.White,
        center = Offset(x = size.width / 2f, y = size.height / 2f),
        radius = (size.minDimension / 2f)+50
    )
    // 恢复画布状态，避免影响后续绘制操作
    restore()
}

这种方式适合需要局部裁剪或者动态调整裁剪区域的场景，比如仅裁剪某一部分超出的内容。

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