Jetpack Compose for Desktop中如何保留Canvas画布状态

问题本质 #

Compose 声明式体系下的Canvas组件不会自动缓存历史绘制内容：每次绑定的状态变化触发重组时，Canvas会清空画布重新执行drawScope内的所有绘制逻辑。你当前的代码仅存储了单次点击的最新点位，没有记录历史绘制的图形参数，重组时自然只会绘制最新的圆，之前的内容全部丢失。不存在可以直接开启的“保留画布状态”开关配置，必须自行维护绘制状态。

需要补充的实现逻辑 #

• 定义结构化的绘制元素数据类，存储每个图形的全部绘制参数（比如圆心坐标、颜色、线宽、半径等）
• 使用可观察的状态列表持有所有历史绘制元素，每次用户完成一个图形的绘制（比如点击落下、拖拽结束）就把对应元素追加到列表中
• 重绘时优先遍历历史元素列表，把所有已完成的图形全部绘制到画布上，再处理当前正在进行的临时绘制逻辑
• 补全手势监听逻辑：除了按下事件，还要监听拖拽移动、手势抬起事件，才能实现连续绘图效果

修正后的可运行代码 #

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.drag
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState

const val ACTION_IDLE = 0
const val ACTION_DOWN = 1
const val ACTION_MOVE = 2
const val ACTION_UP = 3

// 定义绘制圆的数据结构，存储每个圆的全部必要参数
data class DrawCircle(
    val center: Offset,
    val color: Color,
    val radius: Float,
    val strokeWidth: Float
)

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "Compose for Desktop 简易绘图",
        state = rememberWindowState(width = 500.dp, height = 500.dp)
    ) {
        MaterialTheme {
            var motionEvent by remember { mutableStateOf(ACTION_IDLE) }
            var currentPosition by remember { mutableStateOf(Offset.Unspecified) }
            // 持有所有历史绘制的圆，状态变化会自动触发Canvas重组
            val circleList = remember { mutableStateListOf<DrawCircle>() }
            val drawStrokeWidth = 4.dp.toPx()
            val circleRadius = 10.dp.toPx()

            Canvas(
                modifier = Modifier.fillMaxSize()
                    .background(Color.LightGray)
                    .pointerInput(Unit) {
                        forEachGesture {
                            awaitPointerEventScope {
                                val down = awaitFirstDown()
                                motionEvent = ACTION_DOWN
                                currentPosition = down.position
                                // 监听拖拽过程
                                drag(down.id) { change ->
                                    currentPosition = change.position
                                    motionEvent = ACTION_MOVE
                                    // 拖拽过程中每移动一段距离就记录一个圆，实现连续画线效果
                                    circleList.add(
                                        DrawCircle(
                                            center = change.position,
                                            color = Color.Magenta,
                                            radius = circleRadius,
                                            strokeWidth = drawStrokeWidth
                                        )
                                    )
                                }
                                motionEvent = ACTION_UP
                            }
                        }
                    }
            ) {
                // 先绘制所有历史图形
                circleList.forEach { circle ->
                    drawCircle(
                        color = circle.color,
                        center = circle.center,
                        radius = circle.radius,
                        style = Stroke(
                            width = circle.strokeWidth,
                            cap = StrokeCap.Round,
                            join = StrokeJoin.Round
                        )
                    )
                }

                // 处理当前实时绘制逻辑
                when (motionEvent) {
                    ACTION_DOWN, ACTION_MOVE -> {
                        if (currentPosition != Offset.Unspecified) {
                            drawCircle(
                                color = Color.Magenta,
                                center = currentPosition,
                                radius = circleRadius,
                                style = Stroke(
                                    width = drawStrokeWidth,
                                    cap = StrokeCap.Round,
                                    join = StrokeJoin.Round
                                )
                            )
                        }
                    }
                }
            }
        }
    }
}

如果需要实现撤销、清空画布功能，只需要操作维护的circleList即可，比如移除最后一个元素、清空整个列表，下次重组时就会自动渲染对应效果。

内容的提问来源于stack exchange，提问作者Anton Arhipov