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/
在 mac, windows, linux 上都會有系統預設的調色盤 QColorDialog,
隨著使用系統不同也會得到不同的調色盤。
而我們今天要藉由這個工具來幫助我們挑選顏色。
我們修改 Qframe 的屬性
這樣我們就能建立一個明確的邊框
關於 Qframe 的屬性,可以參考這邊查詢
延伸閱讀:QFrame类
文內提供的參考圖:
pyuic5 -x day23.ui -o UI.py
一樣,這程式只有介面 (視覺上的呈現),沒有任何互動功能
python UI.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)
我們只要呼叫 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))
另外依照我們目前的寫法,我們也可以在 terminal 取得我們填色的 RGB 與 CSS,
之後我們可以使用這個值來繼續做顏色的操作。
★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節,閱讀起來更流暢):【PyQt5】Day 23 - 使用系統內建的調色盤 QColorDialog,來替我們選擇顏色 QColor (Color Picker)