φυβλαςのβλογ
phyblasのブログ



pyqt เบื้องต้น บทที่ ๖: การสร้างกรอบและขีดเส้น
เขียนเมื่อ 2021/08/08 09:38
แก้ไขล่าสุด 2021/09/28 16:42

ต่อจาก บทที่ ๕

ในบทนี้จะเป็นเรื่องของการสร้างเส้นกรอบล้อมรอบ widget ขึ้นมา




การสร้างกรอบ {QFrame .setFrameShape}

widget ที่สามารถวาดกรอบล้อมรอบได้คือ QFrame รวมถึง widget ที่รับทอดจากคลาส QFrame นี้ด้วย ซึ่งก็รวมไปถึง QLabel ซึ่งใช้ใส่ตัวหนังสือ ดังที่ได้อธิบายไปในบทที่ ๕

ในที่นี้ก็จะอธิบายโดยใช้ QLabel เป็นหลัก โดยจะแสดงการสร้างกรอบล้อมตัวหนังสือ

การสร้างกรอบล้อมทำได้โดยใช้ .setFrameShape โดยเมธอดนี้มีอยู่ใน widget ชนิด QLabel และรวมถึง QFrame ด้วย ดังนั้นถ้าหากต้องการสร้างข้อความตัวหนังสือที่มีกรอบล้อมก็ใช้ QLabel ได้

ตัวอย่าง
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QFrame

qAp = QApplication(sys.argv)
natang = QWidget()
khokhwam = QLabel('๑๒๓ 123\n๔๕๖ 456\n๗๘๙ 789',natang)
khokhwam.setFrameShape(QFrame.Box)
khokhwam.setGeometry(20,20,80,80)
natang.show()
qAp.exec_()

จะได้ข้อความที่มีกรอบล้อมแบบนี้



ในที่นี้สิ่งที่ใส่ลงไปใน .setFrameShape ก็คือ QFrame.Box ซึ่งนี่เป็นตัวแปรที่ QFrame เตรียมไว้เพื่อเป็นแฟล็กในการปรับรูปแบบของกรอบ

นอกจาก Box แล้วก็ยังมี Panel, WinPanel, StyledPanel เป็นต้น




การปรับรูปแบบเส้นกรอบ

ลองตั้งชนิดกรอบภายใน .setFrameShape เป็นรูปแบบอื่นๆแล้วเทียบดู
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QFrame

qAp = QApplication(sys.argv)
natang = QWidget()
k1 = QLabel('๑๒๓ 123',natang)
k1.setFrameShape(QFrame.Panel)
k1.setGeometry(20,20,80,30)

k2 = QLabel('๔๕๖ 456',natang)
k2.setFrameShape(QFrame.WinPanel)
k2.setGeometry(20,60,80,30)

k3 = QLabel('๗๘๙ 789',natang)
k3.setFrameShape(QFrame.StyledPanel)
k3.setGeometry(20,100,80,30)

natang.show()
qAp.exec_()

ก็จะได้กรอบลักษณะแบบนี้ออกมา



จริงๆแล้วจะเห็นว่า Box กับ Panel นั้นมีลักษณะเหมือนกัน ในขณะที่ WinPanel จะเป็นกรอบหนา และ StyledPanel เป็นกรอบบางๆดังที่เห็น

แต่ข้อแตกต่างระหว่าง Box กับ Panel จะสามารถเห็นได้ในกรณีที่ใส่เงาลงไปในกรอบ




การปรับเงาเส้นกรอบ {.setFrameShadow}

เราสามารถใส่เงาให้กับกรอบเพื่อที่จะปรับให้ดูสวยและมีมิติขึ้นมาได้ โดยใช้เมธอด .setFrameShadow ซึ่งรูปแบบของเงาก็มีแบบ Raised คือแบบยก กับแบบ Sunken คือแบบจม ลักษณะของเงายังต่างกันไปขึ้นอยู่กับรูปแบบของกรอบด้วย

