android - 如何在 Jetpack Compose Canvas 中绘制圆角多边形？

Question

我正在尝试在 Jetpack Compose 中使用 Canvas 创建一个圆角三角形。

我尝试使用此代码绘制三角形:

@Composable
fun RoundedTriangle() {
    Canvas(modifier = Modifier.size(500.dp)) {
        val trianglePath = Path().apply {
            val height = size.height
            val width = size.width
            moveTo(width / 2.0f, 0f)
            lineTo(width, height)
            lineTo(0f, height)
        }
            drawPath(trianglePath, color = Color.Blue)
    }
}

但我不知道如何圆角。我也尝试使用arcTo，但无法得到合适的结果。

我怎样才能画出像下图这样的东西？

Answer 1

对于 Stroke，您可以像这样指定舍入:

drawPath(
    ...
    style = Stroke(
        width = 2.dp.toPx(),
        pathEffect = PathEffect.cornerPathEffect(4.dp.toPx())
    )
)

然而 Fill 似乎缺乏对舍入的支持。我创建了一个 feature request ，请加注星标。

但 Canvas 有 drawOutline函数，它接受 Outline，可以包装 Path 和 Paint，您可以为其指定 pathEffect :

Canvas(modifier = Modifier.fillMaxWidth().aspectRatio(1f)) {
    val rect = Rect(Offset.Zero, size)
    val trianglePath = Path().apply {
        moveTo(rect.topCenter)
        lineTo(rect.bottomRight)
        lineTo(rect.bottomLeft)
        close()
    }

    drawIntoCanvas { canvas ->
        canvas.drawOutline(
            outline = Outline.Generic(trianglePath),
            paint = Paint().apply {
                color = Color.Black
                pathEffect = PathEffect.cornerPathEffect(rect.maxDimension / 3)
            }
        )
    }
}

路径助手:

fun Path.moveTo(offset: Offset) = moveTo(offset.x, offset.y)
fun Path.lineTo(offset: Offset) = lineTo(offset.x, offset.y)

结果: