드로잉 및 애니메이션 - 경로 및 모양 그리기

사용자는 목록에 있는 랜드마크를 방문할 때마다 배지를 받습니다. 물론 사용자가 배지를 받으려면 배지를 만들어야 합니다. 이 자습서에서는 경로와 모양을 결합한 다음 위치를 나타내는 다른 모양으로 오버레이하여 배지를 만드는 과정을 안내합니다.

다양한 종류의 랜드마크에 대해 여러 개의 배지를 만들려면 중첩된 기호를 실험하거나 반복 정도를 변경하거나 다양한 각도와 축척을 변경해 보십시오.

단계에 따라 이 프로젝트를 빌드하거나 완성된 프로젝트를 다운로드하여 직접 탐색하세요.

DrawingPathsAndShapes.zip

5.65MB

예상 시간 : 25분

Xcode version : 13.1 이상

 

 

 

섹션 1

배지 보기에 대한 도면 데이터 작성

배지를 만들려면 먼저 배지 배경의 육각형 모양을 그리는 데 사용할 수 있는 데이터를 정의해야 합니다.

 

 

 

1 단계

 

탐색 창에서 보기 그룹을 선택한 상태에서 파일 > 새로 만들기 > 파일을 선택하고 iOS 템플릿 시트에서 Swift 파일을 선택한 후 다음을 클릭합니다.

 

2 단계

 

새 파일의 이름을 HexagonParameters.swift

이 구조를 사용하여 육각형의 모양을 정의합니다.

 

3 단계

 

새 파일 안에 라는 구조를 만듭니다 .HexagonParameters

 

4 단계

 

Segment육각형의 한 면을 나타내는 세 점을 유지 하는 구조를 정의합니다 . 사용할 수 있도록 가져옵니다 .CoreGraphicsCGPoint

각 면은 이전이 끝나는 지점에서 시작하여 첫 번째 점까지 직선으로 이동한 다음 모서리의 베지어 곡선을 따라 두 번째 점으로 이동합니다. 세 번째 점은 곡선의 모양을 제어합니다.\

5 단계

 

세그먼트를 저장할 배열을 만듭니다.

 

6 단계

 

육각형의 각 측면에 대해 하나씩 6개 세그먼트에 대한 데이터를 추가합니다.

값은 왼쪽 상단에 원점이 있는 단위 정사각형의 분수로 저장되며 양수 x는 오른쪽으로, 양수 y는 아래로 저장됩니다. 나중에 이 분수를 사용하여 주어진 크기의 육각형의 실제 점을 찾습니다.

 

7 단계

육각형의 모양을 조정할 수 있는 조정 값을 추가합니다.

 

 

 

 

섹션 2

배지 배경 그리기

SwiftUI의 그래픽 API를 사용하여 맞춤형 배지 모양을 그립니다.

 

 

 

1 단계

 

File > New > File을 사용하여 또 다른 새 파일을 생성합니다. 이번에는 iOS 템플릿 시트에서 SwiftUI View를 선택합니다. 다음을 클릭하고 파일 이름을 지정합니다 .BadgeBackground.swift

 

2 단계

 

BadgeBackground.swift 에서 배지에 모양을 추가 하고 수정자를 적용하여 모양을 보기로 바꿉니다. Pathfill()

경로를 사용하여 선, 곡선 및 기타 그리기 기본 요소를 결합하여 배지의 육각형 배경과 같은 더 복잡한 모양을 형성합니다.

 

3 단계

크기가 100 x 100픽셀인 컨테이너를 가정하고 경로에 시작점을 추가합니다.

이 move(to:)메서드는 가상의 펜이나 연필이 그리기 시작을 기다리는 영역 위로 마우스를 가져가는 것처럼 모양의 경계 내에서 그리기 커서를 이동합니다.

 

4 단계

대략적인 육각형 모양을 만들기 위해 모양 데이터의 각 점에 대한 선을 그립니다.

이 메서드는 단일 점을 가져와서 그립니다. 이전 지점에서 라인을 시작하고 새로운 지점으로 계속하기 위한 연속적인 호출 .addLine(to:)   addLine(to:)

 

 

육각형이 조금 이상해 보이더라도 걱정하지 마십시오. 모양의 모서리에 있는 각 세그먼트의 곡선 부분을 무시하기 때문입니다. 당신은 다음에 그것을 설명합니다.

 

 

5 단계

 

