Jetpack Compose - Canvas

Compose系列文章，请点原文阅读。原文，是时候学习Compose了！

0、介绍

Canvas 是允许您在屏幕上指定区域并在此区域上执行绘制的组件。您必须使用修饰符指定尺寸，无论是通过Modifier.size修饰符指定确切尺寸，还是通过Modifier.fillMaxSize，ColumnScope.weight等相对于父级指定精确尺寸。如果父级包装了此子级，则仅必须指定确切尺寸。

1、属性一览

【目前基于beta 01版本】该函数在androidx.compose.foundation包下：

@Composable fun Canvas(
    modifier: Modifier, 
    onDraw: DrawScope.() -> Unit
): Unit

属性参数含义：

参数	含义
modifier: Modifier = Modifier	应用于布局的强制性修饰符【必须指定尺寸】
onDraw: DrawScope.() -> Unit	被调用执行绘制

看起来好像是很简单，但其实重点不在于Canvas函数。而在于它的那些用于具体绘制的函数，这篇文章我们先看下类似View视图中的一些draw函数，在androidx.compose.ui.graphics.drawscope包下：

• drawArc
• drawCircle
• drawImage
• drawLine
• drawOval
• drawPath
• drawPoints
• drawRect
• drawRoundRect

2、使用示例

在以上函数中，除了drawImage函数没有color参数，其他的函数都提供了color和brush的两种方式，关于brush请查看之前的Modifier相关文章，一下文章我们只使用color来进行演示。

具体的函数及参数请查看源码，本文只实现其必选参数完成演示，并不一定会用到所有的参数。

2.1、drawArc

该函数必须实现的参数有color，startAngle（开始的角度，0是水平右侧，负数逆时针，正数顺时针），sweepAngle （扇形的角度，正数顺时针），useCenter为boolen值，具体影响效果根据如下代码查看：

@Composable
fun DrawArcDemo() {
   
    Row() {
   
    	//示例1
        Canvas(modifier = Modifier.size(100.dp), onDraw = {
   
            drawArc(
                color = myRed,
                startAngle = 0f,
                sweepAngle = 270f,
                useCenter = true
            )
        })
		//示例2
        Canvas(modifier = Modifier.size(100.dp), onDraw = {
   
            drawArc(
                color = myRed,
                startAngle = 0f,
                sweepAngle = 270f,
                useCenter = false
            )
        })
		//示例3
        Canvas(modifier = Modifier.size(100.dp), onDraw = {
   
            drawArc(
                color = myRed,
                startAngle = -90f,
                sweepAngle = 90f,
                useCenter = false
            )
        })
    }
}

绘制结果如下所示，根据上述代码应该很好理解各个参数的作用了：

示例1	示例2	示例3