版權聲明
本文來自博客園,作者:觀心靜 ,轉載請註明原文鏈接: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