Qt 4.6に関する連載の最終回は、グラフィックスイフェクトについての説明です。地味な機能ですが、気の利いたユーザインターフェースを作るのに便利な機能です。
グラフィックスイフェクトを用いたサンプル
Qtのインストール先のexamples/effectsにグラフィックスイフェクトを用いたサンプルが3つ用意されています。
アプリケーションピッカーでは、アプリケーションのアイコンを輪状に表示させ、矢印キー操作でアイコンを回転させています。奥にあるアイコンほどぼかしがかかったようにして、カレントのアイコンをわかりやすく見せるようにしています。
イフェクト付きポップアップメッセージでは、メッセージが表示されるときには、背景をアニメーションをかけながら緑色に色づけをして、メッセージが目立つようにしています。
ライティングとシャドーでは、回転する光源が作る影をアニメーションで表示しています。
グラフィックスイフェクトのクラス
図1は、グラフィックスイフェクトに用意されているクラスです。主要なクラスの機能概要は、表1のようになります。
表1 グラフィックスイフェクトのクラス名と機能の概要
クラス名 | 機能概要 |
QGraphicsEffect | グラフィックスイフェクト機能の純粋仮想クラス。 |
QGraphicsBlurEffect | ぼかし効果用グラフィックスイフェクト |
QGraphicsColorizeEffect | 色付け効果用グラフィックスイフェクト |
QGraphicsDropShadowEffect | 影付け効果用グラフィックスイフェクト |
QGraphicsOpacityEffect | 半透明効果用グラフィックスイフェクト |
グラフィックスイフェクトは、上表にあるように、ぼかし、色付け、影付け、半透明化などの効果をグラフィックスアイテム(QGraphicsItem)とウィジェット(QWidget)に付加する機能です。つまり、通常の描画にこれらを適用して、その結果が表示されます。
グラフィックスイフェクトの使い方は以下の2ステップです。使い方はとても簡単で、うまく使えばよいインターフェースを作れます。
①グラフィックスイフェクトのインスタンスを生成し、必要に応じてプロパティを設定する。
グラフィックスイフェクトに関連する主なプロパティは表2の通りです。
表2 グラフィックスイフェクト関連のプロパティ
グラフィックスイフェクト | プロパティ | 説明 |
QGraphicsBlurEffect | blurRadius: qreal | ぼかし半径。デフォルトは5ピクセル。 |
QGraphicsColorizeEffect | color: QColor | 色付けの色。デフォルトはQColor(0, 0, 192)。 |
strength: qreal | イフェクトの強度。1.0で完全着色、0.0で無着色。デフォルトは1.0。 |
QGraphicsDropShadowEffect | blurRadius: qreal | 影のぼかし半径。デフォルトは1ピクセル。 |
color: QColor | 影の色。デフォルトはQColor(63, 63, 63, 180)。 |
QGraphicsOpacityEffect | opacity: qreal | 不透明度。デフォルトは0.7。 |
②グラフィックスアイテムかウィジェットにグラフィックスイフェクトを設定する。
以下のメソッドを用います。設定したグラフィックスイフェクトのオーナーは、設定先のオブジェクトになります。
これらのメソッドでの設定後にグラフィックスイフェクトのプロパティの変更をすれば、表示にすぐに適用されます。また、enabled プロパフィで、グラフィックスイフェクトを設定したままで、有効無効を切替えられます。
今回紹介するアニメーションプログラムのソースリストはこちらからダウンロードしてください。
グラフィックスアイテムへのぼかし効果の適用
ぼかし効果をどのようにして、グラフィックスアイテムへの適用するかを説明します。ぼかし付きが図2、ぼかしなしは図3です。
31行目でグラフィックスアイテムを生成しています。このグラフィックスアイテムにグラフィックスイフェクトを設定します。
ぼかし効果を付けるためにQGraphicsBlurEffectのインスタンスを生成し、ぼかし半径を乱数設定しています。
ウィジェットへの影付け効果の適用
ウィジェットにもグラフィックスイフェクトを付けられ、影を付けると図4のようになります。
まず、影を付けるためにQGraphicsDropShadowEffectのインスタンスを生成します。影のぼかし半径を12ピクセル、影のオフセットを6ピクセルずつ、濃いめの灰色の影を付けています。
25行目でウィジェットにsetGraphicsEffectで、グラフィックスイフェクトを設定しています。このように、グラフィックスイフェクトを使うのはとても簡単です。
Mac OS Xではウィジェットには、どのグラフィックスイフェクトも適用できないというバグがあり、このサンプルコードを動かしてもグラフィックスイフェクトは無効です。
グラフィックスイフェクトのアニメーション
グラフィックスイフェクトのプロパティをアニメーションすれば、各効果が段階的に適用されるようなアニメーション効果を得られます。色付け効果にアニメーションを適用してみましょう。次の動画は第3回「Qt 4.6のアニメーションフレームワーク[後編]」で用いた「グラフィックスビューのアイテムのアニメーション」に、グラフィックスイフェクトのアニメーションを追加したサンプルです。黄色いボールが移動しながら段々と赤くなって行きます。
59行目で、今度は、色付けのためにQGraphicsColorizeEffectのインスタンスを生成しています。薄い赤色が付くように設定していますが、strength プロパティを0.0にしているので、このグラフィックスイフェクトを適用しても赤色にはならず、元々の黄色のままとなります。
yellowBallItemのposとcolorizeEffectのstrengthの各プロパティを並列にアニメーションをすることにします。
posのアニメーションは、並列アニメーションに入れるようにする他は今まで通りです。
strengthのアニメーションは、0.0から1.0に変わるようにしています。このようにすれば、薄い黄色から薄い赤に変わるようにアニメーションが行われます。
おわりに
2009 年末から半年以上に渡って続いた Qt 4.6 関連の連載も今回で一区切りです。しばらく間を置いて、次はQt 4.7のリリース情報やQt 4.7で最も期待されている機能のQMLについて連載をする予定です。