일기 예보 예시

이 예제는 유럽의 일기 예보 앱처럼 보이도록 설계되었습니다. 이 예제를 통해 애플리케이션에서 QtQuick.Shapes API를 유용하게 활용할 수 있는 몇 가지 방법과, 다양한 속성이 렌더링의 품질과 성능에 어떤 영향을 미치는지 보여줍니다.

예제의 모든 그래픽은 원래 .svg 파일로 되어 있었으며, 빌드 시점에 svgtoqml 도구를 사용하여 자동으로 QML로 변환됩니다.

qt_target_qml_from_svg(weatherforecastexample
    OPTIMIZE_PATHS
    ASYNCHRONOUS_SHAPES
    TYPE_NAME "DemoShape"
    COPYRIGHT_STATEMENT "Copyright © 2023 Framework7\\nSPDX-License-Identifier: MIT"
    FILES
        assets/gear-alt-stroke.svg
    OUTPUTS
        Gear_generated.qml
)

생성된 QML 파일은 다른 파일과 마찬가지로 애플리케이션 코드에서 사용할 수 있습니다.

다양한 도형 유형

QtQuick.Shapes 모듈은 Qt Quick 애플리케이션에서 벡터 그래픽을 렌더링하기 위한 API를 제공합니다. 이는 2D 그래픽에 래스터 Image 를 사용하는 것의 대안이며, 이미지의 목표 크기를 미리 알 수 없는 경우에 유용합니다. Image 을 사용할 경우, 래스터화된 픽스맵은 특정 크기로 미리 생성되며, 이미지를 확대 또는 축소하면 정보가 추가되거나 제거됩니다. 이는 smooth 속성이 설정되어 있는지 여부에 따라 픽셀화되거나 흐릿해지는 결과를 초래합니다.

QtQuick.Shapes 를 사용하면 도형이 곡선과 선분의 집합으로 수학적으로 정의되므로, 아티팩트 없이 임의로 크기를 조정할 수 있습니다.

'일기 예보' 예제에서는 도형이 주로 세 가지 용도로 사용됩니다:

• 날씨 기호나 “설정” 버튼의 톱니바퀴 아이콘과 같은 사용자 인터페이스 아이콘.
• 유럽의 개요 지도.
• 지도를 확대했을 때 표시되는 국가 이름 레이블.

사용자 인터페이스 아이콘

성능상의 이유로 아이콘에는 일반적으로 적절한 크기의 래스터 이미지를 사용하는 것이 바람직하지만, 동일한 애플리케이션이 다양한 화면 크기를 대상으로 하는 경우 이는 불편할 수 있습니다. 모든 화면에서 아이콘이 선명하게 표시되려면 다양한 크기의 아이콘 세트를 미리 생성해야 합니다. QtQuick.Shapes 를 사용하면 아이콘을 도형으로 포함하고 현재 화면 크기에 적합한 크기로 렌더링함으로써, 애플리케이션이 런타임에 이러한 조정을 수행할 수 있습니다.

데스크톱 시스템에서 ‘일기 예보’ 예제를 실행할 때, 애플리케이션 창을 확대하거나 축소해 보면 이를 확인할 수 있습니다. 일기 예보 기호들은 화질 저하 없이 창 크기에 맞춰 조정됩니다.

또한, 확대/축소와 같은 애니메이션 효과도 화질 저하 없이 추가할 수 있습니다. 이는 날씨 기호 위에 마우스를 올려놓으면 확인할 수 있습니다.

따라서 대상 크기가 알려지지 않았거나, 가능한 조합의 수가 너무 많아 모든 경우에 대한 특정 픽스맵을 생성하는 것이 비실용적인 모든 사용 사례에서, 아이콘에 도형을 사용하는 것은 유용하며 런타임에 도형을 래스터화하는 데 드는 성능 비용을 감수할 만한 가치가 있습니다.

유럽 지도

‘일기 예보’ 예제에서는 벡터화된 유럽 지도도 사용합니다. 이를 통해 특정 국가를 강조하고 싶을 때 지도를 확대하는 등의 효과를 쉽게 만들 수 있습니다. 또한, 각 국가가 별도의 하위 도형으로 구성되어 있으므로, 각 국가에 서로 다른 채우기와 윤곽선을 독립적으로 적용할 수 있습니다.

지도를 클릭하면 해당 국가를 확대할 수 있습니다. 확대 시 해당 국가의 도형이 창 전체를 채우도록 배율이 조정되며, 채우기 색상이 약간 더 어두워집니다.

