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


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

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

ธวัชชัย แสนหาญ
PHP Super Member
PHP Super Member
Posts: 499
Joined: 15/11/2018 10:02 am

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

Post by ธวัชชัย แสนหาญ » 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
การใช้งาน Python GUI (Tkinter) : การสร้าง Photolmage และ Canvas Screenshot (67).png
Screenshot (67).png (29.1 KiB) Viewed 990 times
. ในขั้นตอนการเขียนโค้ด เราก็โหลดภาพด้วย Photolmage จากนั้นก็นําไปกําหนดให้แก่ Canvas
ดังแนวทางต่อไปนี้

Code: Select all

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

Code: Select all

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 GUI (Tkinter) : การสร้าง Photolmage และ Canvas python.JPG
python.JPG (63.85 KiB) Viewed 990 times
สรุป
เป็นการเรียกรูปภาพโดยการกดปุ่มเพื่อแสดงรูปที่กำหนดไว้

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

Return to “Python Knowledge”

Users browsing this forum: No registered users and 9 guests