如何在 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)

        }
    )
}

结果

您可以在此处检查绘制弧线。