ベクター画像の例

Qtアプリケーションに2次元ベクターグラフィックスを組み込む方法はいくつかあります。この例では、SVG 形式と、それをQtでどのように使用できるかに焦点を当てています。基本的に、QtはSVG Tiny 1.2 プロファイルの静的機能をサポートしています。さらに、 Qt SVG オプションとしてフルプロファイルの一部の機能もサポートしていますが、本例ではそれらを使用しません。

この例では、3×3のセルからなるグリッドを表示し、各セルには同じハートのベクター画像が含まれています。ハートの画像は、この例に付属する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 が最上段で 1x のスケールで表示される場合は他の画像と見分けがつきませんが、スケール倍率が高くなるとぼやけて見えるようになります。

画像が常に単一のサイズでのみ表示される場合、これは通常、最もパフォーマンスの高い選択肢となります。指定されたサイズで画像をラスタライズするための初期コストはかかりますが、それ以降はデータを画面にコピーするコストは非常に低くなります。

しかし、画像が複数の異なるサイズで要求されるにつれて、初期処理コストは増加し、累積するメモリ消費量も増大します。画像のアニメーションズームは、低スペックなデバイスではフルフレームレートで実行するには負荷が高くなりすぎる場合がよくあります。こうしたユースケースでは、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