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

ในบทนี้จะเป็นเรื่องของการสร้างเส้นกรอบล้อมรอบ 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 模块 -- numpy -- matplotlib -- pandas -- manim -- opencv -- pyqt -- pytorch 机器学习 -- 神经网络

javascript

蒙古语

语言学

maya

概率论

与日本相关的日记

与中国相关的日记 -- 与北京相关的日记 -- 与香港相关的日记 -- 与澳门相关的日记

与台湾相关的日记

与北欧相关的日记

与其他国家相关的日记

qiita

其他日志

按类别分日志

==เลือกหมวด== ดาราศาสตร์ คณิตศาสตร์ -ความน่าจะเป็น คอมพิวเตอร์ -เขียนโปรแกรม --python ---numpy ---scipy ---matplotlib ---pandas ---manim ---pyqt ---sklearn ---pytorch ---mayapython --ruby --javascript --dart --sql --regex --opencv -shell -3D --maya --MMD -microsoft_office -pdf -ปัญญาประดิษฐ์ --โครงข่ายประสาทเทียม -การสุ่ม ภาษาศาสตร์ -ตัวอักษร -เรียนภาษา -หลักเกณฑ์การทับศัพท์ -ภาษาจีน --ภาษาจีนกลาง -ภาษาญี่ปุ่น -ภาษามองโกล -ภาษาลาว -ภาษาเขมร ประวัติศาสตร์ -ประวัติศาสตร์จีน -ประวัติศาสตร์ญี่ปุ่น ปรัชญา บันทึก เรื่องแต่ง ประเทศจีน -จีนแผ่นดินใหญ่ --ปักกิ่ง --เทียนจิน --เหลียวหนิง --เหอเป่ย์ --เหอหนาน --ซานตง --ซานซี --อานฮุย --เจ้อเจียง --หูเป่ย์ --หูหนาน --ฝูเจี้ยน --กวางตุ้ง ---แต้จิ๋ว --ยูนนาน --ซินเจียง -ฮ่องกง -มาเก๊า -ไต้หวัน --ไทเป --จีหลง --เถาหยวน --ซินจู๋ --เหมียวลี่ --ไถจง --หยวินหลิน --เจียอี้ --ไถหนาน --เกาสยง --ผิงตง --อี๋หลาน ประเทศญี่ปุ่น -ฮกไกโด -อาโอโมริ -อิวาเตะ -มิยางิ -อากิตะ -ยามางาตะ -ฟุกุชิมะ -อิบารากิ -โทจิงิ -กุมมะ -ไซตามะ -จิบะ -โตเกียว -คานางาวะ -นีงาตะ -โทยามะ -อิชิกาวะ -ฟุกุอิ -ยามานาชิ -นางาโนะ -กิฟุ -ชิซึโอกะ -ไอจิ -มิเอะ -ชิงะ -เกียวโต -โอซากะ -เฮียวโงะ -นาระ -วากายามะ -โอกายามะ -ฮิโรชิมะ -ยามางุจิ -ฟุกุโอกะ ต่างแดน -อุษาคเนย์ --กัมพูชา --พม่า --สิงคโปร์ -ยุโรป --สวีเดน --เดนมาร์ก --ฟินแลนด์ ท่องเที่ยว -มหาวิทยาลัย -พิพิธภัณฑ์ --พิพิธภัณฑ์วิทยาศาสตร์ --หอศิลป์ -สวนสัตว์ --พิพิธภัณฑ์สัตว์น้ำ -ท้องฟ้าจำลอง -ตึกระฟ้า -ปราสาท☑ --ปราสาทญี่ปุ่น --ปราสาทขอม --ปราสาทยุโรป -ศาสนสถาน --วัด --ศาลเจ้า --โบสถ์ --มัสยิด -สุสาน -มรดกโลก -ทะเล -ทะเลสาบ -ภูเขา -หิมะ -ดอกซากุระ -แมว -รถไฟ -เรือ -ตลาดกลางคืน -งานเทศกาล -ที่ระลึกภัยพิบัติ -ตามรอย บันเทิง -เกม --อาเตอลีเย --โปเกมอน --caligula --vn -อนิเมะ -มังงะ -นิยาย -เพลง --เพลงอนิเมะ --เพลงเกม

　 查看日志

　 最近

　 推荐日志

各月日志

找更早以前的日志

ไทย

日本語

中文