How to add arc for rounded corner for cut off area in 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 :-

@pylyp could you help me ? – Jeevan Rupacha Apr 15 '22 at 17:48 — Jeevan Rupacha, Apr 15 '22 at 17:48

Thracian · Answer 1 · 2022-04-05T17:08:36.563

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.

I want triangle with two corner rounded not all rounded triangle . How can I do ? — Jeevan Rupacha, Apr 10 '22 at 04:32

How to add arc for rounded corner for cut off area in jetpack compose?

1 Answers1