14

Below is from the official Apple document:

This method creates an open subpath. The created arc lies on the perimeter of the specified circle. When drawn in the default coordinate system, the start and end angles are based on the unit circle shown in Figure 1. For example, specifying a start angle of 0 radians, an end angle of π radians, and setting the clockwise parameter to true draws the bottom half of the circle. However, specifying the same start and end angles but setting the clockwise parameter set to false draws the top half of the circle.

But I found that the result seemed is just opposite. Below is my code

var body: some View {
    Path { path in
        path.addArc(center: CGPoint(x: 200, y: 370), radius: 50, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 180.0), clockwise: true)
        path.closeSubpath()
    }
}

I set the clockwise parameter to true but the result is the top half of the circle, not the bottom half

enter image description here

Did I understand wrong about Apple's document? My Xcode Version is 11.0 beta 4 (11M374r)

echo
  • 1,244
  • 1
  • 16
  • 40

1 Answers1

33

The meaning of the clockwise parameter exists in a quantum superposition that collapses when you examine the result. Unfortunately, it always collapses to the opposite meaning from what you wanted.

More seriously, there are some flaws in Apple's documentation:

  • The “default coordinate system” really means the standard Cartesian coordinate system, in which the y axis increases toward the top of the canvas. But both SwiftUI and UIKit always set up the coordinate system with the y axis “flipped” so that y values increase toward the bottom of the canvas.

  • clockwise is accurate only in the standard Cartesian coordinate system. What it really means is “the direction of rotation that goes from the positive y axis toward the positive x axis”. So when you're working in a flipped coordinate system, clockwise means the opposite direction!

The diagrams below may clarify what I mean. The top diagram shows a standard Cartesian coordinate system, where the direction of rotation from the positive y axis to the positive x axis is indeed clockwise. The bottom diagram shows a flipped coordinate system, which is what SwiftUI and UIKit provide, and where the direction of rotation from the positive y axis to the positive x axis is actually counterclockwise, but which the APIs call “clockwise”.

diagram of a standard coordinate system and a flipped coordinate system, with arrows labeled “clockwise” drawn correctly for each

rob mayoff
  • 375,296
  • 67
  • 796
  • 848
  • 1
    I have some doubts though... if you read the official documentation you should get the bottom half of the circle... https://developer.apple.com/documentation/uikit/uibezierpath/1624358-init#1965853 – Salva Apr 04 '20 at 10:55
  • 1
    documentation for `SwiftUI` `Path` says about flipped coordinate system exactly: https://developer.apple.com/documentation/coregraphics/cgcontext/2427129-addarc – Aspid May 15 '20 at 11:57
  • 1
    This made me laugh. The API should work in the way one expects. If on iOS the coordinate system is flipped, then the meaning of the flag should be flipped to maintain coherence. Just one more quirk to remember when drawing! – Tomm P Dec 04 '20 at 08:10
  • 3
    This may be the greatest answer I've ever read on stack – Robert Schmid May 12 '21 at 13:17
  • 3
    But your answer does not make any meaning to me, we are not talking about axes, we are talking about rotation, rotation of clock wise or counterclockwise, apple used the word of clockwise, I do not hang my clock upside down then figuring which way is clockwise or counterclockwise, I simply say this is a mistake from apple, unless they must add an info about defining clock or clockwise, like clock is a clock that hanged upside down in tim cook office or something like that at least. – ios coder Feb 09 '22 at 19:16
  • You're right. I should have explained in more detail. I have updated my answer. However, Apple has been using this meaning of “clockwise” for many more years than Tim Cook has been CEO. – rob mayoff Feb 09 '22 at 19:53
  • @salva you are mentioning `UIBezierPath` which does refer to 'clockwise' correctly because `UIKit` establishes the inverted coordinates (i.e. top-left-is-zero) as the norm. However, SwiftUI's `Path` properly respects the coordinate system. I found this out because I just converted some SwiftUI code that internally used a UIBezierPath and swapped it for the Path. Asides from changing how I represented the angles themselves, I had to flip every 'clockwise' parameter to get it to render correctly. – Mark A. Donohoe Nov 03 '22 at 04:52
  • Great answer! I thought SwiftUI is playing a bad joke on me – boweidmann Jun 01 '23 at 11:01