국가 이름 레이블

특정 국가를 확대하면 해당 국가 모양 위에 국가 이름이 표시됩니다. 이 레이블 역시 QtQuick.Shapes 에서 문자열을 렌더링 가능한 도형으로 변환하는 ‘ PathText ’ 컴포넌트 유형을 사용하여 생성됩니다.

이는 Qt Quick 에서 텍스트 레이블을 생성하는 일반적인 방식은 아닙니다. 대부분의 경우, Text 요소를 사용하는 것이 가장 효율적이고 편리한 방법입니다. 그러나 QtQuick.Shapes 에서는 지원되지만 일반 Text 요소에서는 지원되지 않는 특정 시각화 효과가 있습니다. 채우기 그라데이션이 바로 그러한 효과 중 하나입니다.

                        ShapePath {
                            strokeColor:  "transparent"
                            strokeWidth: 1
                            joinStyle: ShapePath.RoundJoin
                            fillRule: ShapePath.WindingFill

                            fillGradient: RadialGradient {
                                centerX: textShape.width / 2
                                centerY: textShape.height / 2
                                centerRadius: textShape.width / 2
                                focalX: centerX; focalY: centerY
                                GradientStop { position: 0; color: "#b0ab9d7f" }
                                GradientStop { position: 1; color: "#5cab9d7f" }
                            }
                            PathText {
                                id: textPath
                                text: textLayer.label
                                font.family: workSansRegular.font.family
                                font.pixelSize: 64
                            }
                        }

이를 설명하기 위해, ‘일기 예보’ 예제에서는 국가 레이블의 불투명도에 미묘한 방사형 그라데이션을 적용하여, 가장자리에서 레이블이 지도와 자연스럽게 어우러지도록 했습니다.

다양한 유형의 렌더러

'일기 예보' 예제는 QtQuick.Shapes 의 다양한 사용 사례를 보여줍니다. 또한 이 예제를 통해 모듈이 지원하는 다양한 렌더러의 장단점을 확인할 수 있습니다.

왼쪽 상단 모서리에 있는 톱니바퀴 아이콘을 클릭하면 설정 패널이 열리며, 여기서 다양한 래스터화 방식을 선택할 수 있습니다.

QtQuick.Shapes preferredRendererType 는 속성을 사용하여 선택할 수 있는 두 가지 렌더러를 지원합니다. 이 예제에서 권장되는 렌더러는 입니다. 이 렌더러는 하드웨어 가속 곡선과 내장 앤티앨리어싱을 지원합니다. 이는 의 기본 렌더러는 아니지만, 이 예제에서는 시작 시 자동으로 선택됩니다. CurveRenderer QtQuick.Shapes

Qt Quick Shapes의 기본 렌더러는 GeometryRenderer 입니다. 이 렌더러는 도형의 곡선을 매우 짧은 직선으로 평탄화하여 도형을 다각형으로 그립니다. 도형을 다시 그리는 작업은 CurveRenderer 를 사용할 때보다 효율적이지만, 특정 배율에서는 곡선이 직선으로 근사화된 사실이 눈에 띄게 됩니다.

또한, GeometryRenderer 는 앤티앨리어싱을 지원하지 않으므로, 이를 사용할 때는 일반적으로 멀티샘플링을 활성화하는 것이 좋습니다. 이는 도형을 레이어로 렌더링한 다음, 해당 레이어에서 멀티샘플링을 활성화함으로써 수행할 수 있습니다. 이 모드에서는 도형을 오프스크린 버퍼에 렌더링하게 되므로, 각 도형마다 추가적인 렌더링 패스가 필요할 뿐만 아니라 추가적인 그래픽 메모리도 소모됩니다.

        layer.enabled: msaaCheckBox.checked
        layer.samples: 4

설정 패널에는 GeometryRenderer 를 4배 멀티샘플링과 함께 사용할 수 있는 옵션도 제공되므로, 이를 통해 CurveRenderer 의 내장 앤티앨리어싱과 품질을 비교해 볼 수 있습니다.

예제 실행

다음 경로에서 예제를 실행할 수 있습니다:

• Qt Creator

  Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator 의 ‘튜토리얼: 빌드 및 실행’을 참조하십시오.

• Qt Extension for Visual Studio Code

  Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택하십시오. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.

code.qt.io의 예제 프로젝트