Core Graphics Tutorial: Arcs and Paths |

In this tutorial, you’ll learn how to draw arcs and paths. In particular, you’ll enhance each footer of a grouped table view by adding a neat arc on the bottom, a linear gradient and a shadow that fits the curve of the arc. All of that by using the power of Core Graphics!

This is a companion discussion topic for the original entry at

Would you give some picture to show apply EO rule in this Core Graphics Tutorial. I try to use EO rule to get the filled area, but failed. Please help me. Thank you, this is an awesome tutorial

“So, by calling the EO variant, you’re telling Core Graphics that, even though you’ve added two paths to the context, it should treat it as one path following the EO rule. So, the outside part, which is the entire footer rect, should be filled, but the inner part, which is the arc path, should not. You tell Core Graphics to clip to that path and only draw in the outside area.”

@lorenzoboaro Can you please help with this when you get a chance? Thank you - much appreciated! :]

Although I get the expected result, some points in this article made me confused.
// 3
center: arcCenter,
radius: arcRadius,
startAngle: startAngle,
endAngle: endAngle,
clockwise: false)
path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
path.addLine(to: CGPoint(x: rect.minY, y: rect.maxY))

From the calculation progress, I thought we should be clockwise for the startAngle and endAngle relative position, but it’s false. Also, I don’t quite understand the addLine progress. Especially the last CGPoint(x: rect.minY, y: rect.maxY).

By the way, the EO part is abstract, hope you could give a schematic diagram. Thanks.

@lorenzoboaro @shogunkaramazov

@lorenzoboaro Can you please help with this when you get a chance? Thank you - much appreciated! :]

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!