[SwiftUI-기초] path

그림을 그리는데 기초가 되는 선을 만들어 봅시다. 

• Path 는 Color, gradients, shapes 와 마찬가지로 View 
• SwiftUI 에서 Path 는 클로저로 선언
• Path 자체에도 shape(squares, circles, arcs, lines) 같은 것을 만드는 메서드가 있음
• 기본 원리는 "기준점"에서 path 를 추가하는 원리

Path { path in
    path.move(to: CGPoint(x: 200, y: 100))
    path.addLine(to: CGPoint(x: 100, y: 300))
    path.addLine(to: CGPoint(x: 300, y: 300))
    path.addLine(to: CGPoint(x: 200, y: 100))
}

• path.move: 기준점을 선언
• path.addLine() : 처음 선은 기준점을 기준으로 CGPoint 좌표로 감
• 위의 코드는 총 3개의 선이 추가됨
• 기본적으로 색이 실된 채로 나옴

관련 함수 - .fill, .stroke

fill - 내부 색칠	stroke - 테두리 색칠

Path { path in

}
.fill(.blue)


Path { path in

}
.stroke(.red, lineWidth: 10)

Stroke 문제 해결법 - 1

• stroke 를 보면 아래 코너는 마감이 잘되었는데 탑코너는 마감이 안된것이 보임
• 앞 선과 뒤의 선을 연결하는 로직이기 때문
• 맨 마지막 탑 코너는 더 이상 진행할 선이 없기 때문에 뚝 끊겨 보임
• path.closeSubpath(): 로 해결 가능

Path { path in
    path.move(to: CGPoint(x: 200, y: 100))
    path.addLine(to: CGPoint(x: 100, y: 300))
    path.addLine(to: CGPoint(x: 300, y: 300))
    path.addLine(to: CGPoint(x: 200, y: 100))
    path.closeSubpath()
}
.stroke(.red, lineWidth: 10)

stroke 문제 해결법 - 2 

• strokeStyle 을 이용
• lineCap: 선의 끝을 어떤식으로 마무리 할지 결정
• lineJoin: 다음 직선과 어떤식으로 연결할지 결정

.stroke(.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))

결론

• 선을 그리려면 Path 를 이용
• Path 안에 다양한 함수가 있음
• 고정 좌표계의 한계가 존재 -> Shape 로 보완