Jetpack Compose自定义绘测 画太阳
要调用Canvas()的绘测方法
`drawCircle方法：绘制圆形
fun drawCircle(
color: Color,
radius: Float 圆的半径,
center: Offset = 要绘制圆的中心坐标,
/*@FloatRange(from = 0.0, to = 1.0)*/
alpha: Float = 1.0f,
style: DrawStyle = Fill,
colorFilter: ColorFilter? = 当绘制到目标时应用于颜色的ColorFilter,
blendMode: BlendMode = 要应用于笔刷的混合算法
)
圆的半径 = size.width / 6
可以理解为画笔的宽度 = size.width / 20
画太阳的圆弧
drawCircle(
color = Color.Black,
radius = radius + stroke / 2,
style = Stroke(width = stroke)
)
画太阳的圆心
//圆心
drawCircle(
color = Color.White,
radius = radius,
style = Fill,
)
圆弧周围的8条线段
再接着圆弧周围的8条线段
`drawLine方法：绘制线段
fun drawLine(
color: Color,
start: 要绘制的直线的第一点,
end: 要绘制的直线的第二点,
strokeWidth: Float = 要应用于线条的笔划宽度,
cap: StrokeCap = 应用于线段末端的处理：比如圆角,
pathEffect: PathEffect? = 应用于线条的可选效果或图案,
/*FloatRange(from = 0.0, to = 1.0)*/
alpha: Float =不透明度应用于0.0f到1.0f的颜色，分别表示完全透明到完全不透明,
colorFilter: ColorFilter? = 当绘制到目标时应用的颜色,
blendMode: BlendMode = 应用于颜色的混合算法
)
我们可以用forEach循环8次，然后就是计算好绘制的位置和角度就搞定了
角度的计算
Math.toRadians：用来以度为单位的角度转换为用弧度表示的近似相等的角度。
参数x ：一个角度，以度为单位
返回以弧度为单位的角度x的测量值。如果参数为NaN，则此方法将返回NaN。
如果参数为零，则此方法将返回零，且符号与参数相同。
如果参数为无穷大，则此方法将返回与参数具有相同符号的无穷大。
定义线段长度 = radius * 0.2f
线段的偏移量 = radius * 1.8f
Math.toRadians(i * 45.0) 45度一个就可以绘制8个
kotlin提供的
cos：计算以弧度为单位的角度的余弦。
sin：正弦
用cos计算出X轴的偏移量
sin计算出Y轴的偏移量
最后调用drawLine就完成了
完整代码
@Composable
fun Sun(modifier: Modifier = Modifier) {
Canvas(modifier) {
val radius = size.width / 6
val stroke = size.width / 20
//圆弧
drawCircle(
color = Color.Black,
radius = radius + stroke / 2,
style = Stroke(width = stroke)
)
//圆心
drawCircle(
color = Color.White,
radius = radius,
style = Fill,
)
// draw line
val lineLength = radius * 0.2f
val lineOffset = radius * 1.8f
(0..7).forEach { i ->
val radians = Math.toRadians(i * 45.0)
val offsetX = lineOffset * cos(radians).toFloat()
val offsetY = lineOffset * sin(radians).toFloat()
val x1 = size.width / 2 + offsetX
val x2 = x1 + lineLength * cos(radians).toFloat()
val y1 = size.height / 2 + offsetY
val y2 = y1 + lineLength * sin(radians).toFloat()
drawLine(
color = Color.Black,
start = Offset(x1, y1),
end = Offset(x2, y2),
strokeWidth = stroke,
cap = StrokeCap.Round
)
}
}
}
效果图
