Jetpack Compose如何绘制曲线？

Question

有人能解释一下如何使用Jetpack Compose和画布绘制这些线条吗？

- Natex

---

请查看此问题的链接：https://stackoverflow.com/questions/70876693/how-to-draw-curved-line-chart-using-canvas-jetpack-compose - commandiron

请查看此链接 - https://medium.com/falabellatechnology/jetpack-compose-canvas-8aee73eab393 - Vishal Vasani

Answer 1

我不确定你是否想要更加动态的内容，但是这段代码可以为你提供一些启示。

@vishal-vasani评论的文章非常有帮助。

@Composable
fun DrawBrackets() {
    Canvas(
        modifier = Modifier
            .height(200.dp)
            .fillMaxWidth()
    ) {
        val width = size.width
        val height = size.height
        val halfWidth = width.times(.5f)
        val halfHeight = height.times(.5f)

        val startPoints = listOf(
            PointF(0f, 0f),
            PointF(0f, halfHeight),
            PointF(0f, height),

            PointF(width, 0f),
            PointF(width, halfHeight),
            PointF(width, height),
        )

        val path = Path().apply {
            startPoints.forEach { point ->

                val lineEndX =
                    if (point.x > halfWidth)
                        width.minus(halfWidth.times(.3f))
                    else
                        halfWidth.times(.3f)

                val curveXPart1 =
                    if (point.x > halfWidth)
                        width.minus(halfWidth.times(.5f))
                    else
                        halfWidth.times(.5f)

                val curveXPart2 =
                    if (point.x > halfWidth)
                        width.minus(halfWidth.times(.7f))
                    else
                        halfWidth.times(.7f)

                val curve1 = PointF(curveXPart1, point.y)
                val curve2 = PointF(curveXPart1, halfHeight - ((halfHeight - point.y) / 2))

                moveTo(point.x, point.y)
                lineTo(lineEndX, point.y)
                quadraticBezierTo(
                    curve1.x,
                    curve1.y,
                    curve2.x,
                    curve2.y,
                )
                quadraticBezierTo(
                    curveXPart1,
                    halfHeight,
                    curveXPart2,
                    halfHeight,
                )
                lineTo(halfWidth, halfHeight)
            }
        }
        drawPath(
            path = path,
            color = Color.Black,
            style = Stroke(width = 20f, cap = StrokeCap.Round)
        )
    }
}

这里是结果：

- nglauber