版权声明
本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17657716.html
本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。前言
此篇博客讲解Canvas的使用
画线
正常的线条
效果图
代码
strokeWidth 是线条的宽度
color 为线条的颜色
@Preview
@Composable
fun Line() {
Canvas(
modifier = Modifier
.fillMaxSize()
) {
drawLine(strokeWidth = 10f, color = Color.Red, start = Offset(0f,size.height/2), end = Offset(size.width,size.height/2))
}
}渐变线条
效果图
代码
通过brush设置渐变颜色效果
@Preview
@Composable
fun Line() {
Canvas(
modifier = Modifier
.fillMaxSize()
) {
val brush = Brush.linearGradient(listOf(Color.Green,Color.Red), start = Offset(0f,size.height/2), end = Offset(size.width,size.height/2))
drawLine(strokeWidth = 10f, brush = brush, start = Offset(0f,size.height/2), end = Offset(size.width,size.height/2))
}
}线头形状
一共有3种StrokeCap.Butt、StrokeCap.Round、StrokeCap.Square，分别是平头、圆头、方头， StrokeCap.Butt与StrokeCap.Square效果接近，但是StrokeCap.Square会让线条更长一些。
效果图
代码
@Preview
@Composable
fun Line() {
Canvas(
modifier = Modifier
.fillMaxSize()
) {
/**
* StrokeCap.Butt
*/
drawLine(
strokeWidth = 30f,
color = Color.Red,
start = Offset(0f, center.y),
end = Offset(center.x, center.y),
cap = StrokeCap.Butt
)
/**
* StrokeCap.Round
*/
drawLine(
strokeWidth = 30f,
color = Color.Red,
start = Offset(0f, center.y + 100),
end = Offset(center.x, center.y + 100),
cap = StrokeCap.Round
)
/**
* StrokeCap.Square
*/
drawLine(
strokeWidth = 30f,
color = Color.Red,
start = Offset(0f, center.y + 200),
end = Offset(center.x, center.y + 200),
cap = StrokeCap.Square
)
}
}虚线
效果图
代码
@Preview
@Composable
fun Line() {
Canvas(
modifier = Modifier
.fillMaxSize()
) {
drawLine(
strokeWidth = 15f,
color = Color.Red,
start = Offset(0f, center.y),
end = Offset(size.width, center.y),
//floatArrayOf 第一个参数是每个线段的长度 第二个参数是空行间隔的长度
//phase这个参数是设置线头截取的长度
pathEffect = PathEffect.dashPathEffect(floatArrayOf(50f, 50f), phase = 5f)
)
}
}画圆
实心圆
效果图
代码
Canvas(modifier = Modifier.align(Alignment.Center).size(150.dp)) {
drawCircle(color = Color.Gray, radius = 50.dp.toPx())
}空心圆
效果图
代码
Canvas(
modifier = Modifier
.align(Alignment.Center)
.size(150.dp)
) {
drawCircle(
color = Color.Gray,
radius = 50.dp.toPx(),
style = Stroke(15.dp.toPx())
)
}画半圆
实心半圆
效果图
代码
Canvas(modifier = Modifier.align(Alignment.BottomCenter).size(150.dp)) {
drawArc(
color = Color.Gray,
startAngle = -180f,
sweepAngle = 180f,
useCenter = true,
)
}空心半圆
效果图
代码
Canvas(modifier = Modifier.align(Alignment.BottomCenter).size(150.dp)) {
drawArc(
color = Color.Gray,
startAngle = -180f,
sweepAngle = 180f,
useCenter = true,
style = Stroke(15.dp.toPx(), cap = StrokeCap.Round)
)
}中心不封口的空心半圆
效果图
代码
Canvas(modifier = Modifier.align(Alignment.BottomCenter).size(150.dp)) {
drawArc(
color = Color.Gray,
startAngle = -180f,
sweepAngle = 180f,
useCenter = false,//关键是这里设置为false
style = Stroke(15.dp.toPx(), cap = StrokeCap.Round)
)
}椭圆
实心椭圆
效果图
代码
Canvas(
modifier = Modifier
.align(Alignment.Center)
.size(150.dp)
) {
drawOval(
color = Color.Gray,
topLeft = Offset(100f,20f), //绘制图形的位置偏移量
size = Size(100.dp.toPx(),50.dp.toPx()), //大小
)
}空心椭圆
效果图
代码
Canvas(
modifier = Modifier
.align(Alignment.Center)
.size(150.dp)
) {
drawOval(
color = Color.Gray,
size = Size(150.dp.toPx(),100.dp.toPx()),
style = Stroke(15.dp.toPx())
)
}Path
二阶贝塞尔曲线
效果图
代码
@Preview(widthDp = 713, heightDp = 265, backgroundColor = 0xFFFFFFFF)
@Composable
fun quadraticBezierTo() {
Canvas(
modifier = Modifier
.padding(horizontal = 20.dp, vertical = 7.dp)
.width(713.dp)
.height(265.dp)
) {
val startX = 200f //起始位置X
val startY = 200f //起始位置Y
val controlX = 300f //控制点位置X
val controlY = 100f //控制点位置Y
val endX = 400f //结束位置X
val endY = 200f //结束位置Y
val path = Path()
//移动起始位置
path.moveTo(startX,startY)
//绘制贝塞尔曲线
path.quadraticBezierTo(controlX, controlY , endX, endY)
drawPath(path = path, color = Color.Green)
//绘制辅助点，帮助理解
drawCircle(color = Color.White, center = Offset(startX,startY), radius = 5f) //白色是起始点
drawCircle(color = Color.Red, center = Offset(controlX,controlY), radius = 5f) //红色是控制点
drawCircle(color = Color.Yellow, center = Offset(endX,endY), radius = 5f) //黄色是结束点
}
}三阶贝塞尔曲线
效果图
代码
@Preview(widthDp = 713, heightDp = 265, backgroundColor = 0xFFFFFFFF)
@Composable
fun cubicTo() {
Canvas(
modifier = Modifier
.padding(horizontal = 20.dp, vertical = 7.dp)
.width(713.dp)
.height(265.dp)
) {
val startX = 200f //起始位置X
val startY = 200f //起始位置Y
val control1X = 300f //控制点1位置X
val control1Y = 100f //控制点1位置Y
val control2X = 400f //控制点2位置X
val control2Y = 100f //控制2点位置Y
val endX = 500f //结束位置X
val endY = 200f //结束位置Y
val path = Path()
//移动起始位置
path.moveTo(startX, startY)
//绘制贝塞尔曲线
path.cubicTo(control1X, control1Y, control2X, control2Y, endX, endY)
drawPath(path = path, color = Color.Green)
//绘制辅助点，帮助理解
drawCircle(color = Color.White, center = Offset(startX, startY), radius = 5f) //白色是起始点
drawCircle(color = Color.Red, center = Offset(control1X, control1Y), radius = 5f) //红色是控制点
drawCircle(color = Color.Red, center = Offset(control2X, control2Y), radius = 5f) //红色是控制点
drawCircle(color = Color.Yellow, center = Offset(endX, endY), radius = 5f) //黄色是结束点
}
}drawIntoCanvas
https://blog.csdn.net/m0_37508087/article/details/120243810 参考
https://zhuanlan.zhihu.com/p/459427529?utm_id=0
https://www.6hu.cc/archives/45182.html 参考
end
标签：Compose,center,Color,Jetpack,color,Offset,Android,dp,size From： https://www.cnblogs.com/guanxinjing/p/17657716.html