Android Jetpack Compose中画布的重组

我使用Jetpack Compose来实现绘制“逐渐增长线”的要求，即从指定的起点和终点开始，逐渐“增长”直到达到指定的终点的线。 我之前用自定义视图实现了这一点，效果很好。我的逻辑要求根据某些条件反复调用“onDraw（）”。为此，我在使用自定义视图时使用了“invalidate（）”。但现在我正在使用Jetpack Compose，无法找到重新组合“Canvas”的方法

这是我的Jetpack“渐增线”组合代码：

   @Composable
        fun SplashUI() {
            var test = remember { mutableStateOf(0) }
                Canvas(modifier = Modifier.fillMaxSize()) {
                    //  starting point
                    x1 = 0.0;
                    y1 = size.height / 2.0;

                    //  ending point
                    x2 = size.width.toDouble()
                    y2 = size.height / 2.0;

                    divideLineIntoEqualParts();

                    if (test.value < listOfPoints.size) {
                        drawLine(
                            Color.Black,
                            Offset(
                                listOfPoints.get(0)?.x!!,
                                listOfPoints.get(0)?.y!!
                            ),
                            Offset(
                                listOfPoints.get(inte)?.x!!,
                                listOfPoints.get(inte)?.y!!
                            ),
                            strokeWidth = 5f
                        );
                    }
                    test.value = test.value + 1 //This doesn't trigger recomposition of canvas
                    //Recomposition of Canvas should happen after the above step for my logic to work

                   //I had implemented this earlier using custom view, and used 'invalidate()' like:
                   /* if (inte < listOfPoints.size) {
                        invalidate()
                    }*/
            }
        }


    private fun divideLineIntoEqualParts() {
        listOfPoints.clear()
        for (k in 1..50) {
            listOfPoints.add(PointF((x1 + k * (x2 - x1) / 50).toFloat(),
                (y1 + k * (y2 - y1) / 50).toFloat()
            ))
        }
        Log.d("listOfPoints : size : ", listOfPoints.size.toString() + "")
    }

@Composable
乐趣{
var test=记住{mutableStateOf（0）}
画布（修饰符=modifier.fillMaxSize（））{
//起点
x1=0.0；
y1=尺寸高度/2.0；
//终点
x2=size.width.toDouble（）
y2=尺寸高度/2.0；
将线分成相等部分（）；
if（测试值<点数列表大小）{
抽绳(
颜色，黑色，
抵消(
点列表。获取（0）？.x！！，
点列表。获取（0）？.y！！
),
抵消(
点列表。获取（inte）？.x！！，
点列表。获取（inte）？.y！！
),
冲程宽度=5f
);
}
test.value=test.value+1//这不会触发画布的重新编译
//画布的重新编译应该在上述步骤之后进行，这样我的逻辑才能工作
//我之前使用自定义视图实现了这一点，并使用了“invalidate（）”，如：
/*if（inte<点数列表大小）{
使无效
}*/
}
}
私人娱乐划分为相等部分（）{
点列表。清除（）
对于（1..50中的k）{
添加（点F（（x1+k*（x2-x1）/50）.toFloat（），
（y1+k*（y2-y1）/50）
))
}
Log.d（“listOfPoints:size:，listOfPoints.size.toString（）+”）
}

---

请建议一种方法，我可以重新组合画布，或其他一些方法，使我的逻辑工作。

有一些不同。
问题中的代码在Android的

视图中工作

，您正在

onDraw

方法的

画布上绘制。您正在绘制一条以点为单位划分可用空间（=宽度）的水平线

在Compose中，您只需将
画布
用作
可组合
，即可设置线条长度的动画。
比如：

//Animation - it will be repeated 2 times
val animatedProgress = remember { Animatable(0.001f) }
LaunchedEffect(animatedProgress) {
    animatedProgress.animateTo(1f,
        animationSpec = repeatable(2,
            animation = tween(durationMillis = 3000, easing = LinearEasing)
        ))
}

Canvas(modifier = Modifier.fillMaxSize() ) {

    val startingPoint = Offset(0f, size.height / 2f)
    val endingPoint = Offset(size.width * animatedProgress.value, size.height / 2f)

    //At the end of animation just remove the line
    if (animatedProgress.isRunning) {
        drawLine(
            strokeWidth = 8.dp.toPx(),
            color = Color.Black,
            start = startingPoint,
            end = endingPoint
        )
    }
}

我同意加布里埃尔·马里奥蒂的回答，但我发现有时你需要控制，以便能够在画布中随时重新绘制

我正在尝试开发一个绘图应用程序，当触摸事件发生时，我必须使其无效

在本文中，画布因MotionEvent的动作更改而无效，因此每次MotionEvent的动作更改时，画布都可能无效（重新绘制）

我们可以用同样的逻辑

val invalidations = remember{
    mutableStateOf(0)
}

现在在画布上可组合

Canvas {
    invalidations.let{inv->
        //Draw Composables
    }
}

现在，无论何时要使其无效：

invalidations.value = invalidations.value++

这并不是最好的方法，因为更改一个变量的状态只会导致重新绘制该可组合变量，但这种方法无效将重新绘制在无效内绘制的任何内容。让我们阻止
 你发布的代码包含了很多语法错误。非常感谢你！