Qt의 2D 그래픽

2차원 그래픽은 Qt Core의 사용자 인터페이스 기능의 핵심입니다. 이 페이지에서는 2D 그래픽을 렌더링하는 데 사용할 수 있는 도구와 API에 대한 개요를 제공합니다. 또한 유사한 작업을 수행하는 API 간의 차이점을 명확히 설명하는 것을 목표로 합니다.

원, 직사각형, 복잡한 도형 및 이미지와 같은 그래픽 기본 요소를 직접 렌더링하는 방법에 중점을 둔 높은 수준의 개요입니다. Qt 그래픽 내부에 대한 낮은 수준의 보기는 그래픽 개요 문서를 참조하십시오.

Qt에는 자체 API 및 도구 세트와 함께 고급 3D 렌더링 기능도 포함되어 있습니다. 다음 개요에서는 2차원 그래픽에 초점을 맞출 것이므로, 여기서는 Qt Quick 3D 및 관련 컴포넌트는 여기서 다루지 않습니다.

Qt Quick

Qt Quick 에는 하드웨어 가속 및 애니메이션 2D 그래픽 렌더링 도구가 있습니다. 이는 풍부한 UI 컴포넌트의 기반이 되는 Qt Quick Controls.

Qt Quick 모듈은 rectangles, text 및 이미지와 같은 필수 프리미티브를 제공합니다. 이러한 요소는 일반적으로 2차원 사용자 인터페이스의 기초가 됩니다.

Qt Quick 의 사용자 인터페이스는 낮은 성능 오버헤드로 변형 및 애니메이션을 구현할 수 있으며, 이 약속은 모듈의 핵심에 있습니다. 이 API는 선언적이기 때문에 Qt가 그래픽 저장, 렌더링 및 애니메이션 업데이트 관리 방법을 최적화할 수 있습니다.

Qt Quick 셰이프

기본 프리미티브 외에도 Qt Quick 에는 보다 복잡한 모양을 렌더링하기 위한 API가 있습니다. 코드에서 Qt Quick Shapes 모듈을 임포트하여 액세스할 수 있습니다.

Qt Quick 셰이프를 사용하면 move-to, line-to, cubic-to, arc-to 와 같은 경로 연산에서 임의의 paths 를 구성할 수 있습니다.

각 경로에는 다양한 옵션으로 정의된 스트로크를 가질 수 있습니다. 또한 단색, 그라데이션, 이미지 또는 다른 Qt Quick 항목으로 채울 수도 있습니다.

Qt Quick 도형 예제는 Qt Quick 도형으로 구성된 경로를 사용하여 고전적인 GhostScript 호랑이를 렌더링하는 방법을 보여줍니다.

커브 렌더러

기본적으로 Qt Quick 셰이프는 앤티앨리어싱을 위해 멀티 샘플링을 사용합니다. 또한 커브는 짧은 선분으로 평평해지며, 이는 도형을 확대하면 볼 수 있습니다. Shape 항목의 preferredRendererType 속성을 Shape.CurveRenderer 로 설정하면 내부적으로 다른 렌더러가 사용됩니다. 이 커브 렌더러는 GPU 자체에서 커브를 해결하고 MSAA 없이 앤티앨리어싱을 적용합니다.

셰이프를 처음 렌더링할 때는 성능에 약간의 추가 비용이 발생합니다. 그러나 그 후에는 추가 비용 없이 도형의 크기를 부드럽게 조정하고 변형할 수 있습니다.

기타 작업

Qt Quick 도형에는 경로를 만들기 위한 기본 작업 외에도 몇 가지 강력한 편의 구성 요소가 포함되어 있습니다.

• PathQuad 컴포넌트는 경로에 이차 곡선을 추가하는 데 사용할 수 있습니다.
• PathRectangle 컴포넌트는 모서리가 둥근 직사각형을 만드는 데 사용할 수 있습니다(선택 사항).
• PathSvg 컴포넌트는 SVG의 경로 구문을 사용하여 경로를 구성하는 데 사용할 수 있습니다. (참고: 이 컴포넌트는 경로를 간결하게 설명하는 방법만 제공하며 전체 SVG 구문을 지원하지 않습니다.)
• PathText 컴포넌트는 글꼴에서 경로에 윤곽선을 추가하는 데 사용할 수 있습니다. 이는 Qt Quick 의 Text 컴포넌트와 함께 제공됩니다. 그라데이션 채우기, 다른 도형에서 텍스트 빼기 등의 경로 작업과 같은 고급 효과에 사용할 수 있습니다.

래스터 이미지

래스터 이미지(또는 픽셀맵)는 이미지 컴포넌트를 사용하여 Qt Quick 에 표시할 수 있습니다. 일련의 이미지 형식은 Qt GUI 모듈을 통해 기본적으로 지원됩니다(PNG, JPEG, BMP 및 GIF). 또한 Qt Image Formats 모듈에는 다른 이미지 형식을 로드하기 위한 플러그인이 있습니다. 애플리케이션이 특정 형식의 플러그인에 액세스할 수 있다면 이미지 컴포넌트를 사용하여 로드할 수 있습니다.

