벡터 이미지 예시

Qt 애플리케이션에 2차원 벡터 그래픽을 포함시키는 방법에는 여러 가지가 있습니다. 이 예제는 SVG 형식과 이를 Qt에서 사용하는 방법에 중점을 둡니다. 기본적으로 Qt는 SVG Tiny 1.2 프로파일의 정적 기능을 지원합니다. 또한, Qt SVG 선택적으로 전체 프로파일의 일부 기능을 지원하지만, 이 예제에서는 해당 기능을 사용하지 않습니다.

이 예제에서는 3x3 셀로 구성된 격자를 보여주며, 각 셀에는 동일한 하트 벡터 이미지가 포함되어 있습니다. 하트 이미지는 예제와 함께 제공되는 SVG 파일로 제공됩니다.

그리드에서 각 행은 서로 다른 배율(각각 1배, 2.5배, 4배)로 이미지를 표시합니다.

각 열은 Qt에서 벡터 그래픽을 렌더링하는 서로 다른 방식을 나타냅니다. 가장 왼쪽 열은 Image 컴포넌트이고, 가운데 열은 VectorImage 컴포넌트이며, 가장 오른쪽 열은 svgtoqml 도구를 사용하여 생성된 사전 생성된 QML 표현입니다.

벡터 그래픽을 렌더링하는 각 방법에는 저마다의 장단점이 있으며, 서로 다른 사용 사례에 적합합니다. 어떤 방법을 사용할지 신중한 결정을 내리기 위해서는 이들 간의 차이점을 자세히 이해하는 것이 도움이 될 수 있습니다.

Image 컴포넌트와 Qt SVG

Image 요소를 사용하고 소스로 SVG 파일을 설정하면, 이는 Qt SVG에서 이미지 형식 플러그인이 호출됩니다. 이 플러그인은 SVG 파일을 파싱하고, QPainter 의 소프트웨어 래스터라이저를 사용하여 래스터화한 다음, 이를 픽스맵 이미지로 Qt Quick 에 전달합니다. 이는 QSvgRenderer 클래스를 사용하여 이미지를 그리는 것과 동일합니다.

        Image {
            sourceSize: Qt.size(topLevel.sourceSize, topLevel.sourceSize)
            source: "heart.svg"
        }

벡터 이미지는 특정 크기로 래스터화되므로, Image 에 적용하는 모든 변환은 래스터화된 이미지에 그대로 적용됩니다. 이로 인해 픽셀화 현상이 발생하거나 곡선이 고르지 않게 나타날 수 있습니다.

Image 를 통해 벡터 이미지를 불러올 때는 표시하려는 정확한 크기로 이미지를 요청할 때 가장 좋은 결과를 얻을 수 있습니다. Image 가 최상단 행에서 1배 크기로 표시될 때는 다른 이미지와 동일하게 보이지만, 확대 배율이 높아지면 이미지가 흐릿해지기 시작합니다.

이미지가 항상 단일 크기로만 표시될 경우, 이 방법이 일반적으로 가장 성능이 우수한 옵션입니다. 지정된 크기로 이미지를 래스터화하는 데 초기 비용이 발생하지만, 그 이후에는 데이터를 화면으로 복사하는 데 드는 비용은 매우 낮습니다.

하지만 이미지가 여러 가지 다른 크기로 요청되면 초기 처리 비용이 증가할 뿐만 아니라 누적된 메모리 사용량도 늘어납니다. 이미지의 애니메이션 확대/축소 기능은 저사양 기기에서 전체 프레임 속도로 실행하기에는 처리 비용이 너무 많이 들 수 있습니다. 이러한 사용 사례에서는 VectorImage 및 svgtoqml을 고려해야 합니다.

VectorImage 컴포넌트

Image 의 대안으로, Qt는 VectorImage 컴포넌트를 제공합니다. 이 컴포넌트는 SVG 이미지를 Qt Quick 의 벡터 그래픽 표현으로 변환하며, 화면에 렌더링될 때 그래픽 하드웨어에서 필요에 따라 래스터화가 수행됩니다.

        VectorImage {
            width: topLevel.sourceSize
            height: topLevel.sourceSize
            preferredRendererType: VectorImage.CurveRenderer
            source: "heart.svg"
        }

이미지가 미리 래스터화되지 않았기 때문에, 원본 도형의 정확도를 잃지 않고 변환을 적용할 수 있습니다. 이 예제에서는 VectorImage.CurveRenderer 렌더러 유형을 사용한다는 점에 유의하십시오. 이는 이미지가 변환되고 앤티앨리어싱이 필요한 사용 사례에 권장됩니다.

즉, 이미지를 어떤 크기로든 표시하거나 이미지 크기를 애니메이션으로 변경할 수 있으며, 모든 작업은 그래픽 하드웨어에서 처리됩니다. 그러나 VectorImage 가 화면에 렌더링될 때는 Image 를 렌더링하는 것보다 약간 더 많은 비용이 듭니다. 이는 곡선의 래스터화가 컴포넌트가 렌더링될 때마다 수행되며, 미리 처리되지 않기 때문입니다.

따라서 ` VectorImage `는 크기가 자주 변경되는 벡터 그래픽스에 가장 적합합니다. 또한 이미지의 출력 크기가 매우 크고 메모리 소비가 문제되는 경우에도 적합할 수 있습니다. ` Image`를 사용할 때는 전체 래스터화된 이미지를 그래픽 메모리에 저장해야 합니다. 따라서 메모리 소비량은 이미지의 크기에 비례하여 증가합니다. VectorImage 가 소비하는 메모리는 렌더링되는 대상 크기와 관계없이 동일합니다.

svgtoqml 도구

VectorImage 컴포넌트는 SVG 파일을 파싱하여 런타임 시 Qt Quick 항목으로 구성된 동등한 장면을 구축합니다.

SVG 이 애플리케이션 자산의 일부인 경우, svgtoqml 도구를 사용하여 일부 작업을 미리 수행할 수 있습니다. 이 도구는 VectorImage 과 동일한 장면을 생성하지만, 런타임에 구축하는 대신 애플리케이션 프로젝트에 포함될 수 있는 QML 파일을 생성합니다.

이 예제에서는 빌드 과정에서 heart.svg 파일이 자동으로 Heart.qml 로 변환됩니다.

qt_target_qml_from_svg(vectorimageexample
    CURVE_RENDERER
    OPTIMIZE_PATHS
    FILES heart.svg
    OUTPUTS Heart.qml
    COPYRIGHT_STATEMENT
        "Copyright © 2024 The Qt Company Ltd.\\nSPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause"
)

이 컴포넌트는 다른 Qt Quick 항목과 마찬가지로 씬에서 인스턴스화할 수 있습니다.

        Heart {
            width: topLevel.sourceSize
            height: topLevel.sourceSize
        }

이 방식을 사용하면 애플리케이션이 시작될 때마다 SVG 파일을 파싱할 필요가 없습니다. 또한, svgtoqml 도구는 도형을 최적화하고 분석하여 렌더러에 힌트를 제공함으로써 런타임 처리를 더욱 가속화할 수 있습니다.

svgtoqml 도구는 VectorImage 와 동일한 사용 사례에 대해 고려해야 하며, 애플리케이션 빌드 시 SVG 파일이 자산으로 제공되고 애플리케이션 최종 사용자가 직접 제공하지 않는 경우 이 도구를 우선적으로 사용해야 합니다.

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