SwiftUI 튜토리얼 [챕터2-그리기1-섹션1: 뱃지뷰 데이터 그리기]

챕터 2-그리기와 애니메이션

그리기 1-패스와 모양 그리기

사용자는 리스트에 있는 랜드마크를 방문할 때마다 배지를 받아요.

당연히, 유저가 뱃지를 받으려면, 당신이 배지를 만들어야 해요.

이 튜터리얼에서는 패스(path)와 모양을 조합해서 배지를 만드는 작업을 할 거예요.

지역을 나타 낼 수 있는 모양을 겹쳐서 만들어 볼 수 있어요.

 

여러 랜드마크에 여러 개의 배지를 만들고 싶다면, 겹친 심벌(overlaid symbol)로 실험을 해보고, 여러 번 반복해서 다양하게 하고, 아니면 각도와 크기를 바꾸어 보세요.

 

이 프로젝트의 단계를 따라오거나, 아니면, 만들어진 프로젝트를 다운로드해 주세요.

아래 링크 페이지에서 다운로드 가능해요~

 

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

Drawing Paths and Shapes | Apple Developer Documentation

---

섹션 1

배지 뷰 만들기 데이터 만들기

배지를 만들려면, 배지의 배경으로 육각형 모양을 그리기를 사용한다고 데이터를 정의 내려야 해요.

 

---

 

스텝 1

내비게이션 패널의 View 그룹선택하고, File=> New=> File,

Swift File 선택하고, Next를 클릭하세요.

 

---

스텝 2

파일 이름을 HexagonParameters.swift로 정하세요

-당신은 육각형의 모양을 정의하기 위해 이 스트럭쳐(structure;구조)를 사용할 거예요.

 

---

 

스텝 3

새로운 파일 안에, HexagonParameters라고 불리는 스트럭쳐를 만드세요.

 

---

스텝 4

육각형의 한쪽면을 나타낼 세 개의 점으로 잡기 위한 세그먼트(Segment; 한쪽, 한 조각)를 정의 내리세요;

import CoreGraphics로 선언을 하면, 당신은 CGPoint를 사용할 수 있어요.

-앞의 것이 끝나는 곳에서 각각면이 시작하고, 처음 점으로 향하는 직선 안에서 이동시키고, 베이저 커브(Bézier curve )를 넘어서 코너에서 두 번째 점으로 이동시키세요. 세 번째 점이 곡선의 움직임을 조종할 거예요.

 

---

스텝 5

세그먼트를 잡기 위해서 어레이(array: 배열)를 만드세요.

 

---

스텝 6

여섯 개의 세그먼트의 데이터를 추가하세요, 육각형의 각면당 한 개예요.

-왼쪽 상단의 오른쪽을 시점으로 x축의 오른쪽과 y축의 아래쪽으로 향하는 단위 제곱의 분수값이 저장되었어요.

나중에, 당신은 이 분수를 주어진 사이즈의 육각형의 실제 지점을 찾는 데 사용할 거예요.

 

---

스텝 7

어드저스트먼드(adjustment;조정) 값을 추가해서 육각형의 모양을 당신이 조정해 보세요.

 

섹션 1 완료

다음 섹션 2

https://ingodwelove.tistory.com/27

SwiftUI 튜토리얼 [챕터2-그리기1-섹션2: 뱃지 배경 그리기]