벡터 이미지

래스터 이미지의 한계는 약간의 품질 저하 없이 크기를 조정하거나 다른 방식으로 변형할 수 없다는 것입니다. 다양한 크기나 변형으로 표시할 이미지의 경우 일반적으로 벡터 이미지 형식을 사용하는 것이 좋습니다.

VectorImage 컴포넌트를 사용하여 Qt Quick 애플리케이션에 직접 확장 가능한 벡터 그래픽을 포함할 수 있습니다. 현재 기본적으로 SVG 형식을 지원합니다. 애플리케이션과 함께 플러그인을 배포하여 로티 형식을 지원하도록 만들 수도 있습니다. 이 지원은 현재 실험적인 것으로 간주됩니다.

VectorImage 은 문서를 파싱하고 Qt Quick 셰이프 및 기타 프리미티브를 사용하여 내용을 나타내는 Qt Quick 장면을 메모리에 만듭니다. 따라서 벡터 이미지가 Qt Quick 를 사용하여 작성된 것과 동일하게 작동합니다.

벡터 이미지는 svgtoqml 및 lottietoqml 도구를 사용하여 미리 QML로 변환할 수도 있습니다. 이렇게 하면 Qt Quick 컴포넌트를 사용하여 벡터 이미지의 동일한 표현이 만들어집니다. 그러나 이 표현은 메모리에 생성되는 대신 파일에 저장됩니다. QML 파일을 미리 생성하면 애플리케이션 에셋의 일부로 미리 컴파일할 수 있으므로 로드할 때 시간을 절약할 수 있습니다.

일기 예보 예시는 애플리케이션에서 svgtoqml을 어떻게 사용할 수 있는지 보여줍니다. 날씨 기호, 지도 및 아이콘은 QML로 변환되어 애플리케이션 장면에서 항목으로 로드된 SVG 파일입니다.

마찬가지로, 로티 애니메이션을 QML로 변환하는 데 lottietoqml 도구를 사용할 수 있습니다.

사전 래스터화된 벡터 이미지

단일 크기로만 표시되는 벡터 이미지의 경우 미리 픽셀맵으로 래스터화하여 Image를 사용하여 표시하는 것이 더 효율적입니다. 이러한 이미지는 애플리케이션 소스 에셋에 SVG로 저장된 다음 미리 정의된 크기의 PNG로 변환되는 경우가 많습니다(예를 들어). 이 작업은 일반적으로 애플리케이션 빌드 및 패키징 프로세스의 일부로 수행됩니다.

이미지를 렌더링하는 것이 복잡한 모양을 렌더링하는 것보다 빠르므로 정적 이미지의 경우 이 방법이 최적의 방법입니다. 그러나 일부 애플리케이션의 경우 빌드 시점에 이 변환을 수행하는 것이 편리하지 않을 수 있습니다. 예를 들어 애플리케이션이 다양한 폼 팩터를 대상으로 하는 경우, 모든 폼 팩터를 포괄하기 위해 미리 정의된 크기 목록이 매우 길고 예측하기 어려울 수 있습니다. 미리 렌더링된 각 이미지는 애플리케이션 배포에서 추가 공간을 차지하므로 이 접근 방식에 대한 비용도 발생합니다.

따라서 Qt는 이미지가 로드될 때 특정 크기로 SVG 파일을 래스터화하는 기능도 지원합니다. 이 작업은 일반 이미지 컴포넌트를 통해 파일을 로드하면 간단히 수행할 수 있습니다. sourceSize 속성을 사용하여 이미지의 래스터화된 크기를 제어할 수 있습니다.

이미지를 통해 SVG를 로드하는 것은 VectorImage 을 통해 로드하는 것과 다음과 같은 점에서 다릅니다:

• Image를 사용하면 이미지가 텍스처로 로드되기 전에 CPU에서 래스터화됩니다. 따라서 래스터화된 이미지의 대상 크기에 따라 추가 로딩 비용이 발생합니다. 그러나 동일한 이미지의 후속 렌더링은 이미지가 사전 래스터화되어 픽셀맵으로 로드된 경우만큼 빠릅니다.
• 또한 래스터화된 이미지는 벡터 이미지의 복잡성과 래스터화된 데이터의 크기에 따라 더 많은 메모리를 소비할 수 있습니다.
• 이미지 크기 조정/변형도 픽셀맵으로 로드할 때와 동일한 단점이 있습니다.
• 이미지에 애니메이션이 있는 경우 이미지에는 첫 번째 프레임만 표시됩니다.

