벡터 이미지 예시

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 에서 벡터 그래픽 표현으로 변환하고, 화면에 렌더링될 때 그래픽 HW에서 필요에 따라 래스터화가 이루어집니다.

        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 Quick 항목으로 인스턴스화할 수 있습니다.

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

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

svgtoqml 도구는 VectorImage 과 동일한 사용 사례에서 고려해야 하며, 애플리케이션을 빌드할 때 SVG 파일을 에셋으로 사용할 수 있고 애플리케이션의 최종 사용자가 제공하지 않는 경우에 선호됩니다.

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