0

I have the following two overlaying 360 degrees arc (essentially two circles) clipped by an arc shape. Unlike drawArc, addArc does not take into style = ... which can be used to define cap = StrokeCap.Round. The current clip looks as expected, an arc clipped with hard edges. Is there a way to round out the corners??

I tried using blendMode, but that does not work as expected since the color of the layers could be diffrent opacity, which blend mode takes in consideration when blending.

Canvas(modifier = Modifier.fillMaxSize()) {
                val path = Path().apply {
                    this.addArc(
                        oval = Rect(
                            topLeft = Offset(0F, 0F),
                            bottomRight = Offset(size.width, size.height)
                        ),
                        startAngleDegrees = 0F,
                        sweepAngleDegrees = 240F
                    )
                }
                clipPath(path = path) {
                    // following two drawArc could be replaced w/ drawCircle
                    drawArc(
                            color = Color.Magenta.copy(alpha = 0.2F),
                            startAngle = 0f,
                            sweepAngle = 360f,
                            useCenter = false,
                            style = Stroke(strokeWidthPx2, cap = StrokeCap.Round),
                            size = Size(size2, size2),
                            topLeft = Offset(offset2, offset2)
                        )

                    drawArc(
                            color = Color.Cyan,
                            startAngle = 0f,
                            sweepAngle = 360f,
                            useCenter = false,
                            style = Stroke(strokeWidthPx, cap = StrokeCap.Round),
                            size = Size(size1, size1),
                            topLeft = Offset(offset, offset)
                        )
                }
    }
houman
  • 23
  • 4

0 Answers0