따라서 일반적으로 이미지에 애니메이션이 없고 애플리케이션의 수명 기간 동안 크기가 동일하게 유지되는 경우 래스터화된 벡터 이미지를 사용하는 것이 더 좋습니다. 이미지를 타사 툴로 빌드 타임에 래스터화할지, 아니면 Qt가 이미지를 로드할 때 런타임에 래스터화할지는 로드 시간과 편의성/배치 크기 사이의 절충안입니다.

벡터 이미지 예제에서는 이미지( VectorImage )를 사용하여 다양한 배율로 표시되는 SVG 파일과 svgtoqml로 생성된 QML 파일을 보여줍니다. 소스 크기로 표시할 경우 렌더링은 전반적으로 동일하게 표시되며 이미지의 렌더링 속도가 약간 더 빠릅니다. 더 큰 스케일에서는 이미지가 흐릿해지고 픽셀화되는 반면, 다른 접근 방식은 선명하고 원본에 충실하게 유지됩니다.

애니메이션 벡터 그래픽

애니메이션은 Qt Quick 서비스의 핵심입니다. 많은 벡터 그래픽 애니메이션은 항목의 형상을 변경하지 않고도 실행할 수 있으므로 Qt Quick 의 하드웨어 가속 렌더러의 이점을 잘 활용할 수 있습니다.

VectorImage는 선택한 속성 하위 집합에 대한 애니메이션을 지원합니다.

lottietoqml 예제는 애니메이션 로티 파일을 QML로 변환하는 방법을 보여줍니다. 이 스크린샷에서 볼 수 있듯이 여러 개의 애니메이션 이미지가 그리드에 배치되어 있습니다. 스케일링 아티팩트나 충실도 손실 없이 각각 확대/축소할 수 있습니다.

효과

후처리 효과에 대한 지원은 Qt Quick 의 핵심 기능으로 포함되어 있습니다. 모든 항목을 텍스처로 전환할 수 있으며 ShaderEffect 구성 요소를 사용하여 효과를 적용할 수 있습니다.

이러한 낮은 수준의 효과 지원 외에도 Qt Quick 에는 프로세스를 더 쉽게 할 수 있는 몇 가지 높은 수준의 구성 요소도 있습니다.

MultiEffect 컴포넌트를 사용하면 미리 정의된 공통 효과 세트를 하나 이상 항목에 적용할 수 있습니다.

보다 복잡한 사용 사례의 경우 Qt Quick Effect Maker 는 사전 정의된 효과와 사용자 정의 효과를 함께 묶고 ShaderEffect 에서 사용할 셰이더 코드를 생성할 수 있는 시각적 도구를 제공합니다.

QPainter

QPainter는 Qt Widgets. 픽셀 단위의 완벽한 앤티앨리어싱으로 복잡한 도형과 이미지를 그리는 데 필수적인 API를 제공합니다.

도형은 QPainterPath 을 사용하여 지정할 수 있으며 렌더러는 텍스트 및 이미지와 같은 기본 요소도 직접 지원합니다.

QPainter는 주로 소프트웨어 렌더러로, 화면의 작은 부분 업데이트에 최적화되어 있습니다. 따라서 대부분의 UI가 정적인 데스크톱 스타일의 Qt Widgets의 전통적인 데스크톱 스타일 인터페이스에 적합합니다. 따라서 크고 복잡한 2D 장면을 렌더링하려면 비용이 많이 들 수 있으며, 대신 Qt Quick Shapes 를 사용하는 것이 좋습니다.

반면에 렌더링 품질이 더 높기 때문에 많은 사용 사례에서 여전히 선호될 것입니다. 앞서 설명한 대로 Image를 통해 SVG 이미지를 렌더링할 때는 QPainter가 기본 렌더러가 됩니다.

픽셀 완벽성이 목표이고 업데이트가 드물거나 작은 영역에 국한된 경우 QPainter 이 강력한 도구입니다. 성능에 병목 현상이 발생하면 다음을 사용하는 것을 고려할 수 있습니다. Qt Quick 및 Qt Quick Shapes 를 사용하는 것이 좋습니다.

더 높은 수준의 컴포넌트

이러한 기본 그래픽 프리미티브를 기반으로 Qt는 많은 전문화된 상위 레벨 컴포넌트도 제공합니다.

Qt Quick Controls 가 그러한 모듈 중 하나입니다. 이 모듈은 풍부하고 스타일링이 가능한 공통 사용자 인터페이스 컴포넌트 세트를 제공합니다. 마찬가지로 Qt Widgets 는 QPainter 기반 응용 프로그램에도 동일한 기능을 제공합니다.

또한 Qt Graphs 는 데이터 시각화 모듈입니다. 애플리케이션에서 데이터 세트와 그래프를 시각화하기 위한 다양한 구성 요소를 제공합니다. Qt Quick 애플리케이션. Qt Graphs 2D 및 3D 그래프를 모두 지원합니다.