ตัวอย่าง ลองสร้างกรอบแบบต่างๆที่มีเงาแบบต่างๆมาเปรียบเทียบ
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QFrame

qAp = QApplication(sys.argv)
natang = QWidget()
k1 = QLabel('๑๒',natang)
k1.setFrameShape(QFrame.Box)
k1.setFrameShadow(QFrame.Raised)
k1.setGeometry(20,20,40,30)

k2 = QLabel('12',natang)
k2.setFrameShape(QFrame.Box)
k2.setFrameShadow(QFrame.Sunken)
k2.setGeometry(70,20,40,30)

k3 = QLabel('๓๔',natang)
k3.setFrameShape(QFrame.Panel)
k3.setFrameShadow(QFrame.Raised)
k3.setGeometry(20,60,40,30)

k4 = QLabel('34',natang)
k4.setFrameShape(QFrame.Panel)
k4.setFrameShadow(QFrame.Sunken)
k4.setGeometry(70,60,40,30)

k5 = QLabel('๕๖',natang)
k5.setFrameShape(QFrame.WinPanel)
k5.setFrameShadow(QFrame.Raised)
k5.setGeometry(20,100,40,30)

k6 = QLabel('56',natang)
k6.setFrameShape(QFrame.WinPanel)
k6.setFrameShadow(QFrame.Sunken)
k6.setGeometry(70,100,40,30)

k7 = QLabel('๗๘',natang)
k7.setFrameShape(QFrame.StyledPanel)
k7.setFrameShadow(QFrame.Raised)
k7.setGeometry(20,140,40,30)

k8 = QLabel('78',natang)
k8.setFrameShape(QFrame.StyledPanel)
k8.setFrameShadow(QFrame.Sunken)
k8.setGeometry(70,140,40,30)

natang.show()
qAp.exec_()

จะได้ภาพนี้ออกมา ซึ่งทางซ้ายคือเงาแบบยก (Raised) ทางขวาคือแบบจม (Sunken) และไล่จากแถวบนสุดคือ Box, Panel, WinPanel และ StyledPanel ตามลำดับ



จะเห็นว่าข้อแตกต่างระหว่าง Box กับ Panel ก็คือ แบบ Box นั้นจะเหมือนมีกรอบนูนหรือยุบล้อม ในขณะที่ Panel จะเป็นเหมือนปุ่มที่นูนขึ้นหรือยุบลงทั้งแผง ซึ่งข้อแตกต่างนี้จะเห็นได้ชัดเมื่อมีการวาดเงา




การปรับความหนาของเส้น {.setLineWidth}

ความหนาของเส้นขอบสามารถปรับได้โดยเมธอด .setLineWidth โดยถ้าหากไม่ได้ตั้งค่าความหนาก็จะเท่ากับตั้งความหนาเป็น 0 ซึ่งก็จะได้เส้นกรอบบางมากดังในตัวอย่างที่ผ่านมา

เพียงแต่ว่ากรอบแบบ WinPanel กับ StyledPanel นั้นจะมีความหนาตายตัวอยู่แล้ว จึงไม่ได้รับผลจากการตั้งความหนาด้วย .setLineWidth นี้

ลองดูตัวอย่างเทียบความหนาต่างๆกันในกรณีที่ใช้ Box กับ Raised
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QFrame

qAp = QApplication(sys.argv)
natang = QWidget()
k1 = QLabel('br1',natang)
k1.setLineWidth(1)
k1.setFrameShape(QFrame.Box)
k1.setFrameShadow(QFrame.Raised)
k1.setGeometry(20,20,40,30)

k2 = QLabel('br3',natang)
k2.setLineWidth(3)
k2.setFrameShape(QFrame.Box)
k2.setFrameShadow(QFrame.Raised)
k2.setGeometry(70,20,40,30)

k3 = QLabel('bs1',natang)
k3.setLineWidth(1)
k3.setFrameShape(QFrame.Box)
k3.setFrameShadow(QFrame.Sunken)
k3.setGeometry(20,60,40,30)

