线的长度超过了它在 (Jetpack Compose) 中绘制的 canvas

Question

我创建了一个进度条，其中有一条线从某个起点到某个终点。

下图显示了我的进度条的样子：

问题是绘制的线超出了用于绘制它的 canvas 的宽度。我把canvas的宽度设置到上图中的笑脸，但是增长的线超过了它。

此代码用于创建在绘制增长线时使用的 LaunchedEffect：

    val animatedProgress = remember { Animatable(0.001f) }
    val context = LocalContext.current
    LaunchedEffect(animatedProgress) {
        animatedProgress.animateTo(
            1f,
            animationSpec = repeatable(
                1,
                animation = tween(durationMillis = 3000, easing = LinearEasing)
            )
        )
    }

绘制静态线的代码：

  //Below canvas draws a static line for a certain length
    Canvas(modifier = Modifier.constrainAs(staticLineCanvas){
        top.linkTo(firstCircle.top)
        bottom.linkTo(firstCircle.bottom)
        start.linkTo(firstCircle.end)
    }){
        drawLine(
            cap = StrokeCap.Round,
            strokeWidth = 4.39.dp.toPx(),
            color = bright_green,
            start = Offset(0f, 0f),
            end = Offset(680f, 0f)
        )
    }

绘制生长线的代码：

    //Below canvas draws the actual growing line
    Canvas(modifier = Modifier
        .padding(start = 80.dp) //Padding to draw line from the end of static line
        .constrainAs(animatedLineCanvas)
        {
            top.linkTo(secondCircle.top)
            bottom.linkTo(secondCircle.bottom)
            start.linkTo(secondCircle.end)
            end.linkTo(thirdCircle.start)
            width = Dimension.fillToConstraints
        }) {
        val startingPoint = Offset(0f, 0f)
        val endingPoint =
            Offset(adaptDimenToMultScreens(100.0f, context) * animatedProgress.value, 0f)
//adaptDimenToMultScreens() is supposed to convert value to fit the current screen size.           
        drawLine(
            cap = StrokeCap.Round,
            strokeWidth = 4.39.dp.toPx(),
            color = bright_green,
            start = startingPoint,
            end = endingPoint
        )
    }

“adaptDimenToMultScreens()”应该转换值以适合当前屏幕尺寸（这可能不起作用）。

adaptDimenToMultScreens() 代码：

fun adaptDimenToMultScreens(value:Float, context: Context) : Float{
    val pixels = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        value,
        context.getResources().getDisplayMetrics()
    )

    return pixels
}

如何使增长线不超过 canvas（即只绘制到上图中所示的笑脸）？

Answer 1

通过在动画结束点使用 'width of canvas' 次 animatedProgress 解决了这个问题。

所以，而不是这个：

 val endingPoint = Offset(adaptDimenToMultScreens(100.0f, context) * animatedProgress.value, 0f)

我做到了：

val endingPoint = Offset(animCanvasWidth * animatedProgress.value, animCanvasHeight/2)

计算出 'animCanvasWidth' 和 'animCanvasHeight' 为：

Canvas(modifier = Modifier
                .constrainAs(animatedLineCanvas)
                {
                    top.linkTo(secondCircle.top)
                    bottom.linkTo(secondCircle.bottom)
                    start.linkTo(secondCircle.end)
                    end.linkTo(thirdCircle.start)
                    width = Dimension.fillToConstraints
                }
                .onGloballyPositioned { coordinates ->
                    animCanvasWidth = coordinates.size.toSize().width
                    animCanvasHeight = coordinates.size.toSize().height

                }
            ) {
               .
               .
               .
               }

线的长度超过了它在 (Jetpack Compose) 中绘制的 canvas

Length of line is more than the canvas it is drawn in (Jetpack Compose)

android

line

android-canvas

android-jetpack-compose