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

此篇文章的範例程式碼 github

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

之前內容的重點複習 (前情提要)

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

https://www.wongwonggoods.com/python/pyqt5-5/

設計我們的 UI

接下來我們要設計一個偵測滑鼠指示顏色的小工具
我們針對顏色設計一下欄位：

• self.text_pos：顯示位置用
• self.text_rgb：顯示 RGB 用
• self.text_hex：顯示 HEX 用

轉換 day24.ui -> UI.py

pyuic5 -x day24.ui -o UI.py

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

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

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

python UI.py

設計我們的 controller

這次我們的 controller 有三個主要的新功能

• QTimer：負責更新頻率
• QCursor：取得現在滑鼠座標位置
• QApplication：取得現在螢幕的截圖

QTimer：負責更新頻率

為了避免我們的程式吃光我們電腦的所有資源，
我們用更新時間加以限制，不需要到幾乎無時無刻都在更新，
以「20ms (0.02 秒)」的頻率更新畫面，基本上人體就已經感覺不出差別了，
而且也比較省電腦資源。而上述的功能可以使用 QTimer 來實現。

def setup_control(self):
        self.ui.label.setText("")
        timer = QTimer(self)
        timer.timeout.connect(self.get_current_cursor_color)
        timer.start(20)

我們在 setup_control 進行這樣的設定，另外我們想把剛剛 Color 那段字消掉，
只留下顏色就好，於是我們補上一行 self.ui.label.setText("")

QCursor：取得現在滑鼠座標位置、 QApplication：取得現在螢幕的截圖

QCursor 可以幫助我們取得現在滑鼠的座標，
而透過 QApplication 可以幫助我們取得現在螢幕的截圖。

def get_current_cursor_color(self):
        x = QCursor.pos().x()
        y = QCursor.pos().y()
        self.ui.text_pos.setText(f"X:{x:^4d} Y:{y:^4d}")
        pixmap = QApplication.primaryScreen().grabWindow(
            QApplication.desktop().winId(), x, y, 1, 1)
        image = pixmap.toImage()
        color = QColor(image.pixel(0, 0))
        self.set_label_color(color)

set_label_color() 設定顏色與相關顏色資訊

這部分是拿昨天我們做的顏色選擇器來改的，
主要功能都相同，我們把昨天 print 顯示的字串，
現在改成直接顯示在 textEdit 裡面。

傳進來的資料型態都是 Qcolor，
這邊簡單分析一下，
我們可以透過 color.red(), color.green(), color.blue() 取得 RGB 的 0~255 的值，
使用 color.name() 取得顏色的 hex 值。

def set_label_color(self, color):
        r, g, b = color.red(), color.green(), color.blue()        
        strRGB = (f"{r:^3d}, {g:^3d}, {b:^3d}")

        self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))
        self.ui.text_rgb.setText(f"({strRGB})")
        self.ui.text_hex.setText(color.name().upper())

更符合使用者的設計：視窗永久置頂

這邊我們拿 【PyQt5】Day 22 – PyQt 視窗的個性化/屬性控制 setWindowFlags，禁止放大縮小、永遠顯示於最上層/最下層 的 setWindowFlags 內容來應用，

我們只允許「縮小與關閉」跟「永遠讓視窗在最上層」。
我們去新增 UI.py 如下：

(我們這次選擇的是 Form 不是 MainWindow，需要稍微修改一下)

# 只有縮小/關閉 (取消放大)
# 視窗永遠在最上層，適合互動性高的程式
Form.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowCloseButtonHint| Qt.WindowStaysOnTopHint)

測試結果

總之就是可以自動偵測滑鼠目前所指位置的顏色，並顯示出來。

Reference

• Python3與PyQt5編程示例：實現顏色拾取器小工具 原文網址：https://kknews.cc/code/gpkapl9.html

★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節，閱讀起來更流暢)：【PyQt5】Day 24 project / 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