이 방법을 사용 하여 배지 모서리의 베지어 곡선을 그립니다.  addQuadCurve(to:control:)

 

 

6 단계

 

배지가 값( )을 하드 코딩하는 대신 크기를 정의하는 포함하는 뷰의 크기를 사용할 수 있도록 경로를 래핑합니다 .GeometryReader100

지오메트리의 2차원 중 가장 작은 것을 사용하면 포함하는 뷰가 정사각형이 아닐 때 배지의 종횡비가 유지됩니다.

 

7 단계

 

xScalexOffset 를 사용하여 x축에서 모양의 크기를 조정 한 다음 를 추가 하여 해당 형상 내에서 모양을 가운데에 맞춥니다.

 

8 단계

 

단색 검정색 배경을 디자인에 맞게 그라데이션으로 교체합니다.

 

9 단계

 

수정자를 그라데이션 채우기에 적용합니다 .aspectRatio(_:contentMode:)

1:1 종횡비를 유지함으로써 배지는 조상 보기가 정사각형이 아니더라도 보기의 중심에서 위치를 유지합니다.

 

 

 

섹션 3

배지 기호 그리기

 

 Landmark 배지의 중앙에는 Landmark 앱 아이콘에 나타나는 산을 기반으로 하는 맞춤형 휘장이 있습니다.

산 기호는 두 가지 모양으로 구성되어 있습니다. 하나는 정상에 있는 눈 덮인 곳을 나타내고 다른 하나는 접근로에 있는 초목을 나타냅니다. 작은 간격으로 분리된 두 개의 부분적으로 삼각형 모양을 사용하여 그릴 것입니다.

 

 

 

먼저 앱에 아이콘을 지정하여 배지 모양을 설정합니다.

 

 

 

1 단계

프로젝트의 자산 카탈로그에서 빈 항목을 삭제한 다음 다운로드한 프로젝트 폴더에서 자산 카탈로그로 폴더 를 드래그합니다 .AppIconAppIcon.appiconsetResources

Xcode는 폴더를 앱 아이콘의 모든 크기 변형이 포함된 것으로 인식하고 카탈로그에 해당 항목을 생성합니다.

 

다음으로 일치하는 배지 기호를 만듭니다.

 

2 단계

배지 디자인에서 회전된 패턴으로 스탬프 처리된 산 모양에 대한 새로운 사용자 정의 보기를 만듭니다 .BadgeSymbol

 

3단계

경로 API를 사용하여 기호의 상단 부분을 그립니다.

실험

간격 , 및 상수 와 관련된 숫자 승수를 조정하여 전체 모양에 미치는 영향을 확인합니다.topWidthtopHeight

 

4단계

기호의 아래쪽 부분을 그립니다.

수정자를 사용 move(to:)하여 동일한 경로에 있는 여러 모양 사이에 간격을 삽입합니다.

 

5단계

디자인의 보라색으로 기호를 채웁니다.

 

6단계

회전된 기호의 개념을 캡슐화 하는 새 보기를 만듭니다 .RotatedBadgeSymbol

실험

미리보기에서 각도를 조정하여 회전 효과를 테스트합니다.

 

 

 

섹션 4

배지 전경과 배경 결합

배지 디자인은 배지 배경 위에서 산 모양을 여러 번 회전하고 반복해야 합니다.

새로운 회전 유형을 정의하고 뷰를 활용하여 산 모양의 여러 복사본에 동일한 조정을 적용합니다.ForEach

 

 

1 단계

Badge 라는 새 SwiftUI 보기를 만듭니다.

 

2 단계

BadgeBackgroundBadge 의 본문에 배치 합니다 .

 

3단계

ZStack 에 배치하여 배지 배경 위에 배지 기호를 놓습니다.

 

지금 보이는 것처럼 배지 기호가 의도한 디자인과 배경의 상대적 크기에 비해 너무 큽니다.

 

4단계

주변 지오메트리를 읽고 기호 크기를 조정하여 배지 기호의 크기를 수정합니다.

 

5단계

배지 기호의 복사본을 회전하고 표시 하는 보기를 추가합니다 .ForEach

전체 360° 회전이 8개의 세그먼트로 분할되어 산 기호를 반복하여 태양과 같은 패턴을 만듭니다.

 

6단계

프로젝트를 체계적으로 유지하려면 다음 자습서로 이동하기 전에 이 자습서에서 추가한 모든 새 파일을 배지 그룹에 수집합니다.

 

https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes