Compose 自定义 - 绘制 Draw

一、概念

所有的绘制操作都是通过调整像素大小来执行的。若要确保项目在不同的设备密度和屏幕尺寸上都能采用一致的尺寸，请务必使用 .toPx() 对 dp 进行转换或者采用小数尺寸。 

val width = 50.dp.toPx()

二、Modifier 修饰符绘制

官方页面

在修饰的可组合项之上或之下绘制。

 

@Composable
fun Demo() {
    Row(
        modifier = Modifier.size(150.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painterResource(id = R.drawable.logo_wechat_square),
            contentDescription = null,
            modifier = Modifier
                .size(50.dp)
                .drawWithContent {
                    drawContent()
                    drawRedDot()    //后绘制的会显示在上面
                }
        )
        Image(
            painterResource(id = R.drawable.logo_wechat_square),
            contentDescription = null,
            modifier = Modifier.padding(start = 10.dp).size(50.dp).drawBehind {
                drawRedDot()
            }
        )
    }
}
 
fun DrawScope.drawRedDot() {
    drawCircle(
        color = Color.Red,
        radius = 18F,
        center = Offset(drawContext.size.width, 0f)
    )
}

三、Canvas() 可组合项绘制

是一个可组合项，在 DrawScope 作用域中调用各种函数绘制。Compose 作为跨平台 UI 框架，所使用的 Canvas() 函数只是一个封装，最终还是调用具体平台即 Android 原生的 Canvas。

@Composable
fun Demo() {
    Canvas(
        modifier = Modifier.size(400.dp).background(Color.White)
    ) {
        //通过 size 可以拿到可以拿画布的宽高
        val width = size.width
        val height = size.height
        //通过 center 可以拿到画布中心点坐标
        val center = center
        //调用各种方法绘制
        drawRect(
            color = Color.Blue,
            size = Size(width,height)
        )
    }
}

四、Brush

官方页面

用于绘制渐变色。

4.2.1 使用 colorStop 更改颜色分布

自定义颜色在渐变中的显示方式，可以调整每种颜色的 colorStop 值，0 ~ 1 之间的小数。

val colorStops = arrayOf(
    0.0f to Color.Yellow,
    0.2f to Color.Red,
    1f to Color.Blue
)
Box(modifier = Modifier
        .requiredSize(200.dp)
        .background(Brush.horizontalGradient(colorStops = colorStops))
)

 4.2.2 使用 TileMode 让图案重复显示

当未指定 Brush 的开始位置 start 和结束位置 end 时，默认会填满整个区域，只有在区域 > Brush 时 TileMode 才会在渐变中平铺。以下举例 HorizontalGradient 的效果。

 4.2.3 更改 Brush 大小

当知道绘制区域大小时（如在 DrawScope 中通过 size 获取）可以按照 TileMode 方式平铺，在不知道的情况下（如将 Brush 分配给文字）可以扩展 Shader 重写 createShader() 函数利用绘制区域大小 size 形参。对于 radialGradient 如果未指定中心位置 center 和半径radius，渐变将占据整个 DrawScope 但是是以宽高较小的那边为直径，此时自定义大小会获得更好的效果（发散到屏幕外边去）。

val listColors = listOf(Color.Yellow, Color.Red, Color.Blue)
val customBrush = remember {
    object : ShaderBrush() {
        override fun createShader(size: Size): Shader {
            return LinearGradientShader(
                colors = listColors,
                from = Offset.Zero,
                to = Offset(size.width / 4f, 0f),
                tileMode = TileMode.Mirror
            )
        }
    }
}
Box(
    modifier = Modifier
        .requiredSize(200.dp)
        .background(customBrush)
)

4.2.4 使用图片作为 Brush

如需使用 ImageBitmap 作为 Brush，请以 ImageBitmap 的形式加载相应图片，然后创建 ImageShader Brush。可以应用于一下几种类型的绘制：背景、文字、画布。

val imageBrush =
    ShaderBrush(ImageShader(ImageBitmap.imageResource(id = R.drawable.dog)))
 
//用于 background
Box(
    modifier = Modifier
        .requiredSize(200.dp)
        .background(imageBrush)
)
 
//用于 TextStyle
Text(
    text = "Hello Android!",
    style = TextStyle(
        brush = imageBrush,
        fontWeight = FontWeight.ExtraBold,
        fontSize = 36.sp
    )
)
 
//用于 DrawScope#drawCircle()
Canvas(onDraw = {
    drawCircle(imageBrush)
}, modifier = Modifier.size(200.dp))

五、BlendMode 混合模式

混合是有个原图像src,一个dst目标图像，这两个图的相交区域的各种组合情况。

六、DrawScope

官方页面

6.1 绘制基本形状

6.1.1 画线 drawLine()

6.1.2 画矩形 drawRect()

6.1.3 画圆角矩形 drawRoundRect()

6.1.4 画圆形 drawCircle()

6.1.5 画椭圆形 drawOval()

6.1.6 画弧度跟扇形 drawArc()

6.1.7 画点 drawPoints()

6.2 绘制路径

6.2.1 drawPath()

6.3 绘制图片

6.3.1 drawImage()

6.4 绘制文本

6.5 用原生Canvas绘制

6.5.1 drawIntoCanvas()

drawIntoCanvas {
    val paint = Paint()
    paint.color = Color.Red
    paint.strokeWidth = 10f
    it.drawLine(p1= Offset(50f,50f),p2= Offset(200f,200f),paint = paint)
}

6.6 转换

6.6.1 平移 translate()、inset()

@Composable
fun Demo2() {
    Canvas(
        modifier = Modifier.size(200.dp).background(Color.Blue)
    ) {
        val halfSize = size / 2F
        //正常画
        drawRect(
            color = Color.Green,
            size = halfSize
        )
        //平移后画
        translate(left = 20F, top = 20F) {
            drawRect(
                color = Color.Red,
                size = halfSize
            )
        }
    }
}

6.6.2 缩放 scale()

6.6.3 旋转 rotate()、rotateRad()

6.6.4 裁剪 clipRect()、clipPath()

6.7 组合多种转换

6.7.1 withTransform()