On this weblog, I’ll clarify how we will implement this utilizing Compose Canvas API. I may also cowl the mathematics ideas concerned in calculating coordinates on a circle and drawing shapes and textual content round these coordinates. Lots of the formulation used right here have been inferred via trial and error, so understanding them will be difficult at first. Nevertheless, I’ll simplify the reasons with diagrams to make it simpler to know. I hope you loved studying this text.
TL;DR
overview
- Phrases
- Drawing seconds & minutes dials
- Drawing Hour Stickers
- Draw overlay minutes
- Phrases
- Seconds and Minute Dials: These are the rotating circles on the watch face. Each dials are equivalent, besides for his or her radii.
- Steps: The dial is split into 60 steps, There are two sorts of regular step and step 5.
- Step Labels: 5-step intervals are labeled with values like [00, 05, 10…]
- Hour Label: The central label represents the hour of the day in 24-hour format.
- Minute-second overlay: To spotlight the present minute and second, a rounded rectangle is positioned within the middle proper of the watch face.
2. Drawing Seconds & Minutes Dial
This part is once more divided into three subsections
- Understanding dialing
- drawing steps
- Label the steps
2.1 Study Dial
- Each the Seconds and Minutes dials have the identical variety of steps however differ in radius and revolutions per second.
- The Seconds dial rotates 6 levels per second, whereas the Minutes dial additionally rotates 6 levels per minute.
- Every dial consists of 60 regular steps and 12 steps of 5.
- The angle between two consecutive regular steps is 6 levels.
- The angle between two consecutive steps is 30 levels.
- The road top of the 5 steps is bigger than the peak of the traditional steps to make sure correct separation.
- 5-step label, indicating values corresponding to [00, 05, 10…]drawn with some padding named stepsLabelTopPadding.
2.2 Drawing steps
- To plot the steps, we want the beginning and finish offsets of every particular person step, which will be calculated utilizing the next formulation
x = r * cos(θ)
y = r * sin(θ)
- Nevertheless, the coordinate system of the circle is completely different from the coordinate system of the canvas, so we have to modify the above formulation to get the x, y coordinates on the canvas.
x = middle.x + r * cos(θ)
y = middle.y - r * sin(θ)
- Within the formulation, we require the angle in radians. we could have to multiply angleInDegrees by π/180. Thus, the modified formulation turns into:
x = middle.x + r * cos(angleInDegrees * (π / 180))
y = middle.y - r * sin(angleInDegrees * (π / 180))
- every step rotates at a sure diploma per second so we are going to add a “rotation” state within the above formulation this might be modified each second to rotate every step
x = middle.x + r * cos((angleInDegrees + rotation) * (π / 180))
y = middle.y - r * sin((angleInDegrees + rotation) * (π / 180))
2.3 Labeling the steps
- To drawText on canvas, we want the topLeft offset of the place the place we need to draw the textual content
- Whereas calculating this, we additionally want to think about the width and top of the label to correctly place the label in the course of the step.
Code snippet and output for drawing seconds and minutes dials
3. Draw hour markers
- To attract the overlay, we’ll use the lineTo and cubeTo path capabilities, which permit us to create rounded corners.
- When drawing rounded corners, we have to think about the width of the minute and second labels, in addition to the step dimension.
3. Drawing Minute-Second Overlay
- To attract the overlay, we’ll use the lineTo and cubeTo path capabilities, which permit us to create rounded corners.
- When drawing rounded corners, we have to think about the width of the minute and second labels, in addition to the step dimension.