看完這篇文章你會得到的成果圖
前言
我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。
【PyQt5】Day 5 – 開始來設計我們的 controller.py,改以「程式角度」來說明如何建立 PyQt 的系統
此篇文章的範例程式碼 github
https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day15_image_loader
UI 設計部份 (UI.py)
我們今天要把 Day 10 的讀檔功能 、Day 14 的滑條功能 ,
整合進 Day 13 的最終成果 當中。
- 因此我們會從 Day 13 接下去改後續的功能。
我設計的介面如同上圖,
部份想法如下:
- 除了 zoom in, zoom out 可縮放圖片大小之外,也可用滑條改變,我預期
- 50 -> 100%
- 0 -> 10%
- 100 -> 1000%
- 推算公式可以得到 y = 10^((x-50)/50)
推算公式的過程,我們把所有數值先正規化到 -1~1 間,就會很好推公式了
我們把 10% -> 0.1,100% -> 1,1000% -> 10
可參考一下的表,就是我們正規化後反推公式的過程。
最後可得上方公式 y = 10^((x-50)/50)
progress bar 正規化 | ||
---|---|---|
0 | 50 | 100 |
-50 | 0 | 50 |
-1 | 0 | 1 |
ratio 正規化 | ||
10% | 100% | 1000% |
10^-1 | 10^0 | 10^1 |
-1 | 0 | 1 |
轉換成 UI.py
一樣的編譯指令,我們加上 -x (也可不加),
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。
轉換 day15.ui -> UI.py
pyuic5 -x day15.ui -o UI.py
執行看看 UI.py 畫面是否如同我們想像
一樣,這程式只有介面 (視覺上的呈現),沒有任何互動功能
- 看看我們製作出來