Qtにおける2Dグラフィックス

2次元グラフィックスは、Qtのユーザーインターフェース機能の中核をなしています。このページでは、独自の2次元グラフィックスをレンダリングするために利用できるツールやAPIの概要を説明します。また、類似したタスクを実行するAPI間の違いを明確にすることも目的としています。

これは高レベルな概要であり、円、矩形、複雑な形状、画像などのグラフィックプリミティブを直接描画する方法に焦点を当てています。Qtグラフィックスの内部構造に関する低レベルの詳細については、グラフィックスの概要ドキュメントを参照してください。

Qtには、独自のAPIやツールを備えたハイエンドな3Dレンダリング機能も含まれています。以下の概要では2次元グラフィックスに焦点を当てるため、Qt Quick 3Dおよび関連コンポーネントについてはここでは扱いません。

Qt Quick

Qt Quick には、ハードウェアアクセラレーション対応のアニメーション付き2Dグラフィックスをレンダリングするためのツールが用意されています。これは、Qt Quick Controlsに含まれる豊富なUIコンポーネントの基盤となっています。

Qt Quick モジュールは、rectangles 、text 、画像などの基本的なプリミティブを提供します。これらは通常、2次元ユーザーインターフェースの基盤となります。

Qt Quick のユーザーインターフェースは、パフォーマンスへの負荷を最小限に抑えながら変形やアニメーション処理が可能であり、この点が本モジュールの核心をなしています。APIは宣言型であるため、Qtはグラフィックスの保存やレンダリング、アニメーションの更新処理を最適化することができます。

Qt Quick 図形

基本的なプリミティブに加え、Qt Quick にはより複雑な形状をレンダリングするためのAPIが用意されています。これらは、コード内で Qt Quick Shapes モジュールをインポートすることで利用できます。

Qt Quick Shapes を使用すると、move-to 、line-to 、cubic-to 、arc-to などのパス操作から、任意のpaths を構築できます。

各パスには、豊富なオプションセットによって定義されたストロークを設定できます。さらに、単色、グラデーション、画像、あるいは別のQt Quick アイテムで塗りつぶすことも可能です。

Qt Quick Shapesのパスを使用してレンダリングされたGhostScriptのタイガー" src="images/tiger.png" title="Qt Quick Shapesのパスを使用してレンダリングされたGhostScriptのタイガー"/>

「Qt Quick Shapes」のサンプルでは、Qt Quick Shapesで構築されたパスを使用して、GhostScriptの定番であるトラの図形をどのように描画できるかを示しています。

曲線レンダラー

デフォルトでは、Qt Quick Shapesはアンチエイリアシングのためにマルチサンプリングに依存しています。また、曲線は短い線分へと平坦化されますが、シェイプを拡大表示するとこれが目立つ場合があります。Shape 項目のpreferredRendererType プロパティをShape.CurveRenderer に設定すると、内部で別のレンダラーが使用されます。この曲線レンダラーは、GPU上で曲線を直接計算し、MSAAを使用せずにアンチエイリアシングを適用します。

これにより、図形が最初にレンダリングされる際には、パフォーマンスに若干のオーバーヘッドが生じます。しかし、それ以降は、追加のオーバーヘッドなしに図形をスムーズに拡大縮小および変形させることができます。

その他の操作

パスを構築するための基本的な操作に加え、Qt Quick Shapes には、いくつかの強力で便利なコンポーネントも含まれています。

• PathQuad コンポーネントを使用すると、パスに2次曲線を追加することができます。
• PathRectangle コンポーネントを使用すると、矩形（必要に応じて角を丸くすることも可能）を構築できます。
• PathSvg コンポーネントを使用すると、SVGのパス構文を使用してパスを構築できます。（注：このコンポーネントはパスを記述するための簡潔な方法を提供するのみで、SVG構文のすべてをサポートしているわけではありません。）
• PathText コンポーネントを使用すると、パスにフォントからのアウトラインを追加できます。これは、Qt Quick のText コンポーネントに追加される機能です。グラデーション塗りつぶしや、別の図形からテキストを差し引くといったパス操作など、高度な効果に使用できます。

ラスター画像

