First use drawArc function to draw the sector

The moon is made up of circles and small circles

Set the large central Angle to 120° 360-120 = 240

   startAngle = 40F,
   sweepAngle = 240f.Copy the code

Offset 40° to enhance the picture sense sweepAngle = 240f,

Gets the canvas width and height

   val canvasWidth = size.width  // Width of canvas
   val canvasHeight = size.height  // Canvas height
Copy the code

So the width of the canvas divided by 2 is the radius of the larger circle and then we find the diameter of the smaller circle, and then we set the size of the circle by the diameter, and then we set the offset of the smaller circle

Find the diameter of the small circle

Now that we know the radius and the Angle of the larger circle, how can we figure out the diameter of the smaller circle? Think about it

This problem is equivalent to finding the hypotenuse of an isosceles triangle given the waist length (equal to the radius R of the great circle) and the degree n of the vertex Angle (central Angle). This translates to solving right triangles. The waist (R), right Angle (h) and base of an isosceles triangle (that is, the vertical distance between the two ends of the sector and the center of the circle), the Angle between the waist and the height of the base is equal to half of the central Angle 60°, know the hypotenuse (R), find the opposite side of this Angle H, use sine OK.

  val shadowWidth = outerWidth * kotlin.math.sqrt(3.0) /2
 val shadowHeight =outerHeight * kotlin.math.sqrt(3.0) /2
Copy the code
kotlin.math.sqrt(3.0) = = square root3
Copy the code

Sine of 60 degrees equals square root of 3 over 2 to get the diameter of the circle

And then the offset of the little circle

The cosine tells us that the vertical distance between the two ends of the sector and the center of the circle is equal to R over 2 which is 1/4 of the diameter of the larger circle plus the width of the Stroke

(strokeWidth*2)+outerWidth/4
Copy the code

The complete code

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

    Canvas(modifier) {

        val canvasWidth = size.width  // Width of canvas
        val canvasHeight = size.height  // Canvas height

        val strokeWidth = size.width / 35
        val strokeHeight = size.height / 35

        // draw circle
        / / cylindrical wide
        val outerWidth =canvasWidth-strokeWidth
        val outerHeight =canvasHeight-strokeHeight
        val shadowWidth = outerWidth * kotlin.math.sqrt(3.0) /2
        val shadowHeight =outerHeight * kotlin.math.sqrt(3.0) /2
        drawArc(
            color = Color.Black,
            startAngle = 40F,
            sweepAngle = 240f,
            useCenter = false,
            style = Stroke(
                width = strokeWidth,
                cap = StrokeCap.Round),
            topLeft = Offset(strokeWidth/2, strokeHeight/2),
            size = Size(outerWidth, outerHeight),
            )
        drawArc(
            color = Color.Black,
            startAngle = 70F,
            sweepAngle = 180f,
            useCenter = false,
            style = Stroke(width = strokeWidth,
                cap = StrokeCap.Round),
            topLeft = Offset((strokeWidth*2)+outerWidth/4.0F),
            size = Size(shadowWidth.toFloat(),shadowHeight.toFloat()),
            )
   }
}

Copy the code