Qt で画像をフルスクリーン表示する


はじめに

今回の記事は、Python でのプログラミング記事 PySide で画像をフルスクリーン表示する | DeVlog – 銀の翼で翔べ – を、C++ で改めて記事にしたものです。筆者自身の Qt に対する理解も以前よりは進んでいますので、内容には若干の違いがあります。(本記事を読むための Python の知識は不要です。)

本記事を書こうと思った経緯は、だいたい以下のようなものです。

最近、マルチプラットフォームのアプリケーションを作るために Python + PySide でプログラミングしていました。PySide は、マルチプラットフォームの GUI ライブラリ Qt を Python にバインディングしたパッケージです。

実際にプログラミングを始めてみると、PySide のリファレンスだけでは完結せず Qt のリファレンスやサンプルを参照することも多くなります。そんなことをしているうちに、ふと「C++ と Qt でプログラミングしてみても良いな」と思うようになりました。筆者は元々 C++ 大好き(DOS の頃からやってます)なんですが、ここ数年ほとんど触っていないのでリハビリも兼ねて C++ / Python 並列でやってみることにしました。当面は、以前に書いた Python の記事を C++ に置き換えてゆく予定です。

検証した環境は、Qt4.8 + Ubuntu(Xubuntu)13.04, Windows7 です。しばらくは、QtCreator(Qt の IDE) を使わずにやってみたいと思います。

画像を表示する

まず、Qt で画像を表示するコードを書いてみます。hoge.jpg という JPEG ファイルを表示させてみます。

利用する Qt クラス名のヘッダファイルをインクルードします。画像は、QPixmap オブジェクトに格納し、QLabel オブジェクトに setPixmap() でセットして show() を実行することで表示できます。「ラベル」というとテキスト表示用というイメージを持ってしまいますが、Qt ではテキストだけでなく画像の表示も QLabel で行います。

このコードを Linux でコンパイルするには、ソースの入ったディレクトリで以下のように 3つのコマンドを順番に実行します。

qmake がインストールされていない場合は、Ubuntu/Xubuntu では以下のようにしてインストールしてください。

Windows(Visual Studio) の場合、make の代わりに nmake を使います。パスを通しておきましょう。筆者の環境では、以下のようになっていました。

パスが通っていれば、以下のようにしてプロジェクトを構築できます。

1 行目は、vcvars32.bat を実行しています。各種パスを設定するために、コマンドプロンプトを開いたら最初に一回だけ実行する必要があります。nmake と同じフォルダにあります。

各コマンドは、以下の役割を果たします。

hoge.jpg を実行ファイルと同じディレクトリに置いて実行すると、以下のようにデスクトップ上にウインドウが表示されます。
normal2

ここでは、後にフルスクリーン表示させるため、大きめのサンプル画像(1920×1503)を使いました。そのため、画像のごく一部しか表示されていません。

フルスクリーンで表示する

8行目の show() メソッドを、showFullScreen() に変えることでフルスクリーン表示を実現できます。以下のように画面いっぱい(筆者の環境は 1920×1080)に表示されます。ウインドウのフレームもありません。
full2

ただし、フルスクリーン状態ではクローズボタンが表示されません。キーイベントを処理してフルスクリーンを解除できるようにする必要があるでしょう。(もし、何も手当せずにフルスクリーンにしてしまった場合は、ALT + TAB で別のタスクに切り替えればタスクバーからアプリケーションを閉じることができます。)

QLabel のキーイベントを取得する

QLabel 等の GUI の部品は QWidget を継承していて、キーイベントを処理する関数 keyPressEvent を持っています。QLabel を継承した Screen というクラスを定義し、keyPressEvent をオーバーライドして ESC キーを処理できるようにしてみましょう。まず、以下のヘッダファイルを作成します。

QObject の派生クラスを作成する場合は、いつでも上記のように Q_OBJECT マクロを必ず記述する必要があります。要注意ですね。

Screen::keyPressEvent は、以下のように定義できます。

ESC キーを押すと、最大表示/フルスクリーンが切り替わるようにしてみました。標準の表示状態に戻すには、showNormal() を呼び出している点に注意してください。

※注)もし、ヘッダファイルを使わず、単一の .cpp ファイルのみで作成する場合は、class Screen の宣言文の後に以下の一行を挿入する必要があります。これを入れないと、moc(メタオブジェクトコンパイラ)が実行されず vtable エラーが発生します。

なおヘッダファイルを使う場合は、qmake が自動的に moc を実行するよう Makefile を構成するので、上記インクルード文は不要です。ファイルの途中で include 文が出てくるのはあまり美しくないので、素直にヘッダファイルを使ったほうが良いでしょう。

この Screen クラスを QLabel の代わりに使って ESC キーに対応します。

フルスクリーン表示されている状態で ESC キーを押すと、以下のように最大表示になります。この状態なら、クローズボタンでプログラムを終了させることができます。
max2

表示位置の調整等は、QLabel のリファレンスを参照してください。
なお、完全なコードをこちらに用意しました。

短いコードですが、久々に C++ を触ると本当に簡単な事で戸惑いがありました…

[参考にしたサイト]
Qt をはじめよう! 第11回: QObject の派生クラスを作成しよう | Qt Japanese Blog

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

[関連記事]

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

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