使用 Qt 來顯示圖片

使用 Qt 來顯示圖片

前言

  最近在 Qt 中顯示圖片，但發現工具箱裡的 UI 似乎沒有顯示圖片 widget ，在此把學習的過程做個紀錄。

內容

    先到 [ GitLab ] HelloQt 下載範例，這次應用的專案路徑
(HelloQt' directory)/Label/ShowImage，在 Qt Creator 開啟設計介面會看到以下

範例的設計介面

Qt 的顯示圖片 widget 是 Label ，圖中左側為其位置，這個設計有一些不直覺， Label 通常是顯示字的 widget ，但在 Qt 它兩個都可以用，如果需要看如何顯示字可以參考 (HelloQt' directory)/Label/Basic 。範例執行結果如下

範例的執行結果

範例的結果會顯示3張圖片，左側的圖片是在設計介面設定來自資源檔的圖片，左下則是用程式設定來自資源檔的圖片，而右上是直接用程式讀取檔案系統的圖片。

  就圖片的來源看有兩種，一是從資源檔，另一個則是檔案系統，檔案系統就是常見的讀取圖片的方法，直接用路徑開啟檔案後顯示圖片。資源檔又是什麼呢?資源檔是 Qt 自帶的打包資料手段，讀取資源的方法有點特別之後會說明。

  如果要為專案新增資源檔可以參考下圖

新增資源檔

資源檔需要命名，可以依據自己的喜好命名，加入後可以在專案瀏覽器裡看到它，如下圖

資源檔在專案瀏覽器的樣子

增加完資源檔後就來學著編輯資源檔的檔案，在專案瀏覽器的資源檔點擊右鍵，選擇"Open in Editor"，就會開啟編輯介面，如下圖

開啟資源檔的編輯器

編輯器會看到下圖

資源檔的編輯介面

資源檔的編輯看起來會像是編輯檔案系統，但它不會真正在檔案系統產生檔案，程式要讀取指定資源時可以透過這個虛擬的檔案路徑來指定要讀的資源，"Prefix"可以想像是虛擬資料夾，"Add Files" 就是增加虛擬檔案，增加時會要求指定檔案系統的檔案來源，"移除"就如同字面上的意思就是刪除。範例的虛擬檔案來源在該專案之下，如下圖

來源檔案的位置

如果要讓虛擬檔案與來源檔案的名稱不同時可以更改"別名"這個屬性。

  資源檔編輯好後，如何在編輯介面指定圖片呢?如下圖

在編輯器指定圖片

就像之前所說資源來源有兩種，這裡選擇"資源"，就可以看到下圖

選擇資源檔的檔案

選擇完後就可以在編輯器看到圖片的顯示。

  在程式控制方面，看到 MainWindow::MainWindow() ，程式碼如下

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
  ui->setupUi(this);
  //
  QPixmap* pPixMap=new QPixmap( "../Label_ShowImage/MyDirectory/MyImage.png" );
  ui->label1->setPixmap( *pPixMap );
  //
  QPixmap* pPixMap1=new QPixmap( ":/resImage/MyImage1.png" );
  ui->label2->setPixmap( *pPixMap1 );
  //
}

"label1"就是右上角的圖，會透過 QPixmap 這個 class 來讀取圖片，這裡讀取的檔案系統的路徑，這裡會從工作目錄透過".."來返回專案目錄，可以在專案目錄下找到這個檔案。使用檔案路徑作為讀取檔案要考慮到工作目錄的問題，如果有修改過工作目錄的話這個路徑也要跟著修改。接著來看"label2"，也就是左下的圖，讀取一樣透過 QPixmap  來讀取，但路徑來自資源檔的虛擬路徑，以":/"開頭做為區分，之後的路徑依據在資源檔的編輯來指定。

參考資料

[ doc.qt.io ] QLabel Class

相關文章與資料

[ GitLab ] HelloQt