Compose中Canvas绘制

最新推荐文章于 2025-06-15 11:44:04 发布

原创

最新推荐文章于 2025-06-15 11:44:04 发布 · 881 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Compose #Canvas #自定义View

文章详细介绍了Canvas组件在AndroidJetpackCompose中如何绘制点、线、矩形、圆、椭圆、圆弧、图片以及路径，包括颜色、渐变、宽度、圆角等属性的使用。

Canvas绘制点

/**
 * Canvas绘制点
 */
@Composable
fun DrawPointsTest() {
    val points = arrayListOf(
        Offset(100f, 100f),
        Offset(300f, 300f),
        Offset(500f, 500f),
        Offset(700f, 700f),
        Offset(900f, 900f)
    )

    Canvas(modifier = Modifier.size(360.dp)) {
        drawPoints(
            points = points,
            //类型 PointMode.Points:点 PointMode.Lines:线 PointMode.Polygon:多边形
            pointMode = PointMode.Points,
            //颜色
            color = Color.Blue,
            //颜色渐变
//            brush = Brush.linearGradient(
//                0.0f to Color.Red,
//                0.5f to Color.Green,
//                1.0f to Color.Blue
//            ),
            //宽度
            strokeWidth = 30f,
            //Butt表示线段末端轮廓的起始点和结束点带有平缓的边缘，没有延伸；
            //Round表示线段末端以半圆开始和结束的轮廓；
            //Square表示线段末端将每个轮廓延伸笔触宽度的一半。
            cap = StrokeCap.Round
        )
    }
}

Canvas组件下用drawPoints绘制点；points属性添加点坐标；pointMode设置类型：PointMode.Points坐标为点。

PointMode.Lines两坐标点形成线段，不够两坐标最后一个坐标点自动省略不显示。

PointMode.Polygon多边形，多坐标点连线，和drawPath绘制路径类似。

color属性设置坐标点的颜色。

brush属性设置坐标点或线的渐变。

strokeWidth属性设置坐标点或线的宽度。

cap设置坐标点或线末端是否为圆角。不设置默认为方形坐标点，设置后为圆形坐标点。不设置实际是这样的点或线。

Canvas绘制线

/**
 * Canvas绘制线
 */
@Composable
fun DrawLineTest() {
    val start = Offset(100f, 100f)
    val end = Offset(900f, 900f)

    Canvas(modifier = Modifier.size(360.dp)) {
        drawLine(
            //线的颜色
            color = Color.Red,
            //起始点
            start = start,
            //末尾点
            end = end,
            //线宽
            strokeWidth = 30f,
            //线末端圆角
            cap = StrokeCap.Round