如何在Jetpack Compose的Canvas中绘制仅单个圆角的矩形？

嘿，刚好我之前做项目的时候也碰到过这个需求，Jetpack Compose自带的drawRoundRect确实只能统一设置所有圆角的半径，但我们有几个实用的办法可以实现单个圆角的矩形，给你分享一下：

方法一：手动构建Path精确绘制 #

最灵活的方式就是用Path类手动拼接出矩形的轮廓，这样我们可以精准控制哪一个角落是圆角。比如我要给左上角做圆角，代码示例如下：

Canvas(modifier = Modifier.size(200.dp)) {
    val cornerRadius = 30.dp.toPx()
    val canvasSize = size // 这里用Canvas的尺寸，你也可以自定义矩形大小
    val singleCornerPath = Path().apply {
        // 从右上角开始绘制路径
        moveTo(canvasSize.width, 0f)
        // 画右侧竖边到右下角
        lineTo(canvasSize.width, canvasSize.height)
        // 画底部横边到左下角
        lineTo(0f, canvasSize.height)
        // 画左侧竖边到圆角的起始点（左上角往下cornerRadius的位置）
        lineTo(0f, cornerRadius)
        // 绘制左上角的圆角弧形：弧形所在的正方形区域是(0,0)到(2*cornerRadius, 2*cornerRadius)
        // 起始角度180度（向左），顺时针扫过90度，刚好形成左上角的圆角
        arcTo(
            rect = Rect(0f, 0f, cornerRadius * 2, cornerRadius * 2),
            startAngle = 180f,
            sweepAngle = 90f,
            forceMoveTo = false
        )
        // 闭合路径，让图形完整
        close()
    }

    // 填充圆角矩形
    drawPath(
        path = singleCornerPath,
        color = Color.Blue
    )

    // 如果需要描边，直接给Path加描边即可
    drawPath(
        path = singleCornerPath,
        color = Color.Black,
        style = Stroke(width = 2.dp.toPx())
    )
}

如果要修改圆角的位置（比如右上角、右下角），只需要调整arcTo的参数和路径的绘制顺序就行。比如做右上角圆角的话，就把弧形的rect设为Rect(canvasSize.width - 2*cornerRadius, 0f, canvasSize.width, 2*cornerRadius)，起始角度设为270度，扫过90度就可以了。

方法二：结合ClipPath和drawRect快速实现 #

如果觉得手动写Path太繁琐，也可以用ClipPath来裁剪出单个圆角的区域，然后在里面绘制普通矩形，代码更简洁：

Canvas(modifier = Modifier.size(200.dp)) {
    val cornerRadius = 30.dp.toPx()
    val canvasSize = size

    // 创建一个仅左上角带圆角的裁剪路径
    val clipPath = Path().apply {
        addRoundRect(
            RoundRect(
                rect = Rect(0f, 0f, canvasSize.width, canvasSize.height),
                topLeft = CornerRadius(cornerRadius),
                topRight = CornerRadius.Zero,
                bottomRight = CornerRadius.Zero,
                bottomLeft = CornerRadius.Zero
            )
        )
    }

    // 应用裁剪，在裁剪区域内绘制矩形
    clipPath(clipPath) {
        drawRect(
            color = Color.Blue,
            size = canvasSize
        )
    }
}

不过要注意，这个方法如果需要给矩形描边的话，圆角处的描边可能会被裁剪得不太自然，所以如果需要描边效果，更推荐用方法一。

备注：内容来源于stack exchange，提问作者nitnatsnoK