asaのブログ

プログラミングの勉強まとめ

Qt チュートリアル7(画像表示)

 前回作成したペイントソフトの機能を見ていきます。先に結論から入ると分かり良いと思いますので示しておきます。

 

 実装の概要

 Qtを使ってMVCモデルに沿って画像の読み込みを実装しています。Viewであるopenメソッドは単にユーザーからの入力を受け取るだけで、openImageメソッドがコントローラー役、実際に描画を行うのはモデルであるresizeImageメソッドです。

 

 画像の表示に関連するクラスは

  1. QFileDialog
  2. QImge
  3. QSize
  4. QPainter

が使われています。

 

 ヘッダー

 まずはヘッダーファイルを見て全体を把握します。

gist145520b5c26241b2dac6c2d1cff68ff1

 

 MainWindow( )やcloseEvent( )などは問題ないと思いますので、まずはopen( )をみます。長くなるので後でsave( )、penColor( )、penWidth( )の各スロット、maybeSave( )、saveFile( )を見ていきます。

 

 openスロット

gist1dd8daa9a42d71487e5bf44c6ef26a96

 ファイルダイアログを表示して、開くファイルのファイル名を取得します。QFileDialogクラスにはstaticなメンバ関数としてgetOpenFileNameやgetSaveFileNameが存在します。いずれも戻り値はQString型となっています。

 getOpenFileName関数は全部で6つの引数を持ちます。特に重要なのは下の引数です。

  • caption・・・直訳の通り表題のこと。ダイアログのタイトルです。
  • dir・・・パスです。currentPath()でアプリの存在する絶対パスを返します
  • filter・・・表示するファイルにフィルターをかけます。jpgだけを表示する等。
  • options・・・ダイアログの挙動を設定します。

 こうしてダイアログから取得したfileNameが空でなければRenderAreaのOpenImage関数を呼び出します。

 FileDialogクラス、QDirクラスについては下のリンクを参照して下さい。

 

 QFileDialog Class | Qt Widgets 5.9

 QDir Class | Qt 4.8

 

 画像の表示

 画像の表示に絡むメソッドはopenImageメソッドとresizeImageメソッドの2つです。

まずopenImageメソッドから見ていきます。

gistaf7305207a65cf9d97a51a4dc48c3966

 読み込んだ画像を保持するオブジェクトとしてQImageクラスのオブジェクトを用意します。QImageクラスにはloadメソッドという画像をロードするメソッドがあります。このメソッドに先ほど取得したfileNameを渡して画像を読み込みます。

 

 QImageクラスのsizeメソッドを使って画像の高さ、幅を取得します。得られた高さと幅の内大きいもののサイズをexpandToメソッドで取得し、newSizeというQsizeオブジェクトに流します。

 

 後述のresizeImageメソッドに読み込んだ画像と得られたサイズを渡します。renderAreaが持つプライベートオブジェクトであるimageを読み込んだ画像に変更し、変更状態を変更なしとするためfalseに変えています。最後にupdateで描画して真を返します。

 

 ちなみにQImageクラスにはおもしろいメソッドがたくさんあるので順次使ってみたいと思います。

 

 次にresizeImageメソッドを見ます。7行目辺りからが大事で、読み込んだ画像を表示するのにQPainterを使用しています。実はQImageクラスはQWidgetとと同じようにQPaintDeviceを継承しているのでQPainterで描画ができるのです。

 

 Qpainterで画像を表示するにはdrawImageメソッドを使います。drawImageメソッドの基本的な使い方はターゲットとなる領域(QRect)、イメージ、ソースとなる領域ですが、drawImageメソッドには多数のオーバーライドされた関数があり、今回のように指定されたポイントに画像を描きこむこともできます。

gist885f98d790a9e779d9ccb3e029a7e932