“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

To draw a circle, call the Canvas() drawing method ‘drawCircle’

fun drawCircle(
    color: Color,
    radius: FloatThe radius of the circle, center:Offset= To plot the center coordinates of the circle,/* @floatrange (from = 0.0, to = 1.0)*/
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = ColorFilter applied to the color when drawing to the target, blendMode:BlendMode= Hybrid algorithm to be applied to brushes)

Copy the code

The radius of the circle = size.width / 6 can be interpreted as the brush width = size.width / 20

Draw the arc of the sun

drawCircle(
    color = Color.Black,
    radius = radius + stroke / 2,
    style = Stroke(width = stroke)

)
Copy the code

Draw the center of the sun

DrawCircle (color = color. White, radius = radius, style = Fill,)Copy the code

Eight line segments around the arc

Then, 8 line segments around the arc ‘drawLine method: drawLine segments

Fun drawLine(color: color, start: first point of the line to be drawn, end: second point of the line to be drawn, strokeWidth: Float = strokeWidth to be applied to the line, cap: StrokeCap = applied to the end of the line segment: for example, rounded corners, pathEffect: pathEffect? = Applied to optional effects or patterns of lines, /*FloatRange(from = 0.0, to = 1.0)*/ alpha: Float = Opacity Applied to colors from 0.0f to 1.0f, fully transparent to fully opaque, colorFilter: ColorFilter? = color applied when drawing to target, blendMode: blendMode = blend algorithm applied to color)Copy the code

We can loop through forEach 8 times and then calculate the position and Angle of the drawing

Calculation of Angle

Math.toradians: Convert angles in degrees to approximately equal angles in radians. Argument x: An Angle that returns the measure of Angle X in radians, measured in degrees.

If the argument is NaN, this method returns NaN.

If the argument is zero, this method returns zero with the same sign as the argument.

If the argument is infinite, this method returns infinity with the same sign as the argument.

Define line segment length = RADIUS * 0.2F Offset of line segment = RADIUS * 1.8F

Math.toradians (I * 45.0) 45 degrees one can draw 8

Kotlin’s cosine: Calculate the cosine of an Angle in radians. Sin: sine

You can use cosine to figure out the offset of the X axis and sine to figure out the offset of the Y axis

Finally, call drawLine and you’re done

The complete code

@Composable
fun Sun(modifier: Modifier = Modifier) {

    Canvas(modifier) {

        val radius = size.width / 6
        val stroke = size.width / 20

        / / arc
        drawCircle(
            color = Color.Black,
            radius = radius + stroke / 2,
            style = Stroke(width = stroke)

        )
        / / circle
        drawCircle(
            color = Color.White,
            radius = radius,
            style = Fill,
        )

        // draw line

        val lineLength = radius * 0.2 f
        val lineOffset = radius * 1.8 f
        (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
            )
        }
    }
}
Copy the code

rendering