[iOS - SwiftUI] 1. Canvas 개념 (그림 그리기, Path)

1. Canvas 개념 (그림 그리기, Path)

2. Canvas 사용 방법 (fill, stroke)

Canvas로 그린 네모 배경과 세모 화면

Canvas 개념

• SwiftUI에서 2D 그래픽을 그리기 위해 사용되는 뷰

https://developer.apple.com/documentation/swiftui/canvas

• View타입이므로 아래처럼 선언하여 사용이 가능
  • 인수로 주어지는 context와 size를 사용하여 그림을 그리는 것

struct ContentView: View {
    var body: some View {
        Canvas(
            opaque: true,
            colorMode: .linear,
            rendersAsynchronously: false
        ) { context, size in
            context.opacity = 0.3
            ...
        }
        .frame(width: 300, height: 500)
    }
}

Canvas 컴포넌트

• Canvas를 선언하고 파라미터에 값을 넣어서 초기화
  • opaque: 불투명도 여부이며 true이면 불투명이라 뒷배경이 안보여짐 (디폴트는 false)
  • colorMode: 애플의 설명에 따르면 A working color space and storage format of the canvas 라고 되어 있으며, linear와 nonLinear 속성이 있는데 linear는 현실에 가까운 방식이며 nonLinear는 현실에 가깝진 않지만 더욱 화질이 개선된 형태로 보여지는 방식 (디폴트는 .nonLinear)
  • rendersAsynchronously: async로 동작하면 성능향상에 도움이 되지만 즉각적으로 그려지지 않는 단점이 존재 (디폴트는 false)

Canvas(
    opaque: true,
    colorMode: .linear,
    rendersAsynchronously: false
) { context, size in
  // TODO...
}
.frame(width: 300, height: 500)

 

이후 fill과 stroke를 사용하여 그림을 그리는 방법은 다음 글에서 계속..

 

* 참고

- https://developer.apple.com/documentation/swiftui/canvas