ベクター画像の例

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 のソフトウェア・ラスタライザを使ってラスタライズし、pixmap 画像として 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