android Compose自定义绘制入门

最新推荐文章于 2025-11-01 01:31:35 发布

原创最新推荐文章于 2025-11-01 01:31:35 发布 · 977 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#compose #android #jetpack

android 专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何使用Canvas在Jetpack Compose中绘制各种图形，包括圆、点、线和路径，并展示了代码示例及实际效果。通过withTransform函数，还演示了如何对图形进行旋转和缩放操作。这些内容对于理解和应用Jetpack Compose的图形绘制功能非常有帮助。

git地址：
https://github.com/ananananzhuo-blog/ComposeCanvesSample

Canvas

Canvas绘制基本图像

Paint

绘制圆

代码

 Canvas(modifier = Modifier.size(300.dp)) {
            drawCircle(
                color = Color.Red,//填充颜色
                radius = 100.dp.toPx(),//设置绘制圆的半径
                center = Offset(size.width / 2, size.height / 2),//设置圆心中心坐标
                )
        }

效果

绘制点

代码

Canvas(modifier = Modifier.size(300.dp)) {
            val points = mutableListOf<Offset>()
            val width = size.width.toInt()
            for (i in 1 until width step 40) {
                points.add(Offset(i.toFloat(), i.toFloat()))//正斜向的点
                val x = width / 2 + width / 2 - i
                points.add(Offset(x.toFloat(), i.toFloat()))//反斜向的点
            }
            drawPoints(
                points = points,
                pointMode = PointMode.Points,
                color = Color.Red,
                strokeWidth = 5.dp.toPx(),

                )
        }

效果

绘制线

代码

@Composable
fun canvasDrawLines() {
    Box(modifier = Modifier.fillMaxSize(1f), contentAlignment = Alignment.Center) {
        Canvas(modifier = Modifier.size(300.dp)) {
            drawLine(
                color = Color.Red,
                start = Offset(0f, 0f),
                end = Offset(size.width, size.height),
                strokeWidth = 5f
            )
        }
    }
}

效果

绘制path

代码

Canvas(modifier = Modifier.size(300.dp)) {
            val path = Path().apply {
                moveTo(0f, 0f)
                lineTo(size.width, 0f)
                lineTo(size.width, size.height)
                lineTo(0f, size.height)
                lineTo(0f, 0f)
                close()
            }
//            drawPath(path = path, color = Color.Red, style = Fill)//画path实心的
            drawPath(path = path, color = Color.Red, style = Stroke(width = 10f))//画path线段的形式，非实心
        }

填充的效果

画线的效果

withTransform对绘制图形进行多个转换

本节实现对Rect进行旋转并缩放两倍的效果

代码

Canvas(modifier = Modifier.size(300.dp)) {
            withTransform({
                rotate(30f, Offset(size.width / 2, size.height / 2))
                scale(2f, 2f)
            }) {
                drawRect(
                    Color.Red,
                    topLeft = Offset((300.dp.toPx() - 200) / 2, (300.dp.toPx() - 200) / 2),
                    size = Size(200f, 200f),
                )
            }
        }