如何在 Jetpack Compose 中为截止区域的圆角添加圆弧？

Question

I wanted the rounded curve around the corner of triangle in left and right. I tried to add arc but I don't know it's not working maybe the coordinate are wrong. Or any other methods?

@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)
            }
        }
    }
}

Result shape:-

Required shape is:-

Answer 1

Here you go. When drawing arc the thing to consider is diameter or length of the rectangle it's in. Since you draw an arc with quarter size of this rectangle. Sweep angle is 90 degrees and consider that arc drawing 0 degrees starts from 3 o'clock and moves clockwise.

This will draw arcs with 16.dp radius, you can change this accordingly.

@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)

        }
    )
}

Result

You can check here for drawing arcs.