Qtの2Dグラフィックス

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

これは高レベルの概要で、円、矩形、複雑な図形、画像などのグラフィックス・プリミティブをレンダリングする直接的な方法に重点を置いています。Qt グラフィックスの低レベルな内部については、グラフィックスの概要を参照してください。

Qt にはハイエンドの3D レンダリング機能もあり、独自の API やツールが用意されています。以下の概要では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 の例では、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 コンポーネントに追加されます。これは高度な効果、例えばグラデーションの塗りつぶしや、別の図形からテキストを引くようなパス操作のために使うことができます。

ラスター画像

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

ベクター画像

ラスター画像の限界は、画質を落とさずに拡大縮小や変形ができないことです。異なるサイズで表示される画像や、変形を伴う画像は、通常、代わりにベクター画像形式を使用することが望ましいです。

VectorImage コンポーネントを使用すると、Qt Quick アプリケーションにスケーラブルなベクターグラフィックスを直接含めることができます。現在、デフォルトでSVG形式をサポートしています。アプリケーションにプラグインをデプロイすることで、Lottieフォーマットをサポートすることもできます。このサポートは現在実験的なものとみなされていることに注意してください。

VectorImage はドキュメントを解析し、Qt Quick Shapes やその他のプリミティブを使用して、その内容を表すQt Quick シーンをメモリ内に作成します。したがって、ベクター画像がQt Quick を使って書き込まれた場合と同じように動作します。

svgtoqmlツールやlottietoqmlツールを使って、ベクター画像をQMLに変換することもできます。これによって、Qt Quick コンポーネントを使ったベクトル画像と同じ表現が作成されます。ただし、QMLはメモリ上で作成されるのではなく、ファイルに保存されます。QMLファイルをあらかじめ生成しておくことは、アプリケーション資産の一部としてあらかじめコンパイルしておくことができることを意味します。

天気予報の例では、svgtoqmlがアプリケーションでどのように使われるかを示しています。天気予報のシンボル、地図、アイコンはSVGファイルで、QMLに変換され、アプリケーションシーンのアイテムとして読み込まれます。

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

プリラスタライズされたベクター画像

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

画像をレンダリングする方が複雑な形状をレンダリングするよりも高速なので、静的な画像の場合はこれが最適なアプローチです。しかし、アプリケーションによっては、ビルド時にこの変換を行うのは便利ではありません。例えば、アプリケーションが多くの異なるフォームファクターをターゲットにしている場合、それらすべてをカバーするための事前定義されたサイズのリストは非常に長く、予測するのが難しいかもしれません。プリレンダリングされた画像はアプリケーションのデプロイ時に余分なスペースを消費するため、この方法にはコストがかかります。

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

Imageを通してのSVGの読み込みは、VectorImage を通しての読み込みとは以下の点で異なります：

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

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

Vector Image の例では、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 エフェクトメーカーは、事前に定義されたエフェクトやカスタムエフェクトをつなぎ合わせ、ShaderEffect で使用するためのシェーダーコードを生成できるビジュアルツールを提供します。

QPainter

QPainterはQt Widgets.QPainter は、複雑な図形や画像をピクセル単位のアンチエイリアシングで描画するための必須 API を提供します。

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

QPainterは主にソフトウェア・レンダラーであり、画面を小さく部分的に更新するために最適化されている。そのため、以下のような伝統的なデスクトップスタイルのインターフェイスに適している。 Qt WidgetsUIのほとんどがフレームごとに静的である。そのため、大規模で複雑な2Dシーンのレンダリングにはコストがかかる可能性があります。 Qt Quick Shapesを検討する価値があるかもしれない。

一方、レンダリング品質はより高いので、多くのユースケースにおいては、SVGの方がまだ好ましいだろう。先に概説したようにImageを通してSVG画像をレンダリングする場合、QPainterが基礎となるレンダラーになる。

ピクセルの完全性が目標で、更新がまれで、かつ／または小さな領域に限られるなら、QPainter は強力なツールだ。もしこれがパフォーマンスのボトルネックになるようであれば Qt Quickそして Qt Quick Shapesを使用することを検討してもよい。

より高レベルのコンポーネント

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

Qt Quick Controlsはそのようなモジュールの一つです。これは、一般的なユーザーインターフェイスコンポーネントの豊富でスタイル可能なセットを提供します。同様に Qt WidgetsはQPainter ベースのアプリケーションに同じものを提供します。

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