android compose DrawScope - Canvas 使用

在 Compose 中绘制自定义内容的核心方法是使用修饰符，例如 Modifier.drawWithContent、Modifier.drawBehind 和 Modifier.drawWithCache。

如果您只需使用可组合项进行绘制，可使用 Canvas 可组合项。Canvas可组合项是一个包裹 Modifier.drawBehind 的便利封装容器。在布局中放置Canvas的方式与放置其他 Compose UI 元素相同。在Canvas中，您可以通过精确控制元素的样式和位置来绘制元素。

所有绘制修饰符都会提供 DrawScope（一个维护自身状态且限定了作用域的绘制环境），可供您为一组图形元素设置参数。DrawScope提供了几个有用的字段，例如size（用于指定DrawScope的当前尺寸的Size对象）。

package com.wn.androidcomposedemo1.basegoogleimage import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Canvas import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Canvas import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.drawscope.DrawScope import androidx.compose.ui.graphics.drawscope.rotate import androidx.compose.ui.graphics.drawscope.scale import androidx.compose.ui.graphics.drawscope.translate import androidx.compose.ui.res.imageResource import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.wn.androidcomposedemo1.R import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme /** * Author : wn * Email : maoning20080808@163.com * Date : 2026/7/3 16:21 * Description : * 在 Compose 中绘制自定义内容的核心方法是使用修饰符，例如 Modifier.drawWithContent、Modifier.drawBehind 和 Modifier.drawWithCache。 */ class DrawScopeActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { AndroidComposeDemo1Theme() { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { DrawScopeExample() } } } } @Composable fun DrawScopeExample(){ Column(horizontalAlignment = Alignment.CenterHorizontally) { Spacer(Modifier.height(20.dp)) Text("使用DrawScope - Canvas绘制", fontSize = 20.sp, color = Color.Red) Spacer(Modifier.height(20.dp)) var showScale by remember { mutableStateOf(false) } var showTranslate by remember { mutableStateOf(false) } var showRotate by remember { mutableStateOf(false) } var showImage by remember { mutableStateOf(false) } Row(horizontalArrangement = Arrangement.Center) { Button(onClick = { showScale = !showScale; }) { Text("缩放") } Spacer(Modifier.width(20.dp)) Button(onClick = { showTranslate = !showTranslate }) { Text("平移") } Spacer(Modifier.width(20.dp)) Button(onClick = { showRotate = !showRotate }) { Text("旋转") } Spacer(Modifier.width(20.dp)) Button(onClick = { showImage = !showImage }) { Text("绘制图片") } } DrawScopeScaleExample(showScale) DrawScopeTranslateExample(showTranslate) DrawScopeRotateExample(showRotate) DrawScopeImageExample(showImage) } } //缩放 @Composable fun DrawScopeScaleExample(showScale : Boolean){ if(showScale){ Canvas(modifier = Modifier.fillMaxSize()) { scale(scaleX = 3f, scaleY = 5f){ drawCircle(Color.Blue, radius = 20.dp.toPx()) } } } } //平移 @Composable fun DrawScopeTranslateExample(showTranslate : Boolean){ if(showTranslate){ Canvas(modifier = Modifier.fillMaxSize()) { translate(left = 100f, top = -300f) { drawCircle(Color.Red, radius = 100.dp.toPx()) } } } } //旋转 @Composable fun DrawScopeRotateExample(showRotate: Boolean){ if(showRotate){ Canvas(modifier = Modifier.fillMaxSize()){ rotate(degrees = 45f){ drawRect( color = Color.Gray, topLeft = Offset(x = size.width/3f, y = size.height / 3f), size = size / 3f ) } } } } //绘制图片 @Composable fun DrawScopeImageExample(showImage : Boolean){ val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) if(showImage){ Canvas(modifier = Modifier.fillMaxSize().padding(start = 20.dp, top = 20.dp), onDraw = { drawImage(dogImage) }) } } }