Compose Canvas

概述

在Compose中绘制文字、曲线、矩形、圆、椭圆、圆弧、路径、BlendMode等。

Canvas属性

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

@DrawScopeMarker
interface DrawScope : Density {// 当前的DrawContext，包含创建绘图环境所需的依赖项val drawContext: DrawContext// 绘图环境当前边界的中心val center: Offsetget() = drawContext.size.center// 当前绘图环境的大小（可以通过size获取当前Canvas的宽和高）val size: Sizeget() = drawContext.size// 绘制版面的版面方向val layoutDirection: LayoutDirectioncompanion object {// 用于每个绘图操作的默认混合模式。这样可以确保将内容绘制在目标中的像素上方val DefaultBlendMode: BlendMode = BlendMode.SrcOver}
}

drawPoints 绘制点

drawPoints属性

// 方法一：
fun drawPoints(points: List<Offset>, // 点的集合// Points：点模式；Lines：两点的线模式；Polygon：连续的线模式pointMode: PointMode, // 绘制方式color: Color, // 颜色strokeWidth: Float = Stroke.HairlineWidth, // 宽度// Butt：直角，末端无延伸；Round：圆角，末端有延伸；Square：直角，末端有延伸cap: StrokeCap = StrokeCap.Butt, // 末端处理pathEffect: PathEffect? = null, // 点的可选效果或图案alpha: Float = 1.0f, // 透明度colorFilter: ColorFilter? = null,  // 颜色效果blendMode: BlendMode = DefaultBlendMode // 混合模式
)// 方法二：
fun drawPoints(points: List<Offset>,pointMode: PointMode,brush: Brush, // 渐变色strokeWidth: Float = Stroke.HairlineWidth,cap: StrokeCap = StrokeCap.Butt,pathEffect: PathEffect? = null,alpha: Float = 1.0f,colorFilter: ColorFilter? = null,blendMode: BlendMode = DefaultBlendMode
)

使用

使用pointMode属性：

var pointMode by remember {mutableStateOf(PointMode.Points)
}
val scrollState = rememberScrollState()
val points = arrayListOf(Offset(100F, 100F),Offset(300F, 300F),Offset(500F, 500F),Offset(700F, 500F),Offset(900F, 900F),
)
var text by remember {mutableStateOf("PointMode.Points")
}
Column(modifier = Modifier.fillMaxSize()) {Row(modifier = Modifier.horizontalScroll(scrollState)) {Button(onClick = {pointMode = PointMode.Pointstext = "PointMode.Points"}) {Text("PointMode.Points")}Button(onClick = {pointMode = PointMode.Linestext = "PointMode.Lines"}) {Text("PointMode.Lines")}Button(onClick = {pointMode = PointMode.Polygontext = "PointMode.Polygon"}) {Text("PointMode.Polygon")}}Text(text)Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)) {drawPoints(points = points,pointMode = pointMode,color = Color.Red,strokeWidth = 15F)}
}

使用brush属性：

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawPoints(points = points,pointMode = PointMode.Polygon,cap = StrokeCap.Square,strokeWidth = 30F,brush = Brush.linearGradient(colors = arrayListOf(Color.Red, Color.Green, Color.Blue)))
}

上面的颜色是均匀分布的，也可以精确指定每段的颜色，如下：

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawPoints(points = points,pointMode = PointMode.Polygon,cap = StrokeCap.Square,strokeWidth = 30F,brush = Brush.linearGradient(0.0F to Color.Red, 0.2F to Color.Green, 0.8F to Color.Blue))
}

drawLine 绘制线

drawLine属性

// 方法一：
fun drawLine(color: Color, // 线的颜色start: Offset, // 开始坐标end: Offset, // 结束坐标strokeWidth: Float = Stroke.HairlineWidth, // 线的宽度cap: StrokeCap = Stroke.DefaultCap, // 末端处理pathEffect: PathEffect? = null, // 线的可选效果或图案alpha: Float = 1.0f, // 透明度colorFilter: ColorFilter? = null, // 颜色效果blendMode: BlendMode = DefaultBlendMode // 混合模式
)// 方法二：
fun drawLine(brush: Brush, // 渐变色start: Offset,end: Offset,strokeWidth: Float = Stroke.HairlineWidth,cap: StrokeCap = Stroke.DefaultCap,pathEffect: PathEffect? = null,alpha: Float = 1.0f,colorFilter: ColorFilter? = null,blendMode: BlendMode = DefaultBlendMode
)

使用

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawLine(color = Color.Red,start = Offset(100F, 100F),end = Offset(900F, 900F),strokeWidth = 30F,cap = StrokeCap.Round)
}

drawRect 绘制矩形

drawRect属性

fun drawRect(color: Color, // 颜色topLeft: Offset = Offset.Zero, // 顶点size: Size = this.size.offsetSize(topLeft), // 尺寸alpha: Float = 1.0f, // 透明度// Fill：填充；Stroke：边框；style: DrawStyle = Fill, // 样式colorFilter: ColorFilter? = null, // 颜色效果blendMode: BlendMode = DefaultBlendMode // 混合模式
)class Stroke(val width: Float = 0.0f, // 边的宽度val miter: Float = DefaultMiter, // 连接角度val cap: StrokeCap = StrokeCap.Butt, // 末端处理val join: StrokeJoin = StrokeJoin.Miter, // 边的连接处理val pathEffect: PathEffect? = null
) : DrawStyle()

使用

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawRect(color = Color.Red,topLeft = Offset(100F, 100F),size = Size(400F, 400F))
}

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawRect(color = Color.Red,topLeft = Offset(100F, 100F),size = Size(400F, 400F),style = Stroke(width = 30F, cap = StrokeCap.Round))
}

