How to draw a border inside a view

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-draw-a-border-inside-a-view]

 

How to draw a border inside a view

 

SwiftUI는 도형 주변에 테두리를 그리기 위해 stroke()와 strokeBorder() 둘 다 제공하고, 그것들은 미묘하게 다른 행동을 합니다.

• strokeBorder() modifier는 테두리 넓이의 절반만큼 뷰의 안쪽에(inset) 넣고 stroke를 적용하며, 전체 테두리는 뷰 내부에 그려지는 것을 의미합니다.
• stroke() modifier는 뷰의 모서리를 중심으로 테두리를 그리며, 테두리 절반은 뷰의 안쪽에 반쪽은 뷰의 바깥쪽에 있다는 것을 의미합니다.

중요 : 이러한 modifiers 모두 도형(shape)에만 적용합니다 - Cicle, Rectangel, Capsule, 등등에서 stroke()와 strokeBorder()을 사용할 수 있지만, Text, Image, 또는 도형이 아닌 뷰에서는 사용할 수 없습니다. 도형이 아닌 뷰에 테두리를 그리고자 하는 경우에, 대신 border()modifier를 사용해야합니다 - How to draw a border around a view를 보세요.

 

strokeBorder() 동작을 보려면 다음과 같이 해보세요.

Circle()
    .strokeBorder(Color.blue, lineWidth: 50)

 

프레임을 지정하지 않았기에, 원(circle)은 화면의 전체 넓이를 차지할 것이고, 50 포인트 파란색 stroke는 원 안쪽에 모두 그려질 것입니다. 

stroke()와의 차이점을 잘 모르는 경우에, 코드를 다음과 같이 바꿔보세요.

Circle()
    .stroke(Color.blue, lineWidth: 50)

 

화면 바깥쪽으로 나가기 때문에, 왼쪽과 오른족 모서리가 잘려나간 것을 볼 수 있습니다.