การใช้งาน Python GUI (Tkinter) : การสร้าง Photolmage และ Canvas

แชร์ความรู้ภาษา Python ไพทอน การเขียนโปรแกรมภาษาไพทอน

Moderator: mindphp, ผู้ดูแลกระดาน

ธวัชชัย แสนหาญ
PHP Super Member
PHP Super Member
โพสต์: 499
ลงทะเบียนเมื่อ: 15/11/2018 10:02 am

การใช้งาน Python GUI (Tkinter) : การสร้าง Photolmage และ Canvas

โพสต์โดย ธวัชชัย แสนหาญ » 01/03/2019 3:45 pm

การใช้งาน Python GUI (Tkinter) : การสร้าง Photolmage และ Canvas

Photolmage และ Canvas
-หากเราต้องการแสดงรูปภาพประกอบในแอปพลิเคชัน ก็อาจใช้ 2 คลาสต่อไปนี้ร่วมกันคือ 1) Photolmage
ใช้ในการโหลดภาพจากไฟล์เป้าหมาย 2) Canvas ใช้ในการแสดงผลรูปภาพ
โดย Canvas นั้น เป็นคลาสหลักที่ใช้งานทางด้านกราฟิกแทบทุกกรณีของ Tkinter แต่ในที่นี้จะกล่าวถึง
เพียงการแสดงผลรูปภาพเท่านั้น ซึ่งมีแนวทางดังต่อไปนี้
- คลาส Photolmage นั้นรองรับเพียงไฟล์ชนิด png และ gif เท่านั้น แต่ภาพชนิดพื้นฐานที่ใช้งาน
ทั่วไป เช่น jpg หรือ jpeg นั้นไม่รองรับ เราสามารถอ้างถึงตําแหน่งไฟล์ที่อยู่ภายนอกแอปพลิเคชันได้
เช่น C:\images\bird.png แต่ในทาง ปฏิบัติแล้ว เราควรนําไฟล์มาเก็บไว้ในโฟลเดอร์ของแอปพลิเคชันที่จะใช้งาน ดังนี้
-หากใช้ Python IDLE ก็เพียงแค่ก๊อบปี้รูปภาพแล้ว paste ลงในโฟลเดอร์ของแอปพลิเคชัน
(โปรเจ็กต์) นั้น หรือเราจะสร้างโฟลเดอร์ย่อยๆ เพื่อจัดเก็บไว้ต่างหากก็ได้
• หากใช้ Pycharm ก็ทําการก๊อบปี้ภาพ จากนั้นคลิกขวาที่โฟลเดอร์ชื่อโปรเจ็กต์ (ในภาพคือ Example)
แล้วเลือก paste
Screenshot (67).png
Screenshot (67).png (29.1 KiB) เปิดดู 735 ครั้ง


. ในขั้นตอนการเขียนโค้ด เราก็โหลดภาพด้วย Photolmage จากนั้นก็นําไปกําหนดให้แก่ Canvas
ดังแนวทางต่อไปนี้

โค้ด: เลือกทั้งหมด

img = PhotoImage(file='logo.png')
W = img.width()
h = img height()

CV = Canvas (width=w, height=h)        #สร้าง Canvas ให้มีขนาดเท่ากับรูปภาพ
 #วางลงไป โดยให้มุมบนซ้ายของภาพอยู่ที่ตําแหน่ง (x, y) ของ canvas
cv.create_image (5, 5, anchor=NW, image=img)
cv.image = img          #ให้ Canvas เก็บเรเฟอร์เรนซ์ของภาพเอาไว้ด้วย (ควรระบุบรรทัดนี้ด้วย)
cv.pack (side=TOP)


เป็นการแสดง รูปภาพโดยใช้ Photolmage ร่วมกับ Canvas ซึ่งมีให้เลือก 2 ภาพ แล้วมีปุ่มให้คลิกว่าจะนํา ภาพใดขึ้นมาแสดงบน Canvas

โค้ด: เลือกทั้งหมด

from tkinter import *

window = Tk()
window.geometry('300x360')
window.config(padx=20, pady=20)
window.option_add('*Button.background', 'lightgray')

img = PhotoImage(file='')
cv = Canvas(width=1, height=1)
cv.pack(side=TOP)

bt_python = Button(text='Python Logo', command=lambda: draw_image('python-logo.png'))
bt_python.pack(side=LEFT, anchor=SW, expand=YES)
bt_python.after(1000, bt_python.invoke)

bt_pycharm = Button(text='Pycharm Logo', command=lambda: draw_image('pycharm-logo.png'))
bt_pycharm.pack(side=LEFT, anchor=SE, expand=YES)

def draw_image(file):
    global img
    img = PhotoImage(file=file)
    cv.config(width=img.width()+5, height=img.height()+5)
    cv.create_image(5, 5, anchor=NW, image=img)
    cv.image = img

mainloop()


python.JPG
python.JPG (63.85 KiB) เปิดดู 735 ครั้ง

สรุป
เป็นการเรียกรูปภาพโดยการกดปุ่มเพื่อแสดงรูปที่กำหนดไว้

ช่องทางศึกษาเพิ่มเติม :baa:
เทคนิคการเขียน Python
บทเรียน Python
Programming - C/C++ & java & Python
บทเรียน Python GUI
บทเรียน Python Framework Flask

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 7 และ บุคคลทั่วไป 0 ท่าน