Qtに関する覚え書き［画像関連］

画像の使い方

画像として使用

ラベルにpixmapを表示します。

label->setPixmap(pixmap);

データpixmap取得例 (QPixmap pixmap)
標準Pixmap pixmap = style()->standardPixmap(QStyle::SP_MediaPlay);
標準Cursor QCursor csr = Qt::WaitCursor;
if (! csr.pixmap().isNull()) pixmap = csr.pixmap();
リソース pixmap = QPixmap(":/images/mouse01.png");
ファイル pixmap = QPixmap("C:/temp/testimage.ico");
アイコン pixmap = icon.pixmap(icon.availableSizes().last());
pixmap = icon.pixmap(32, 32);
イメージ pixmap.convertFromImage(image);
※アイコンは複数のサイズを持っているのでサイズを指定します。
※最大サイズはlast()、最小サイズはfirst()で取り出します。

アイコンとして使用

ウインドウのタイトルバーのアイコンにiconをセットします。

setWindowIcon(icon);

データicon取得例 (QIcon icon)
標準Pixmap icon = style()->standardIcon(QStyle::SP_MediaPlay);
標準Cursor QCursor csr = Qt::WaitCursor;
if (! csr.pixmap().isNull()) icon = QIcon(QPixmap(csr.pixmap()));
リソース icon = QIcon(":/images/mouse01.png");
ファイル icon = QIcon("C:/temp/testimage.ico");

カーソルとして使用

ラベル上にカーソルがある時はcursorを表示します。

label->setCursor(cursor);

データicon取得例 (QIcon icon)
標準Pixmap cursor = QCursor(style()->standardPixmap(QStyle::SP_MediaPlay));
標準Cursor cursor = Qt::WaitCursor;
リソース cursor = QCursor(QPixmap(":/images/mouse01.png"));
ファイル cursor = QCursor(QPixmap("C:/temp/testimage.ico"));

画像の伸縮

ラベルの画像

ラベルはサイズ変更に自動的に対応します。
右がtrueの場合です。縦横比を無視してサイズいっぱいに画像が表示されます。

プッシュボタンの画像

アイコンとテキストが表示できます。 アイコンの位置は固定でテキストの左側になります。
プッシュボタンのサイズが変わってもアイコンの大きさは変わりません。 アイコンのサイズは指定できます。
アイコンのサイズを指定しないと画像のサイズで表示されます。

ツールボタンの画像

アイコンとテキストが表示できます。ツールボタンは常に固定サイズになります。
アイコンの位置はテキストの左か下を指定できます。アイコンのサイズも指定できます。
アイコンのサイズを指定しないと画像のサイズで表示されます。
プッシュボタンと違って、スタイルを指定しないとアイコンだけ表示されます。

■ボタンスタイル定義［enum Qt::ToolButtonStyle］
定義値説明
ToolButtonIconOnly0アイコンのみ
ToolButtonTextOnly1テキストのみ
ToolButtonTextBesideIcon2アイコンの横にテキスト
ToolButtonTextUnderIcon3アイコンの下にテキスト
ToolButtonFollowStyle4スタイルに従う

※ツールボタンはレイアウトの伸縮に影響されずに同じサイズを保持します。

画像の伸縮

Pixmapは縦横比を保ったままサイズ変更できます。

テスト用のラベルとPixmapを作ります。

ラベルにPixmapをセットする４つの方法です。

何も指定しないと画像サイズになるので、右と下に余白ができます。
縦と横のサイズを指定すると縦横比が崩れた画像になります。
高さを指定すると右に余白ができ、幅を指定すると下の部分が切れます。

背景画像

ラベルの背景画像

スタイルシートで背景の色と画像のタイル表示ができます。
※テキスト文字や表示位置はsetTextやsetAlignmentで設定します。

no-repeatを省略するとタイル表示になります。background-sizeは指定できないようです。

ボックスタイプのウィジェットは大体同じように背景が設定できるようです。
※スタイルシート関連は「装飾とスタイル」参照。

境界画像

フレーム画像

背景画像ではなく境界画像を指定するとサイズ変更に対応した枠の表示ができます。
一番左の画像がborder.pngです。黒い部分が透過の画像だと背景色と背景画像が見えます。
repeatを指定しないと引き伸ばした形になります。

