如何在 Jetpack Compose 中使用 Path API 中的 arcTo 函数？

Question

我正在尝试使用 jetpack compose 在画布中创建一个形状，但没有成功。

所讨论的形状是一个矩形，右侧有一个半圆拱形。

这是代码

@Composable
fun MyCanvas() {
    Canvas(modifier = Modifier
        .width(300.dp)
        .height(300.dp)
        ) {
        val path = Path().apply {
            moveTo(400f, 100f)
            lineTo(100f, 100f)
            lineTo(100f, 400f)
            lineTo(600f, 400f)
            arcTo(
                rect = Rect(
                    left = 100f,
                    top = 400f,
                    right = 600f,
                    bottom = 400f
                )
                , startAngleDegrees = 0f,
                sweepAngleDegrees = 90f,
                forceMoveTo = false
                )

        }
        drawPath(
            path = path,
            style = Stroke(width = 10f),
            brush = Brush.linearGradient(
                colors = listOf(
                    Color.Red,
                    Color.Blue,)
            ),
        )
   }

}

这就是我期待的形状

但是弧线没有出现。

我认为这与对arcTo函数中的rect参数的误解有关。

我读到 left 和 top 参数用于假想矩形的左上角， right 和 Bottom 参数是右下角的参数。

我根据自己的理解输入了坐标，但仍然不起作用。

Answer 1

在文中，您谈到“右侧的半圆拱门”，但您用来说明的图像中的弧看起来更像是四分之一圆。不完全是，但肯定不是半圆。

假设你想要

正好四分之一圆你可以使用这个：

arcTo(
    rect = Rect(
        left = 400f,
        top = -200f,
        right = 1000f,
        bottom = 400f
    ),
    startAngleDegrees = 90f,
    sweepAngleDegrees = 90f,
    forceMoveTo = false,
)

首先，想一想完整的圆会是什么样子。由于另一个形状的高度为 300，因此圆形的高度需要为 600。由于它是圆形而不是椭圆形，因此其宽度也将是。现在您需要定义

Rect

 以便圆圈适合其中。 

left

 为 400，因此它接触另一个形状上部的末端，并且 

bottom

 需要与另一个形状的下部（也是 400）对齐。

top

 和 

right

然后可以通过分别减去圆的直径 600 来计算。

现在，由于您不想绘制整个圆，因此您需要定义要绘制的线段的开始位置。那将位于另一个形状的右下角。对于垂直向下看的圆心。

startAngleDegrees

 从右侧的 0 开始并顺时针旋转，因此“直线向下”将为 90 度。 

sweepAngleDegrees

 然后定义应绘制多少圆段。由于您想要四分之一圆，因此需要额外的 90 度。

生成的路径将如下所示：

了解了

arcTo

 的工作原理后，如果您想要四分之一圆之外的其他东西，您现在可以将其调整为您实际想要实现的目标。