Qt で画像をスライドさせる


はじめに

この記事は、Python でのプログラミング記事 PySide で画像をスライドさせる | DeVlog – 銀の翼で翔べ – を、C++ で改めて記事にしたものです。

Qt を使って、スライドショーでよく見られるような画像を縦・横にスライドさせて表示する方法について記述します。プロパティについてもふれます。

検証した環境は、Qt4.8 + Ubuntu(Xubuntu)13.04, Windows7 です。

メインウインドウにラベルを配置する

まず、アプリケーションの骨格を定義しておきます。メインのウインドウの中に、画像(hoge.jpg)を表示するラベルを配置してみます。(後でスライドさせるので、あまり大きくない hoge.jpg を用意してください。) また、13行目の setGeometry は、メインウインドウの大きさです。環境に合わせて適当な値にしてください。

画像を表示するラベルは、親をメインウインドウとして生成しました。

実行すると以下のようになります。
image

プロパティを扱う

ここで定義した “label” をスライドさせるには、アニメーションを利用します。Qt でアニメーションを実行するにはいくつかの方法がありますが、最もよく使われるのが プロパティ を使用した方法です。各 QObject クラスの持つ「プロパティ」を少しずつ変化させることでアニメーションを実現します。

Qt における「プロパティ」の実体は、いわゆる Setter/Getter です。リファレンスを見ると、各プロパティの解説中にアクセス関数(Setter/Getter)が示されています。プロパティを定義する場合には、Q_PROPERTY マクロを使用します。

アニメーションを定義する

さて、今回の目的の「スライド」は、QWidget の “pos” プロパティを変化させて実現できます。”pos” は、そのオブジェクトの左上隅の位置を保持する QPoint 型のプロパティです。

最初に、QPropertyAnimation オブジェクトを定義します。

「”label” オブジェクトの “pos” プロパティをアニメーション化します。」ということです。プロパティ名を文字列として渡します。
あとは、アニメーションにかける時間(msec)と、開始時/終了時の “pos” の値を定義します。

そして、最後にアニメーションを開始します。

上記、QPropertyAnimation オブジェクト an の一連の定義部分を、最初のアプリケーション骨格の window.show() の後に挿入すれば完成です。実行すると、この記事の最初に置いた動画のように動作します。

なお、本記事では QPropertyApplication オブジェクトを main 関数のローカル変数として定義しましたが、start() 関数の実行後アニメーションが終了するまで QPropertyApplication を保持しないとアニメーションが終了してしまいます。(まったく実行されないように見えることもあります。)オブジェクトのスコープについて十分に注意してください。

また、完全なソースをこちらに用意しました。

次回は、画像のフェードイン/フェードアウトについて記述します。

[参考にしたサイト]
The Property System | Documentation | Qt Project

[関連サイト]
junf/QtSamples – GitHub –

[関連記事]

  1. Qt で画像をフルスクリーン表示する | DeVlog – 銀の翼で翔べ –
  2. PySide で画像をスライドさせる | DeVlog – 銀の翼で翔べ –
  3. PySide で画像をフルスクリーン表示する | DeVlog – 銀の翼で翔べ –
  4. PySide で画像をフェードイン/フェードアウト | DeVlog – 銀の翼で翔べ –
  5. PySide でズームイン/ズームアウトを実現 | DeVlog – 銀の翼で翔べ –

メールアドレスが公開されることはありません。