SwiftUI, 좌표공간 각도방향

안녕하세요 

 

SwiftUI 에서 Path Shape 을 이용해서 곡선을 추가해야 할 때가 종종 있는데요.

 

path.addArc(			           
        center: 
	startAngle: 
        endAngle: 
        clockwise: 
            )
            

 

저기서 clockwise 를 true 로 하면 시계방향, false 로 하면 반시계방향으로 그린다는 것을 쉽게 추측할 수 있습니다.

 

SwiftUI 의 좌표공간 방향은 익숙한 데카르트 공간을 x 축 대칭하면 되는데요.

간단하게, 아래로 내려갈 수록 y 값이 증가한다는 의미입니다.

 

그런데 저는 평소 좌표공간에 익숙해져있어서 각도 방향이 계속 헛갈리더라구요 ㅜ

까먹을 때마다 참고하려고 정리를 해놓으려고 합니다.

 

먼저 우리에게 익숙한 좌표공간과 각도 방향을 살펴볼게요.

 

 

반시계방향으로 각도가 정의되는게 자연스럽죠. 

그래서 일반적인 좌표공간에서 시계방향으로 0 도에서 90 도 까지 곡선을 그리라고 하면,

다음과 같이 그릴 수 있습니다.

 

 

이제 SwiftUI 좌표공간 방향과 각도 방향을 볼게요.

 

 

화살표 방향은 반시계 방향을 나타냅니다. 

SwiftUI 의 좌표공간에서는 일반 좌표계 기준으로 반시계 방향이 시계방향인 것을 알 수 있습니다.

 

따라서 시계방향으로 0 도에서 90도까지 곡선을 그리면 다음과 같습니다.

 

 

글씨를 잘 쓰는건 어려운 일인 것 같아요 😅

 

실제 코드로도 한번 그려보겠습니다. 

 

struct Arc: View {
    var body: some View {
        VStack {            
            Rectangle()
                .fill(Color.clear)
                .frame(width: 100, height: 100)
                .background(GeometryReader{ proxy in                    
                    let w = proxy.size.width
                    let h = proxy.size.height
                    
                    Path{ path in                        
                        path.move(to: CGPoint(x: w, y: h))
                        path.addArc(
                        	center: CGPoint(x: w / 2, y: h), 
                        	radius: w / 2, 
                            	startAngle: .degrees(0), 
                            	endAngle: .degrees(90), 
                            	clockwise: true
                            )                        
                    }
                    .stroke(lineWidth: 2)
                })                
        }                
    }
}

코드 결과

 

시계방향으로 0 도 부터 90 도까지 곡선을 그려봤습니다.

손으로 그린것과 동일한 결과가 나오는 것을 확인할 수 있습니다.