天気予報の例

このサンプルは、ヨーロッパ向けの天気予報アプリのように見えるように設計されています。QtQuick.Shapes APIがアプリケーションでどのように役立つか、またさまざまなプロパティがレンダリングの品質やパフォーマンスにどのような影響を与えるかをいくつか示しています。

この例のすべてのグラフィックは、もともと.svg ファイルとして作成されており、ビルド時にsvgtoqmlツールを使用して自動的にQMLに変換されます。

qt_target_qml_from_svg(weatherforecastexample
    OPTIMIZE_PATHS
    ASYNCHRONOUS_SHAPES
    TYPE_NAME "DemoShape"
    COPYRIGHT_STATEMENT "Copyright © 2023 Framework7\\nSPDX-License-Identifier: MIT"
    FILES
        assets/gear-alt-stroke.svg
    OUTPUTS
        Gear_generated.qml
)

生成されたQMLファイルは、他のファイルと同様にアプリケーションコード内で使用できます。

さまざまな種類の図形

QtQuick.Shapes モジュールは、Qt Quick アプリケーションでベクターグラフィックスをレンダリングするためのAPIを提供します。これは、2DグラフィックスにラスタImage を使用する代わりに利用でき、画像のターゲットサイズが事前に不明な場合に役立ちます。Image を使用する場合、ラスタライズされたピクマップは特定のサイズで事前に作成されるため、画像を拡大・縮小すると情報が追加されたり失われたりします。これにより、smooth プロパティの設定状況に応じて、ピクセル化やぼやけが生じます。

QtQuick.Shapes では、図形は曲線や線分の集合として数学的に記述されるため、アーティファクトを生じさせることなく任意に拡大・縮小することができます。

「天気予報」の例では、図形は主に3つの用途で使用されています：

• 天気記号や「設定」ボタンの歯車アイコンなどのユーザーインターフェースアイコン。
• ヨーロッパの概要地図。
• 地図を拡大した際に表示される国名のラベル。

ユーザーインターフェースのアイコン

パフォーマンス上の理由から、アイコンには通常、適切なサイズのラスター画像を使用することが推奨されますが、同じアプリケーションがさまざまな画面サイズに対応している場合、これは不便になる可能性があります。 すべての画面でアイコンを鮮明に表示するには、さまざまなサイズのアイコンを事前に多数生成しておく必要があります。QtQuick.Shapes を使用すると、アイコンをシェイプとして組み込み、現在の画面サイズに適したサイズでレンダリングすることで、アプリケーションが実行時にこの調整を行うことが可能になります。

デスクトップシステムで「天気予報」のサンプルを実行する際、アプリケーションウィンドウを拡大または縮小すると、この動作を確認できます。天気記号は、画質を損なうことなくウィンドウサイズに合わせて適応します。

さらに、ズームなどのアニメーション効果も、画質を損なうことなく追加できます。これは、天気記号にカーソルを合わせると確認できます。

したがって、ターゲットサイズが不明なユースケースや、可能性の数が非常に多く、すべてに対して個別のピクマップを作成することが現実的でない場合、アイコンにシェイプを使用することは有用であり、実行時にシェイプをラスタライズするパフォーマンス上のコストを払う価値があります。

ヨーロッパの地図

「天気予報」のサンプルでは、ベクトル化されたヨーロッパ地図も使用しています。これにより、特定の国を強調したいときに地図をズームインするといった効果を簡単に作成できます。さらに、各国が個別のサブシェイプであるため、それぞれに異なる塗りつぶし色や線色を個別に適用することができます。

地図をクリックすると、その国が拡大表示されます。拡大により、その国の形状がウィンドウいっぱいに表示されるようスケールが調整され、塗りつぶしの色もわずかに濃くなります。

国名のラベル

国をズームインすると、その国名がその国の形状全体に表示されます。このラベルも、文字列をレンダリング可能な形状に変換する「PathText 」コンポーネントタイプを使用し、QtQuick.Shapes で作成されています。

これは、Qt Quick でテキストラベルを作成する一般的な方法ではありません。ほとんどの場合、Text 要素を使用するのが最も効率的で便利なアプローチです。しかし、QtQuick.Shapes では、通常のText 要素ではサポートされていない特定の可視化効果がサポートされています。グラデーション塗りつぶしはそのような効果の一つです。

                        ShapePath {
                            strokeColor:  "transparent"
                            strokeWidth: 1
                            joinStyle: ShapePath.RoundJoin
                            fillRule: ShapePath.WindingFill

                            fillGradient: RadialGradient {
                                centerX: textShape.width / 2
                                centerY: textShape.height / 2
                                centerRadius: textShape.width / 2
                                focalX: centerX; focalY: centerY
                                GradientStop { position: 0; color: "#b0ab9d7f" }
                                GradientStop { position: 1; color: "#5cab9d7f" }
                            }
                            PathText {
                                id: textPath
                                text: textLayer.label
                                font.family: workSansRegular.font.family
                                font.pixelSize: 64
                            }
                        }

これを説明するために、「天気予報」のサンプルでは、国名のラベルの不透明度に微妙な放射状グラデーションを適用し、端の部分で地図に溶け込んでいるように見せています。

さまざまな種類のレンダラー

「天気予報」のサンプルでは、QtQuick.Shapes のさまざまなユースケースが示されています。さらに、このサンプルを通じて、モジュールがサポートする各レンダラーの長所と短所を確認することもできます。

左上隅の歯車アイコンをクリックして設定パネルを開くと、ラスタライズに関するさまざまなアプローチを選択できます。

QtQuick.Shapes preferredRendererType は2種類のレンダラーをサポートしており、 プロパティを使用して選択できます。この例で推奨されるレンダラーは です。これは、ハードウェアアクセラレーションによる曲線描画と組み込みのアンチエイリアシングをサポートしています。 ではデフォルトのレンダラーではありませんが、この例では起動時に自動的に選択されます。CurveRenderer QtQuick.Shapes

Qt Quick Shapes のデフォルトのレンダラーはGeometryRenderer です。これは、図形の曲線を非常に短い直線に平坦化し、図形をポリゴンとして描画します。図形の再描画はCurveRenderer よりも効率的ですが、特定のスケールでは、曲線が直線で近似されていることが目立つようになります。

さらに、GeometryRenderer はアンチエイリアシングに対応していないため、通常はこれを使用する際にマルチサンプリングを有効にする必要があります。これは、シェイプをレイヤーにレンダリングし、それらのレイヤーでマルチサンプリングを有効にすることで実現できます。 このモードでは図形をオフスクリーンバッファにレンダリングするため、グラフィックメモリをさらに消費するほか、図形ごとに追加のレンダリングパスが必要となります。

        layer.enabled: msaaCheckBox.checked
        layer.samples: 4

設定パネルには、GeometryRenderer を 4 倍マルチサンプリングと組み合わせて使用するオプションも用意されており、これにより、CurveRenderer の組み込みアンチエイリアシングとの品質比較が可能になります。

例の動作

サンプルを実行するには、以下の手順に従ってください。

• Qt Creator

  Welcome モードを開き、Examples からサンプルを選択します。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル: ビルドと実行」を参照してください。

code.qt.io のサンプルプロジェクト