項目 widget-area-1 尚未註冊或是沒有一個 view.php 檔案.
項目 widget-area-1 尚未註冊或是沒有一個 view.php 檔案.
項目 search-input 尚未註冊或是沒有一個 view.php 檔案.

【PyQt5】Day 15 / Project 與檔案功能整合,製作出可讀取圖片並可縮放的 UI 介面 (使用 PyQt + OpenCV)

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

前言

我們接下來的討論,會基於讀者已經先讀過我 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 正規化
050100
-50050
-101
ratio 正規化
10%100%1000%
10^-110^010^1
-101

轉換成 UI.py

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

轉換 day15.ui -> UI.py

pyuic5 -x day15.ui -o UI.py

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

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

  • 看看我們製作出來