看完這篇文章你會得到的成果圖

zoom in

zoom out

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day12_img_resize

以 Qlabel 在 PyQt 中顯示圖片

這篇是延續 Day 11 顯示圖片的後續開發，
在 day11 我們只是單純的顯示圖片，
但有碰到了「圖片解析度太大，無法完全顯示」的問題，
今天我們就要加入「zoom in」、「zoom out」的功能，來改善這個問題。

UI 設計部份 (UI.py)

以 Qlabel 作為圖片顯示

我們與之前一樣新增一個 Qlabel，文字可以先不用管他，
這個 Qlabel 是我們等等要作為顯示圖片使用，
因此我們記得要去修改圖片大小，以免顯示的範圍太小。

• 另外我們新增兩個按鈕，作為等等縮放圖片使用。

注意上圖中的圖片大小，另外變數名稱也建議修改。

讀者們可以開始自行設計自己的介面囉，以上為我的示範。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day12.ui -> UI.py

pyuic5 -x day12.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

• 看看我們製作出來的介面

python UI.py