ラスター画像（またはピクマップ）は、Qt Quick のImageコンポーネントを使用して表示できます。 Qt GUI （PNG、JPEG、BMP、GIF）がデフォルトでサポートされています。さらに、 Qt Image Formats モジュールには、他の画像形式を読み込むためのプラグインが用意されています。アプリケーションが特定の形式のプラグインにアクセスできる限り、Imageコンポーネントを使用してその画像を読み込むことができます。

ベクター画像

ラスター画像の制限として、品質を多少低下させることなく拡大・縮小やその他の変形を行うことができない点が挙げられます。異なるサイズで表示されたり、変形が加えられたりする画像については、通常、代わりにベクター画像形式を使用することが推奨されます。

VectorImage コンポーネントを使用すると、Qt Quick アプリケーションにスケーラブル・ベクター・グラフィックスを直接組み込むことができます。現在、デフォルトでSVG形式をサポートしています。アプリケーションにプラグインを組み込むことで、Lottie形式のサポートも追加可能です。

VectorImage はドキュメントを解析し、Qt Quick のシェイプやその他のプリミティブを使用して、その内容を表現するQt Quick シーンをメモリ上に作成します。したがって、その挙動は、あたかもベクター画像がQt Quick を使用して記述されたかのように動作します。

また、svgtoqmlやlottietoqmlツールを使用することで、ベクター画像を事前に QML に変換することもできます。これにより、Qt Quick のコンポーネントを使用して、ベクター画像と同一の表現が生成されます。ただし、この表現はメモリ上に作成されるのではなく、ファイルに保存されます。 QML ファイルを事前に生成しておくことで、アプリケーションのアセットの一部として事前コンパイルが可能になり、読み込み時の時間を節約できます。

「天気予報のサンプル」では、アプリケーション内でsvgtoqml をどのように使用できるかを示しています。天気記号、地図、アイコンは、QML に変換された SVG ファイルであり、アプリケーションのシーン内のアイテムとして読み込まれています。

同様に、lottietoqmlツールを使用すると、Lottie アニメーションを QML に変換することができます。

あらかじめラスタライズされたベクター画像

常に単一のサイズでのみ表示されるベクター画像については、あらかじめピクマップにラスタライズしておき、Image を使用して表示する方が効率的です。 多くの場合、このような画像はアプリケーションのソースアセットに SVG として保存され、その後、あらかじめ定義されたサイズで（例えば）PNG に変換されます。これは通常、アプリケーションのビルドおよびパッケージングプロセスの一環として行われます。

画像のレンダリングは複雑な形状のレンダリングよりも高速であるため、静的画像にとってはこれが最適なアプローチです。しかし、一部のアプリケーションでは、ビルド時にこの変換を行うことは不便です。例えば、アプリケーションが多くの異なるフォームファクタを対象としている場合、それらすべてを網羅するための事前定義されたサイズのリストは非常に長くなり、予測が困難になる可能性があります。 事前にレンダリングされた各画像はアプリケーションのデプロイメントにおいて余分なスペースを消費するため、このアプローチにはコストも伴います。

そのため、Qtでは、画像の読み込み時にSVGファイルを特定のサイズでラスタライズすることもサポートしています。これは、通常のImageコンポーネントを介してファイルを読み込むだけで簡単に実行できます。sourceSize プロパティを使用することで、画像のラスタライズサイズを制御できます。

Imageを通じて SVG を読み込む場合と、VectorImage を通じて読み込む場合では、以下の点が異なります。

• Image を使用する場合、画像はテクスチャとして読み込まれる前に CPU 上でラスタライズされます。そのため、ラスタライズされた画像のターゲットサイズに応じて、余分な読み込みコストが発生します。ただし、同じ画像をその後レンダリングする際は、あらかじめラスタライズされてピクマップとして読み込まれた場合と同様に高速になります。
• さらに、ベクター画像の複雑さやラスタライズされたデータのサイズによっては、ラスタライズされた画像がより多くのメモリを消費する可能性があります。
• 画像の拡大縮小や変形を行う場合、ピクマップとして読み込んだ場合と同じ欠点があります。
• 画像にアニメーションが含まれている場合、Imageはその最初のフレームのみを表示します。

したがって、一般的なルールとして、画像にアニメーションがなく、アプリケーションの実行期間を通じてサイズが変わらない場合は、あらかじめラスタライズされたベクター画像を使用するほうが良いでしょう。 画像がビルド時にサードパーティのツールによってラスタライズされるか、実行時に Qt が画像を読み込む際にラスタライズされるかは、読み込み時間と利便性／展開サイズとのトレードオフになります。