drawRoundRect 绘制圆角矩形

drawRoundRect属性

fun drawRoundRect(color: Color,topLeft: Offset = Offset.Zero,size: Size = this.size.offsetSize(topLeft),cornerRadius: CornerRadius = CornerRadius.Zero, // 圆角style: DrawStyle = Fill,alpha: Float = 1.0f,colorFilter: ColorFilter? = null,blendMode: BlendMode = DefaultBlendMode
)

使用

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawRoundRect(color = Color.Red,topLeft = Offset(100F, 100F),size = Size(400F, 600F),cornerRadius = CornerRadius(50F),style = Stroke(width = 30F))
}

drawCircle 绘制圆

drawCircle属性

fun drawCircle(color: Color, // 颜色radius: Float = size.minDimension / 2.0f, // 半径center: Offset = this.center, // 圆形坐标alpha: Float = 1.0f, // 透明度style: DrawStyle = Fill, // 样式colorFilter: ColorFilter? = null, // 颜色效果blendMode: BlendMode = DefaultBlendMode // 混合模式
)

使用

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawCircle(color = Color.Red,radius = 300F,center = center)
}

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawCircle(color = Color.Red,radius = 300F,center = center,style = Stroke(width = 30F))
}

drawOval 绘制椭圆

drawOval属性

fun drawOval(color: Color,topLeft: Offset = Offset.Zero,size: Size = this.size.offsetSize(topLeft),alpha: Float = 1.0f,style: DrawStyle = Fill,colorFilter: ColorFilter? = null,blendMode: BlendMode = DefaultBlendMode
)

使用

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawOval(color = Color.Red,topLeft = Offset(100F, 100F),size = Size(400F, 600F),style = Stroke(width = 30F))
}

drawArc 绘制圆弧

drawArc属性

fun drawArc(color: Color, // 颜色startAngle: Float, // 开始角度sweepAngle: Float, // 弧度useCenter: Boolean, // 是否使用中心topLeft: Offset = Offset.Zero, // 顶点size: Size = this.size.offsetSize(topLeft), // 尺寸alpha: Float = 1.0f, // 透明度style: DrawStyle = Fill, // 样式colorFilter: ColorFilter? = null, // 颜色效果blendMode: BlendMode = DefaultBlendMode // 混合模式
)

使用

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawArc(color = Color.Red,startAngle = 0F,sweepAngle = 270F,useCenter = true,topLeft = Offset(100F, 100F),size = Size(400F, 400F))
}

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawArc(color = Color.Red,startAngle = 0F,sweepAngle = 270F,useCenter = false,topLeft = Offset(100F, 100F),size = Size(400F, 400F))
}

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawArc(color = Color.Red,startAngle = 0F,sweepAngle = 270F,useCenter = false,topLeft = Offset(100F, 100F),size = Size(400F, 400F),style = Stroke(width = 5F))
}

drawImage 绘制图片

drawImage属性

// 方式一：
fun drawImage(image: ImageBitmap, // 图片topLeft: Offset = Offset.Zero, // 顶点alpha: Float = 1.0f, // 透明度style: DrawStyle = Fill, // 样式colorFilter: ColorFilter? = null, // 颜色效果blendMode: BlendMode = DefaultBlendMode // 混合模式
)// 方式二：
fun drawImage(image: ImageBitmap,srcOffset: IntOffset = IntOffset.Zero, // 设置原图片srcSize: IntSize = IntSize(image.width, image.height), // 设置原图片尺寸dstOffset: IntOffset = IntOffset.Zero, // 设置目标图片dstSize: IntSize = srcSize, // 设置目标图片尺寸alpha: Float = 1.0f,style: DrawStyle = Fill,colorFilter: ColorFilter? = null,blendMode: BlendMode = DefaultBlendMode,filterQuality: FilterQuality = DefaultFilterQuality
)

使用

val context = LocalContext.current
val bitmap = BitmapFactory.decodeResource(context.resources, R.drawable.a)
val image = bitmap.asImageBitmap()
Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawImage(image = image)
}

val context = LocalContext.current
val bitmap = BitmapFactory.decodeResource(context.resources, R.drawable.a)
val image = bitmap.asImageBitmap()
Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawImage(image = image,srcOffset = IntOffset(0, 0),srcSize = IntSize(100, 100),dstOffset = IntOffset(100, 100),dstSize = IntSize(400, 400))
}

drawPath 绘制路径

drawPath属性

fun drawPath(path: Path,color: Color,alpha: Float = 1.0f,style: DrawStyle = Fill,colorFilter: ColorFilter? = null,blendMode: BlendMode = DefaultBlendMode
)

使用

val path = Path()
path.moveTo(100F, 300F)
path.lineTo(100F, 700F)
path.lineTo(800F, 700F)
path.lineTo(900F, 300F)
path.lineTo(600F, 100F)
path.close()
Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawPath(path = path,color = Color.Red,style = Stroke(width = 10F))
}

val path = Path()
path.moveTo(100F, 300F)
path.lineTo(100F, 700F)
path.quadraticBezierTo(800F,700F,600F,100F)
path.cubicTo(700F,200F,800F,400F,100F,100F)
path.close()
Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawPath(path = path,color = Color.Red,style = Stroke(width = 10F))
}

混合模式

混合模式：

BlendMode类型说明：

使用：

Canvas(modifier = Modifier.size(360.dp).background(Color.LightGray)
) {drawCircle(color = Color.Yellow,radius = 170F,center = Offset(350F, 350F),blendMode = BlendMode.Clear)drawRect(color = Color.Red,topLeft = Offset(300F, 300F),size = Size(350F, 350F),blendMode = BlendMode.Clear)
}