看完这篇文章你会得到的成果图

此篇文章的范例程序码 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 取得截图