「ベクター画像の例」では、Image、VectorImage 、およびsvgtoqml で生成された QML ファイルを使用して、SVG ファイルをさまざまなスケールで表示しています。ソースサイズで表示した場合、レンダリングはどの方法でも同じに見え、Imageの方がレンダリングがわずかに高速になります。 拡大率が高くなると、Image では画像がぼやけてピクセル化されますが、他の手法では鮮明で、ソースに忠実なまま表示されます。

アニメーション付きベクターグラフィックス

アニメーションは、Qt Quick の提供機能の中核を成しています。多くのベクターグラフィックスアニメーションは、アイテムのジオメトリを変更することなく実行できるため、Qt Quick のハードウェアアクセラレーションによるレンダラーの恩恵を十分に受けることができます。

VectorImagesvgtoqmlおよびlottietoqml は、特定のプロパティのサブセットに対するアニメーションをサポートしています。

lottietoqml の例では、アニメーション化された Lottie ファイルを QML に変換する方法を示しています。このスクリーンショットに見られるように、複数のアニメーション画像がグリッド状に配置されています。それぞれを、スケーリングによるアーティファクトや忠実度の低下なしにズームすることができます。

エフェクト

ポストプロセッシングエフェクトのサポートは、Qt Quick のコア機能として組み込まれています。任意のアイテムをテクスチャに変換でき、ShaderEffect コンポーネントを使用して、そのテクスチャに任意のエフェクトを適用できます。

この低レベルなエフェクトサポートに加え、Qt Quick には、処理を容易にするためのいくつかの高レベルコンポーネントも用意されています。

MultiEffect コンポーネントを使用すると、あらかじめ定義された一般的なエフェクトセットの中から1つ以上を選択して、アイテムに適用することができます。

Qt Quick Effect Maker：エフェクトの連鎖や作成を行うためのビジュアルツール" src="images/quickeffectmaker.png" title="Qt Quick Effect Maker：エフェクトの連鎖や作成を行うためのビジュアルツール"/>

より複雑なユースケースに対応するため、Qt Quick Effect Makerでは、定義済みのエフェクトやカスタムエフェクトを連結し、ShaderEffect で使用するシェーダーコードを生成できるビジュアルツールが提供されています。

QPainter

QPainterは Qt Widgetsの基礎となるものです。これは、ピクセル単位のアンチエイリアシングを適用して複雑な形状や画像を描画するための命令型 API を提供します。

図形はQPainterPath を使用して指定でき、レンダラーはテキストや画像などのプリミティブも直接サポートしています。

QPainterは主にソフトウェアレンダラーであり、画面の小さな部分的な更新に最適化されています。そのため、フレームごとにUIの大部分が静的な Qt Widgets、フレームごとに UI の大部分が静的であるような、従来のデスクトップスタイルのインターフェースに最適です。したがって、これを使用して大規模で複雑な 2D シーンをレンダリングするのは負荷が高くなる可能性があり、代わりに Qt Quick Shapes ことを検討する価値があるかもしれません。

一方で、レンダリング品質は高いため、多くのユースケースでは依然としてQPainterが好ましいでしょう。前述のようにImageを通じてSVG画像をレンダリングする場合、QPainterが基盤となるレンダラーとなります。

ピクセル単位の精度が求められ、更新頻度が低い、あるいは更新範囲が狭い場合は、QPainter は強力なツールとなります。もしこれがパフォーマンスのボトルネックとなる場合は、 Qt Quick および Qt Quick Shapes への切り替えを検討してもよいでしょう。

高レベルなコンポーネント

これらの基本的なグラフィックプリミティブを基盤として、Qt は多くの特殊な高レベルコンポーネントも提供しています。

Qt Quick Controlsはその一例です。このモジュールは、豊富でスタイル設定が可能な一般的なユーザーインターフェースコンポーネントのセットを提供します。同様に、 Qt WidgetsQPainter ベースのアプリケーションに対しても同様の機能を提供します。

さらに、 Qt Graphs はデータ可視化モジュールです。アプリケーション内でデータセットやグラフを可視化するための、多種多様なコンポーネントを提供します Qt Quick アプリケーション内で可視化するための、多種多様なコンポーネントを提供します。 Qt Graphs は、2Dおよび3Dグラフの両方をサポートしています。