在保持先前繪圖的同時重新組合畫布

這個函式在畫布上繪制圖形，但是當我點擊按鈕時，它只顯示最近點擊的圖形，但我想顯示以前點擊的所有圖形。我認為 drawScope 狀態可以被記住為可變狀態，但如何實作它。

請幫忙...

    @Composable
    fun PaintBrushLayout(
        modifier: Modifier = Modifier,
    ) {
var clicked by remember {
    mutableStateOf(false)
}
var figName by remember {
    mutableStateOf("")
}

Column(
    verticalArrangement = Arrangement.Bottom, modifier = modifier.fillMaxSize()
) {
    
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(.9f)
    ) {
        Log.d("in Paint", "PaintBrushLayout: $this")
        if (clicked) {
                Log.d("TAG", "PaintBrushLayout: $figName")
                when (figName) {
                    "Circle" -> {
                        drawCircleFig(color = Color.Blue)
                    }
                    "Rectangle" -> {
                        drawRectangleFig()
                    }
                    "Oval" -> {
                        drawOvalFig(color = Color.Gray)
                    }

                }
        }

    }

    Row(
        modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween
    ) {

        BottomLayout("Circle") { click, name ->
            clicked = click
            figName = name
        }
        BottomLayout("Rectangle") { click, name ->
            clicked = click
            figName = name
        }
        BottomLayout("Oval") { click, name ->
            clicked = click
            figName = name
        }
        BottomLayout("Choose Color") { click, name ->
            clicked = click
           // figName = name
        }
    }
}
    }

創建按鈕的底部布局

    @Composable
    fun BottomLayout(
btnName: String,
click: (Boolean, String) -> Unit
    ) {
Button(onClick = {
    click(true, btnName)

}, modifier = Modifier.padding(4.dp)) {
    Text(text = btnName)
}

    }

在畫布上繪制圓形圖形

    fun DrawScope.drawCircleFig(color: Color = Color.Red) {
drawCircle(
    color = color
)
    }

在畫布上繪制矩形圖形

    fun DrawScope.drawRectangleFig(color: Color = Color.Red) {
drawRect(
    color = color
)
    }

在畫布上繪制橢圓形圖

    fun DrawScope.drawOvalFig(color: Color = Color.Red) {
drawOval(
    color = color
)
    }

uj5u.com熱心網友回復：

我不知道是否有可能重新組合 Canvas 并保持其先前狀態之前的狀態，從而允許您在已經存在的內容之上進行繪制。一種解決方案是跟蹤要執行的操作佇列，然后每次重新組合 Canvas 時，遍歷佇列并繪制每個專案。如果這是一個繪圖應用程式，它的好處是允許用戶撤消前面的步驟。我還注意到，當您單擊按鈕時，您提供的代碼不會重新組合。我以前注意到這個問題。解決方案是將記住的值分配給另一個值。以下是使用佇列的示例：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val queue = mutableListOf<DrawingObject>()
            PaintBrushLayout(queue = queue)
        }
    }
}

@Composable
fun PaintBrushLayout(
    modifier: Modifier = Modifier,
    queue: MutableList<DrawingObject>
) {
    var currentDrawingObject by remember { mutableStateOf(DrawingObject.None) }
    var c = currentDrawingObject // This fixes a bug in recomposition.

    fun addToQueue(drawingObject: DrawingObject) {
        queue.add(drawingObject)
        currentDrawingObject = drawingObject
    }

    Column(
        verticalArrangement = Arrangement.Bottom, modifier = modifier.fillMaxSize()
    ) {

        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(.9f)
        ) {
            queue.forEach { drawingObject ->
                when (drawingObject) {
                    DrawingObject.Circle -> {
                        drawCircleFig(color = Color.Blue)
                    }
                    DrawingObject.Rectangle -> {
                        drawRectangleFig()
                    }
                    DrawingObject.Oval -> {
                        drawOvalFig(color = Color.Gray)
                    }
                }
            }
        }

        Row(
            modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween
        ) {

            BottomLayout("Circle") { click, name ->
                addToQueue(DrawingObject.Circle)
            }
            BottomLayout("Rectangle") { click, name ->
                addToQueue(DrawingObject.Rectangle)
            }
            BottomLayout("Oval") { click, name ->
                addToQueue(DrawingObject.Oval)
            }
            BottomLayout("Choose Color") { click, name ->

            }
        }
    }
}

@Composable
fun BottomLayout(
    btnName: String,
    click: (Boolean, String) -> Unit
) {
    Button(onClick = {
        click(true, btnName)

    }, modifier = Modifier.padding(4.dp)) {
        Text(text = btnName)
    }
}

fun DrawScope.drawCircleFig(color: Color = Color.Red) {
    drawCircle(
        radius = 300f,
        color = color
    )
}

fun DrawScope.drawRectangleFig(color: Color = Color.Red) {
    drawRect(
        size = Size(200f, 200f),
        color = color
    )
}

fun DrawScope.drawOvalFig(color: Color = Color.Red) {
    drawOval(
        size = Size(100f, 100f),
        color = color
    )
}

enum class DrawingObject {
    None,
    Circle,
    Rectangle,
    Oval
}

標籤：科特林 安卓布局 android-canvas android-jetpack-compose

上一篇：檢查連續零的字串

下一篇：我在R中使用cowplot和ggplot2的plot_grids缺少網格中的四個圖之一？