iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Software Development

【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】系列 第 23

【沒錢買ps,PyQt自己寫】Day 23 - 使用系統內建的調色盤 QColorDialog,來替我們選擇顏色 QColor (Color Picker)

  • 分享至 

  • xImage
  •  

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

此篇文章的範例程式碼 github

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

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

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

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

系統內建的調色盤 QColorDialog

在 mac, windows, linux 上都會有系統預設的調色盤 QColorDialog,
隨著使用系統不同也會得到不同的調色盤。

而我們今天要藉由這個工具來幫助我們挑選顏色。

建立 UI

替 Qlabel 建立一個 border

我們修改 Qframe 的屬性

這樣我們就能建立一個明確的邊框

關於 Qframe 的屬性,可以參考這邊查詢

延伸閱讀:QFrame类
文內提供的參考圖:

轉換 day23.ui -> UI.py

pyuic5 -x day23.ui -o UI.py

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

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

  • 看看我們製作出來的介面
python UI.py

建立控制 controller.py

設定按鈕、顯示顏色

我們先將 label 內的文字設為 "QColorDialog",
然後連結 pushButton 至 set_label_color 這個 function

from PyQt5 import QtCore 
from PyQt5.QtWidgets import QMainWindow, QColorDialog

from UI import Ui_MainWindow

class MainWindow_controller(QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.label.setText("QColorDialog")
        self.ui.pushButton.clicked.connect(self.set_label_color)

在 set_label_color(),我們使用 QColorDialog

我們只要呼叫 QColorDialog.getColor(),就會呼叫系統內建的調色盤,
之後我們可以透過

  • print(color.name()):會得到 CSS 值 #ff5b87

  • print(color.red(), color.green(), color.blue()):會得到 RGB 值 (0~255) # 255 91 135

  • self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB)):直接設定背景顏色,需先轉換格式為 strRGB

def set_label_color(self):
    color = QColorDialog.getColor() # OpenColorDialog
    if color.isValid():
        print(color.name()) #ff5b87
        print(color.red(), color.green(), color.blue()) # 255 91 135

    r, g, b = color.red(), color.green(), color.blue()        
    strRGB = ('{:^3d}, {:^3d}, {:^3d}'.format(r, g, b))

    self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))

mac 上的 QColorDialog

  • 系統內建的顏色選擇器,已經做得非常精緻了

選擇好顏色後,填入結果

另外依照我們目前的寫法,我們也可以在 terminal 取得我們填色的 RGB 與 CSS,
之後我們可以使用這個值來繼續做顏色的操作。

Reference


★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節,閱讀起來更流暢):【PyQt5】Day 23 - 使用系統內建的調色盤 QColorDialog,來替我們選擇顏色 QColor (Color Picker)


上一篇
【沒錢買ps,PyQt自己寫】Day 22 - PyQt 視窗的個性化/屬性控制 setWindowFlags,禁止放大縮小、永遠顯示於最上層/最下層
下一篇
【沒錢買ps,PyQt自己寫】Day 24 - project / 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖
系列文
【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言