k4 = QLabel('bs3',natang)
k4.setLineWidth(3)
k4.setFrameShape(QFrame.Box)
k4.setFrameShadow(QFrame.Sunken)
k4.setGeometry(70,60,40,30)

k5 = QLabel('pr1',natang)
k5.setLineWidth(1)
k5.setFrameShape(QFrame.Panel)
k5.setFrameShadow(QFrame.Raised)
k5.setGeometry(20,100,40,30)

k6 = QLabel('pr3',natang)
k6.setLineWidth(3)
k6.setFrameShape(QFrame.Panel)
k6.setFrameShadow(QFrame.Raised)
k6.setGeometry(70,100,40,30)

k7 = QLabel('ps1',natang)
k7.setLineWidth(1)
k7.setFrameShape(QFrame.Panel)
k7.setFrameShadow(QFrame.Sunken)
k7.setGeometry(20,140,40,30)

k8 = QLabel('ps3',natang)
k8.setLineWidth(3)
k8.setFrameShape(QFrame.Panel)
k8.setFrameShadow(QFrame.Sunken)
k8.setGeometry(70,140,40,30)

natang.show()
qAp.exec_()

ในภาพนี้ฝั่งซ้ายคือกรอบหนา 1 ทางขวาคือหนา 3 ส่วน 2 แถว ด้านบนคือแบบ Box ส่วน 2 แถวด้านล่างคือแบบ Panel






การปรับความหนาเส้นส่วนกลาง {.setMidLineWidth}

กรณีที่ใช้กรอบแบบ Box นั้นยังมีตัวเลือกอีกอย่างที่สามารถปรับแต่งเพิ่มเติมได้อีก นั่นคือความหนาของเส้นส่วนกลาง ซึ่งปรับได้โดยเมธอด .setMidLineWidth

เมธอดนี้มีผลกับเฉพาะกรอบแบบ Box ในกรณีที่ใส่เงาเท่านั้น

ตัวอย่าง
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QFrame

qAp = QApplication(sys.argv)
natang = QWidget()

k1 = QLabel('ยก 3 0',natang)
k1.setLineWidth(3)
k1.setFrameShape(QFrame.Box)
k1.setFrameShadow(QFrame.Raised)
k1.setGeometry(20,20,80,40)

k2 = QLabel('ยก 3 3',natang)
k2.setLineWidth(3)
k2.setMidLineWidth(3)
k2.setFrameShape(QFrame.Box)
k2.setFrameShadow(QFrame.Raised)
k2.setGeometry(110,20,80,40)

k3 = QLabel('ยก 0 3',natang)
k3.setMidLineWidth(3)
k3.setFrameShape(QFrame.Box)
k3.setFrameShadow(QFrame.Raised)
k3.setGeometry(200,20,80,40)

k4 = QLabel('จม 3 0',natang)
k4.setLineWidth(3)
k4.setFrameShape(QFrame.Box)
k4.setFrameShadow(QFrame.Sunken)
k4.setGeometry(20,70,80,40)

k5 = QLabel('จม 3 3',natang)
k5.setLineWidth(3)
k5.setMidLineWidth(3)
k5.setFrameShape(QFrame.Box)
k5.setFrameShadow(QFrame.Sunken)
k5.setGeometry(110,70,80,40)

k6 = QLabel('จม 0 3',natang)
k6.setMidLineWidth(3)
k6.setFrameShape(QFrame.Box)
k6.setFrameShadow(QFrame.Sunken)
k6.setGeometry(200,70,80,40)

natang.show()
qAp.exec_()

จะได้ผลดังนี้






การวาดเส้นแนวตั้งและแนวนอน

เส้นขีดแนวนอนหรือแนวตั้งสามารถสร้างได้โดยใช้ widget ชนิด QFrame โดยตั้งกรอบเป็นแบบ HLine หรือ VLine

ตัวปรับแต่งอื่นๆเช่น .setFrameShadow กับ .setLineWidth ก็สามารถทำได้เช่นเดียวกับในเส้นขอบแบบอื่นๆดังในกรณีที่กล่าวมาข้างต้น

