如何在 Jetpack Compose 中為截止區域的圓角添加圓弧？

Question

我想要左右三角形角周圍的圓角曲線。 我嘗試添加圓弧，但我不知道它不起作用，也許坐標是錯誤的。 或者還有其他方法嗎？

@Composable
fun NavBarCustomShape() {
    Canvas(modifier = Modifier.fillMaxWidth().height(64.dp)){

        val rect = Rect(Offset.Zero, size)
        val trianglePath = Path().apply {
            // Moves to top center position
            moveTo(x = rect.topCenter.x, y = 27.dp.toPx())
            // Add line to bottom right corner
            lineTo(x = rect.bottomCenter.x - 37.dp.toPx(), y = rect.bottomLeft.y )
            // Add line to bottom left corner
            lineTo(x = rect.bottomCenter.x + 37.dp.toPx(), y = rect.bottomRight.y)

//            moveTo(x = rect.bottomCenter.x - 32.dp.toPx(), y = rect.bottomLeft.y )
//            addArc(
//                Rect(
//                    offset = Offset(rect.bottomCenter.x - 32.dp.toPx(),rect.bottomRight.y),
//                    size = Size(24.dp.toPx(),24.dp.toPx())
//                ),
//                startAngleDegrees = 0f,
//                sweepAngleDegrees = 90f,
//            )
            close()
        }


        rotate(180f)
        {
            clipPath(trianglePath, clipOp = ClipOp.Difference)
            {
                drawRect(color = purple)
            }
        }
    }
}

結果形狀：-

所需的形狀是：-

Answer 1

給你 go。繪制圓弧時要考慮的是它所在矩形的直徑或長度。因為你繪制的圓弧的尺寸是該矩形的四分之一。 掃角為90度，考慮從3點開始畫0度弧，順時針移動。

這將繪制半徑為 16.dp 的圓弧，您可以相應地更改它。

@Composable
fun ArcSample() {

    val path = Path()
    Canvas(modifier = Modifier
        .fillMaxWidth()
        .height(64.dp),
        onDraw = {
            val canvasWidth = size.width

            val arcDiameter = 32.dp.toPx()
            val shapeHeight = 27.dp.toPx()

            val horizontalCenter = canvasWidth / 2

            path.apply {
                lineTo(x = horizontalCenter - arcDiameter, y = 0f)

                // Left arc
                arcTo(
                    rect = Rect(
                        left = horizontalCenter - arcDiameter,
                        top = 0f,
                        right = horizontalCenter,
                        bottom = arcDiameter
                    ),
                    startAngleDegrees = -90.0f,
                    sweepAngleDegrees = 90.0f,
                    forceMoveTo = false
                )

                // Right arc
                arcTo(
                    rect = Rect(
                        left = horizontalCenter,
                        top = 0f,
                        right = horizontalCenter + arcDiameter,
                        bottom = arcDiameter
                    ),
                    startAngleDegrees = 180.0f,
                    sweepAngleDegrees = 90.0f,
                    forceMoveTo = false
                )

                lineTo(x = canvasWidth, y = 0f)
                lineTo(x = canvasWidth, y = shapeHeight)
                lineTo(x = 0f, y = shapeHeight)

            }

            drawPath(path, Color.Red)

        }
    )
}

結果

您可以在此處檢查繪制弧線。