元の画像を９分割して組み合わせることで境界線の長さの変化に対応しています。
緑の部分がborder-widthで指定した27pxの境界です。
②④⑥⑧の画像はタイプに従って引き伸ばしたりタイル状に敷き詰めたりします。

border-imageの幅27を54に変更すると、左上・右上・左下・右下の四隅は次のようになります。

①＋②＋④＋⑤、②＋③＋⑤＋⑥、④＋⑤＋⑦＋⑧、⑤＋⑥＋⑧＋⑨

上下左右の境界画像は、②④⑥⑧に対応する部分が足りなくなるので表示されません。

border-imageは最初に画像データを指定する必要があるようです。 他はどちらが先でも大丈夫です。
■境界画像(border-image)の設定例
項目初期値設定例説明
画像データ
(image-source)		none url(:/images/border.png)
url(C:/temp/frame.gif)		リソース画像
画像ファイル
幅と高さ
(image-width)		1 20
2em 5% 3		上下左右20px
上2em、左右5%、下3px
タイプ
(image-repeat)		stretch round
repeat stretch		縦横ともに均等タイル
横方向はタイル、縦方向は伸縮
※image-widthの指定方法はCSSのmarginプロパティと同様です。

タイプはタイル(repeat)・均等タイル(round)・伸縮(stretch)の３種類あります。

例えば②の場合、repeatは単純に②を並べるので途中で画像が切れてしまうことがあります。
roundは②を何個表示できるか計算し、均等になるように②の幅を伸縮します。端数は四捨五入です。

プッシュボタンのフレーム

背景としてフレーム画像を指定すると、ボタンのサイズ変更に対応できません。

境界としてフレーム画像を指定すれば、ボタンのサイズ変更に対応できます。

XPM形式の画像

XPMデータ作成

XPM形式のデータテーブルから、Pixmapを作ることができます。
一時的に小さい画像を使いたい場合は便利かもしれません。

XPM形式では１行目にデータの情報を記述します。

幅　高さ　色数　１ドットの桁数　ホットスポットXY座標

２行目から、文字と対応する色の指定を１色１行で記述します。
その後にドット画を記述します。

XPM形式のデータテーブルの例です。
※画像サイズは16×16で１ドットは半角１桁で表します。
※使用する色は5色で、スペースが透明(None)、Aが緑、aが青、#が赤、3が黒です。
※ホットスポットのXY座標は(7,7)です。これは省略できます。

XPMデータの使い方

XPM形式のデータから、プッシュボタンのアイコンとカーソルを設定します。

標準の画像

標準Pixmap

