属性

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

DrawScope 中包含以下方法

• drawLine 画线
• drawRect 画矩形
• drawImage 画图片
• drawRoundRect 画圆角矩形
• drawCircle 画圆
• drawOval 画椭圆
• drawArc 画弧
• drawPath 画路径
• drawPoints 画点

drawLine 画线

属性

fun drawLine(
    //颜色，这里也可以是 Brush (可以设置过程中某个阶段的颜色)
    color: Color,
    //开始的位置
    start: Offset,
    //结束的位置
    end: Offset,
    //线条的宽度
    strokeWidth: Float = Stroke.HairlineWidth,
    //线条两端的处理
    cap: StrokeCap = Stroke.DefaultCap,
    //设置线条的纹理和图案
    pathEffect: PathEffect? = null,
    /*FloatRange(from = 0.0, to = 1.0)*/
    //不透明度设置
    alpha: Float = 1.0f,
    //设置颜色滤镜
    colorFilter: ColorFilter? = null,
    // 渲染模式
    blendMode: BlendMode = DefaultBlendMode
)

Canvas(modifier = Modifier.fillMaxSize()) {
drawLine(
        color = Color.Blue,
        start = Offset.Zero,
        end = Offset(100f, 100f),
        strokeWidth = Stroke.DefaultMiter,//4.0f
        cap = StrokeCap.Round, //设置圆角
    )
} 

drawRect 画矩形

属性

fun drawRect(
    //颜色，这里也可以是 Brush (可以设置过程中某个阶段的颜色)
    color: Color,
    //左上角起始点位置，默认是 0
    topLeft: Offset = Offset.Zero,
    //矩形的大小
    size: Size = this.size.offsetSize(topLeft),
    /*@FloatRange(from = 0.0, to = 1.0)*/
    //不透明度
    alpha: Float = 1.0f,
    //矩形的风格: Fill 填充满，Stroke 设置宽度，以及其他属性
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

Canvas(modifier = Modifier.fillMaxSize()) {
drawRect(
        color = Color.Red,
        topLeft = Offset(50f, 50f),
        size = Size(100f, 100f),
        style = Stroke(width = 5f, cap = StrokeCap.Round)
    )
} 

drawImage 画图片

var bitmap:ImageBitmap? = null
with(LocalContext.current) {
bitmap = ImageBitmap.imageResource(id = R.drawable.ic_launcher_foreground)
}
Canvas(modifier = Modifier.fillMaxSize()) {
bitmap?.let { drawImage(it) }
} 

drawRoundRect 画圆角矩形

属性与drawRect一样，会多一个 CornerRadius

Canvas(modifier = Modifier.fillMaxSize()) {
drawRoundRect(
        color = Color.Red,
        topLeft = Offset(50f, 50f),
        size = Size(100f, 100f),
        style = Stroke(width = 5f, cap = StrokeCap.Round),
        cornerRadius = CornerRadius ( 10f , 10f )
    )
} 

drawCircle 画圆

属性

fun drawCircle(
    color: Color,
    //圆的半径
    radius: Float = size.minDimension / 2.0 f,
    //圆的位置，默认居中。
    center: Offset = this.center,
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

Canvas(modifier = Modifier.fillMaxSize()) {
drawCircle(
        color = Color.Red,
        style = Fill,
        radius = 150f
    )
} 

drawOval 画椭圆

Canvas(modifier = Modifier.fillMaxSize()) {
drawOval(
        topLeft = this.center,
        size = Size(150f, 100f),
        color = Color.Red,
        style = Fill,
    )
} 

drawArc 画弧

属性

fun drawArc(
    color: Color,
    //开始的角度
    startAngle: Float,
    //相对于起始角度的弧度大小
    sweepAngle: Float,
    //指示圆弧是否关闭边界的中心，即：弧的起始点和结束点与圆形相连。
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

Canvas(modifier = Modifier.fillMaxSize()) {
drawArc(
        color = Color.Red,
        startAngle = 0f,
        sweepAngle = 90f,
        size = Size(100f, 100f),
        useCenter = true
    )
} 

drawPoints 画点

属性

fun drawPoints(
    //点的集合
    points: List<Offset>,
    //点的模式，PointMode.Lines 点连成线
    pointMode: PointMode,
    color: Color,
    strokeWidth: Float = Stroke.HairlineWidth,
    cap: StrokeCap = StrokeCap.Butt,
    pathEffect: PathEffect? = null,
    /*@FloatRange(from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

Canvas(modifier = Modifier.fillMaxSize()) {
drawPoints(
        listOf(Offset(10f, 10f), Offset(10f, 50f), Offset(50f, 80f), Offset(80f, 100f)),
        pointMode = PointMode.Lines,
        Color.Black,
        strokeWidth = 10f,
        cap = StrokeCap.Round
    )
}