Jetpack Compose自定义绘测 画太阳

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

要调用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
            )
        }
    }
}
复制代码

效果图