清除 canvas 绘图：Jetpack Compose

Question

在canvas上完成绘图后如下：

@Composable
fun DrawFigures(count: Int){
    val radius = 200f
    val animateFloat = remember { Animatable(0f) }
    if(count == 1)
        LaunchedEffect(animateFloat) {
            animateFloat.animateTo(
                targetValue = 1f,
                animationSpec = tween(durationMillis = 3000, easing = LinearEasing))
        }

   Canvas(modifier = Modifier.fillMaxSize()){
       drawArc(
           color = Color.Black,
           startAngle = 0f,
           sweepAngle = 360f * animateFloat.value,
           useCenter = false,
           topLeft = Offset(size.width / 4, size.height / 4),
           size = Size(radius * 2 ,
               radius * 2),
           style = Stroke(2.0f))

    //Other drawings
    drawLine(..)
    drawLine(..)
   }
}

这动画圆形绘图。但重组后无论计数值是多少，总是显示圆圈。我们如何清除 canvas 或者是否有任何其他方法可以根据计数值实现此动画？

编辑：还有其他的图需要画，调用这个composable，根据计数值重新组合。这是一个游戏，当用户再次点击播放时，计数值将归零。

Answer 1

如果要清除 Canvas 元素，请使用状态提升技术。

@Composable
fun DrawFigures(count: Int){
    val radius = 200f
    val animateFloat = remember { Animatable(0f) }
    ...
    if(animateFloat.isRunning){ // The Canvas will disappear if the Animator is completed. Also, it won't appear when the Animator hasn't started yet
        Canvas(modifier = Modifier.fillMaxSize()){
            ...
        }
    }
}

这里的结果：

查看更多：State in Compose

清除 canvas 绘图：Jetpack Compose

Clear canvas drawing: Jetpack Compose

android

canvas

android-jetpack-compose