Ray Wenderlich Store | RWDevCon 2018 Vault Video Bundle

🎓 Courses & Articles
1
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5156-rwdevcon-2018-vault/lessons/8
2

My question is about RWDevCon 2018 Vault · The Art of the Chart especially in Pies.
Why is the radius should always be half the lineWidth.

What I know is, the radius starts from the centre of the circle all the way to the edge of the circle, which makes perfect sense for me it to be let radius = bounds.height * 0.5, but it’s not!

I see that the lineWidth is 0.5 of the bounds.height, but I can NOT understand the difference between both.

3

Hello! The line being drawn is halfway between the center of the pie and the edge, making it a circle with a radius which is half the radius of the pie itself.

The line is then drawn very fat, so fat that on the inner edge it reaches all the way to the center and on the outer edge it goes all the way to the edge of the pie. The line thickness required to do this is the radius of the pie itself.

There are diagrams attached to the playgrounds which may help. Or try changing the radius and line thickness and see what it looks like :grin:

4

Thank for replying back :smile:

What I am aware of is that lineWidth means from the centre of the pie up to the edge of the pie.

So in the diagram attached to the playground shows the arc, we use lineWidth to represent it.

When I played with values, I figured this out:

1- If the radius == 0.5 * lineWidth, it will draw a circle (the bottom lightGray one) that is the half the outer one.
31%20PM

2- When the radius == lineWidth
Here, it breaks what I am aware of, it didn’t start from the centre, it started from 0.125 of the bounds.height (the azure coloured arrow, which I don’t know what it represents).
42%20PM

Please, feel free to draw on the attached figures to make it cleaner.

Note: I changed the implementation so each slice starts from the end of the previous one.

5

Ahhh, I got it, no need to explain anymore.

Here’s what I figured out:

  • radius has nothing to do with lineWidth.
  • radius is related to the UIBezierPath object, and lineWidth is related to the CAShapeLayer object.
  • lineWidth is centred on the radius of the CAShapeLayer, not inside it.
  • If lineWidth drawing rule is to be drawn inner the CAShapeLayer, we would make the radius == lineWidth, but since half in, half out, we need to to radius == 0.5 * lineWidth.

Thank you so much :+1:

6

Yep, you’ve got it! Well done!