ตัวอย่างการวาดเส้น
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QFrame

qAp = QApplication(sys.argv)
natang = QWidget()

sen1 = QFrame(natang)
sen1.setFrameShape(QFrame.HLine)
sen1.setLineWidth(2)
sen1.setGeometry(10,10,200,2)

sen2 = QFrame(natang)
sen2.setFrameShape(QFrame.HLine)
sen2.setLineWidth(5)
sen2.setGeometry(10,30,200,5)

sen3 = QFrame(natang)
sen3.setFrameShape(QFrame.HLine)
sen3.setFrameShadow(QFrame.Raised)
sen3.setLineWidth(2)
sen3.setGeometry(10,50,200,2)

sen4 = QFrame(natang)
sen4.setFrameShape(QFrame.HLine)
sen4.setFrameShadow(QFrame.Raised)
sen4.setLineWidth(5)
sen4.setGeometry(10,70,200,5)

sen5 = QFrame(natang)
sen5.setFrameShape(QFrame.HLine)
sen5.setFrameShadow(QFrame.Sunken)
sen5.setLineWidth(2)
sen5.setGeometry(10,90,200,2)

sen6 = QFrame(natang)
sen6.setFrameShape(QFrame.HLine)
sen6.setFrameShadow(QFrame.Sunken)
sen6.setLineWidth(5)
sen6.setGeometry(10,110,200,5)

sen7 = QFrame(natang)
sen7.setFrameShape(QFrame.VLine)
sen7.setLineWidth(5)
sen7.setGeometry(220,10,5,200)

sen8 = QFrame(natang)
sen8.setFrameShape(QFrame.VLine)
sen8.setLineWidth(15)
sen8.setGeometry(235,10,15,200)

natang.show()
qAp.exec_()

จะได้เส้นแบบต่างๆออกมาแบบนี้






สรุปท้ายบท

ในบทนี้ได้เขียนถึงการสร้างเส้นกรอบล้อม รวมถึงการสร้างเส้นขีดคั่นแนวตั้งแนวนอนไปแล้ว ซึ่งสามารถใช้ได้กับ QLabel และนอกจากนี้ก็ยังใช้ได้กับ widget แบบอื่นๆที่รับทอดจากคลาส QFrame เช่นเดียวกัน ซึ่งจะได้กล่าวถึงต่อไป



อ่านบทถัดไป >> บทที่ ๗





-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> python >> pyqt

ไม่อนุญาตให้นำเนื้อหาของบทความไปลงที่อื่นโดยไม่ได้ขออนุญาตโดยเด็ดขาด หากต้องการนำบางส่วนไปลงสามารถทำได้โดยต้องไม่ใช่การก๊อปแปะแต่ให้เปลี่ยนคำพูดเป็นของตัวเอง หรือไม่ก็เขียนในลักษณะการยกข้อความอ้างอิง และไม่ว่ากรณีไหนก็ตาม ต้องให้เครดิตพร้อมใส่ลิงก์ของทุกบทความที่มีการใช้เนื้อหาเสมอ

目次

日本による名言集
モジュール
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
機械学習
-- ニューラル
     ネットワーク
ภาษา javascript
ภาษา mongol
言語学
maya
確率論
日本での日記
中国での日記
-- 北京での日記
-- 香港での日記
-- 澳門での日記
台灣での日記
北欧での日記
他の国での日記
qiita
その他の記事

記事の類別



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  記事を検索

  おすすめの記事

ตัวอักษรกรีกและเปรียบเทียบการใช้งานในภาษากรีกโบราณและกรีกสมัยใหม่
ที่มาของอักษรไทยและความเกี่ยวพันกับอักษรอื่นๆในตระกูลอักษรพราหมี
การสร้างแบบจำลองสามมิติเป็นไฟล์ .obj วิธีการอย่างง่ายที่ไม่ว่าใครก็ลองทำได้ทันที
รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
การใช้ unix shell เบื้องต้น ใน linux และ mac
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ

ไทย

日本語

中文