Jetpack Compose中为自定义形状添加圆角

我已经在Jetpack Compose中创建了自定义形状，希望为其添加圆角效果。以下是我的实现代码、当前效果以及期望达成的效果：

现有自定义形状代码 #

class CustomShape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = androidx.compose.ui.graphics.Path().apply {
            lineTo(0f, size.height)
            lineTo(size.width, size.height)
            lineTo(size.width, (size.height / 2.5).toFloat())
            close()

        }
        return Outline.Generic(path)
    }
}

形状应用代码 #

Box(modifier = Modifier
        .widthIn(min = 250.dp, max = 250.dp)){
    Box(
        Modifier
            .widthIn(min = 250.dp, max = 250.dp)
            .height(150.dp)
            .clip(CustomShape())
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(Color(0xFF5936B4), Color(0xFF362A84))
                )
            ).align(Alignment.BottomCenter)
    ) {}
    Content()
}

当前效果 #

期望效果 #

要实现带圆角的自定义形状，只需在构建Path时，用圆弧替代直角连接即可。以下是修改后的代码，可实现左下角、右下角及右上角的圆角效果：

class RoundedCustomShape(private val cornerRadius: Dp = 16.dp) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val radius = with(density) { cornerRadius.toPx() }
        val path = androidx.compose.ui.graphics.Path().apply {
            // 左下角圆角
            moveTo(radius, size.height)
            arcTo(
                rect = Rect(0f, size.height - radius, radius, size.height),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
            )

            // 右下角圆角
            lineTo(size.width - radius, size.height)
            arcTo(
                rect = Rect(size.width - radius, size.height - radius, size.width, size.height),
                startAngleDegrees = 270f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
            )

            // 右上角圆角
            val cornerY = (size.height / 2.5).toFloat()
            lineTo(size.width, cornerY + radius)
            arcTo(
                rect = Rect(size.width - radius, cornerY, size.width, cornerY + radius),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
            )

            // 闭合路径
            lineTo(0f, 0f)
            close()
        }
        return Outline.Generic(path)
    }
}

修改应用代码 #

使用带圆角参数的新形状：

Box(modifier = Modifier
        .widthIn(min = 250.dp, max = 250.dp)){
    Box(
        Modifier
            .widthIn(min = 250.dp, max = 250.dp)
            .height(150.dp)
            .clip(RoundedCustomShape(cornerRadius = 16.dp))
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(Color(0xFF5936B4), Color(0xFF362A84))
                )
            ).align(Alignment.BottomCenter)
    ) {}
    Content()
}

代码说明 #

• 将圆角大小设为可配置参数，方便调整圆角弧度；
• 通过arcTo方法在指定矩形范围内绘制圆弧，替换原路径的直角；
• 调整路径绘制顺序，确保圆弧与直线衔接自然，避免路径断裂。

内容的提问来源于stack exchange，提问作者mikolaj-jalocha