Tuesday, November 27, 2012

เมนู+รูป+การประมวลผล

คราวนี้เราจะลองเอา เมนูในบทความที่แล้ว มาประกอบกับรูปในบทความก่อนหน้านั้นครับ


โคัดเมื่อรวมๆกันแล้วก็จะได้แบบนี้
from Tkinter import Tk,Menu,Label
from PIL import Image,ImageTk

class MainApp:
    #constructor
    def __init__(self,mainwindow):
        #assign class variable to input parameter
        self.mainwindow = mainwindow
        #set title
        self.mainwindow.title("Menu")

    def createMenu(self):
        #create menubar
        menubar = Menu(self.mainwindow)
        self.mainwindow.config(menu=menubar)
        #FILE menu
        fileMenu = Menu(menubar, tearoff=0)
        menubar.add_cascade(label="File", menu=fileMenu)
        fileMenu.add_command(label="Exit", command=self.mainwindow.destroy)

    def loadImage(self):
        self.im = Image.open("lena.jpg")
        self.showImage()

    def showImage(self):
        self.imTk = ImageTk.PhotoImage(self.im)
        lbl = Label(self.mainwindow, image=self.imTk)
        lbl.pack()

#---Main app starts here---
root = Tk()
app = MainApp(root)
#create menu
app.createMenu()
app.loadImage()
root.mainloop()

จากนั้น เราจะลองเพิ่มเมนู Process สำหรับการประมวลผลภาพ เพื่อทำการหมุนรูปใหัได้ผลคือ


ลองเพิ่มโค้ดต่อไปนี้ในส่วนของ createMenu() ครับ
#PROCESS menu
processMenu = Menu(menubar, tearoff=0)
menubar.add_cascade(label="Process", menu=processMenu)
processMenu.add_command(label="Rotate",command=self.imgRotate) 

จะเห็นว่าเราได้เพิ่มคำสั่ง Rotate ในส่วนของเมนู Process ดังนั้น เราจำเป็นต้องเขียน method ใหม่ให้สอดคล้องกับคำสั่งดังกล่าว เพื่อหมุนรูปดังนี้
    def imgRotate(self):
        self.im = self.im.rotate(45)
        self.showImage()

เมื่อแก้ไขข้างต้นแล้ว หากรันโปรแกรมแ้ล้วเลือกเมนู Process / Rotate จะได้ผลลัพธ์คือ



อ้าว ทำไมเป็นแบบนี้ล่ะ มีส่วนว่างๆข้างบนมาได้อย่างไร?

เหตุผลก็เป็นเพราะว่า ใน showImage() มีการสร้าง Label ใหม่เรื่อยๆ ส่วน Label เก่าที่ถูกสร้างไว้ก็ยังเหลืออยู่ (ยกเว้นรูป เพราะถูก garbage collector ทำลายไปแล้ว) ทำให้เกิดพื้นที่ว่างที่เป็นของ Label เก่าค้างอยู่ในหน้าต่าง

เราจะมาลองแก้ปัญหานี้ในคราวถัดไปครับ

No comments:

Post a Comment