■標準Pixmap定義［enum QStyle::StandardPixmap］
定義値 画像説明
SP_TitleBarMenuButton0 タイトルバーのメニューボタン
SP_TitleBarMinButton1 タイトルバーの最小化ボタン
SP_TitleBarMaxButton2 タイトルバーの最大化ボタン
SP_TitleBarCloseButton3 タイトルバーの閉じるボタン
SP_TitleBarNormalButton4 タイトルバーの通常ボタン
SP_TitleBarShadeButton5 タイトルバーの隠すボタン
SP_TitleBarUnshadeButton6 タイトルバーの現わすボタン
SP_TitleBarContextHelpButton7 タイトルバーのヘルプボタン
SP_DockWidgetCloseButton8 ドックウインドウの閉じるボタン
SP_MessageBoxInformation9 インフォメーション
SP_MessageBoxWarning10 警告
SP_MessageBoxCritical11 致命的エラー
SP_MessageBoxQuestion12 質問
SP_DesktopIcon13 デスクトップ
SP_TrashIcon14 ゴミ箱
SP_ComputerIcon15 コンピューター
SP_DriveFDIcon16 フロッピーディスク
SP_DriveHDIcon17 ハードディスクドライブ
SP_DriveCDIcon18 ＣＤ
SP_DriveDVDIcon19 ＤＶＤ
SP_DriveNetIcon20 ネットワーク
SP_DirOpenIcon21 開いているディレクトリ
SP_DirClosedIcon22 閉じているディレクトリ
SP_DirLinkIcon23 リンクディレクトリ
SP_DirLinkOpenIcon24リンクオープンディレクトリ
SP_FileIcon25 ファイル
SP_FileLinkIcon26 リンクファイル
SP_ToolBarHorizontalExtensionButton27 水平ツールバー拡張ボタン
SP_ToolBarVerticalExtensionButton28 垂直ツールバー拡張ボタン
SP_FileDialogStart29 ファイルダイアログの開始
SP_FileDialogEnd30 ファイルダイアログの終了
SP_FileDialogToParent31 ファイルダイアログの親ディレクトリ
SP_FileDialogNewFolder32 ファイルダイアログのフォルダ新規作成
SP_FileDialogDetailedView33 ファイルダイアログの詳細ビュー
SP_FileDialogInfoView34 ファイルダイアログのファイル情報
SP_FileDialogContentsView35 ファイルダイアログのコンテンツ一覧
SP_FileDialogListView36 ファイルダイアログのリストビュー
SP_FileDialogBack37 ファイルダイアログの戻り矢印
SP_DirIcon38 ディレクトリ
SP_DialogOkButton39 (QDialogButtonBox)標準OKボタン
SP_DialogCancelButton40 (QDialogButtonBox)標準Cancelボタン
SP_DialogHelpButton41 (QDialogButtonBox)標準Helpボタン
SP_DialogOpenButton42 (QDialogButtonBox)標準Openボタン
SP_DialogSaveButton43 (QDialogButtonBox)標準Saveボタン
SP_DialogCloseButton44 (QDialogButtonBox)標準Closeボタン
SP_DialogApplyButton45 (QDialogButtonBox)標準Applyボタン
SP_DialogResetButton46 (QDialogButtonBox)標準Resetボタン
SP_DialogDiscardButton47 (QDialogButtonBox)標準Discardボタン
SP_DialogYesButton48 (QDialogButtonBox)標準Yesボタン
SP_DialogNoButton49 (QDialogButtonBox)標準Noボタン
SP_ArrowUp50 上矢印
SP_ArrowDown51 下矢印
SP_ArrowLeft52 左矢印
SP_ArrowRight53 右矢印
SP_ArrowBack54 戻る
SP_ArrowForward55 進む
SP_DirHomeIcon56 ホームディレクトリ
SP_CommandLink57 Vistaスタイルのコマンドリンクグリフ
SP_VistaShield58 Vista UACプロンプト(Vista以外NULL)
SP_BrowserReload59 現在のページの再ロード
SP_BrowserStop60 ページのロードを停止
SP_MediaPlay61 メディア再生
SP_MediaStop62 メディア停止
SP_MediaPause63 メディア一時停止
SP_MediaSkipForward64 メディア前方スキップ
SP_MediaSkipBackward65 メディア後方スキップ
SP_MediaSeekForward66 メディア前方へ
SP_MediaSeekBackward67 メディア後方へ
SP_MediaVolume68 メディア音声出力中
SP_MediaVolumeMuted69 メディア消音中
SP_LineEditClearButton70 QLineEditの標準クリア(Qt5.2以降)
※style()はQApplicationクラスのメンバーです。

標準Cursor

■標準Cursor定義［enum Qt::CursorShape］
定義値 画像カーソル名
ArrowCursor0 left_ptr
UpArrowCursor1 up_arrow
CrossCursor2 cross
WaitCursor3 wait
IBeamCursor4 ibeam
SizeVerCursor5 size_ver
SizeHorCursor6 size_hor
SizeBDiagCursor7 size_bdiag
SizeFDiagCursor8 size_fdiag
SizeAllCursor9 size_all
BlankCursor10(空白)
SplitVCursor11 split_v
SplitHCursor12 split_h
PointingHandCursor13 pointing_hand
ForbiddenCursor14 forbidden
WhatsThisCursor15 whats_this
BusyCursor16 left_ptr_watch
OpenHandCursor17 openhand
CloseHandCursor18 closehand
DragMoveCursor19 dnd_move/move
DragCopyCursor20 dnd_copy/copy
DragLinkCursor21dnd_link/link
※標準CursorはOSに依存するため、Pixmapを取り出せません。
※画像ファイルや標準Pixmapから作ったカーソルは、Pixmapを取り出せます。

2016年12月

Copyright © 2016 dorafop All Rights Reserved.