當前位置:首頁 ? tkinter ? 正文

為畫布canvas增加滾動條,做一個可以瀏覽大圖片的圖片瀏覽器

  如果我們做一個圖片瀏覽器,圖片太大,大過畫布,那就應該設計好水平和垂直滾動條,把這2個滾動條綁定到畫布,利用滾動條,就可以滾動查看圖片。

  創建畫布,滾動條,綁定滾動條,在畫布上導入圖片,相信大家沒有問題,因為這些知識在我以前寫的文章都有詳細說明,只是有朋友綁定滾動條后,調整滾動條,畫布上的圖片卻不能移動,我分析原因在于,創建畫布有一個參數,即滾動范圍參數:scrollregion 大家沒有設置好。

   scrollregion的值應該是一個元組,有4個參數,4個參數表示一個范圍,代表滾動的范圍,如: scrollregion=(x1,y1,x2,y2)

  我下面的代碼會導入一個圖片,尺寸為 425X200,所以,我在設置滾動范圍時,就是:scrollregion=(0,0,425,200)

  下面是一個簡單的圖片瀏覽器代碼:             丶丌皛

from tkinter import *
root=Tk()  # 源碼來自wb98.com

root.rowconfigure(0,weight=1) 
root.columnconfigure(0,weight=1) 

can1=Canvas(root,bg='lightblue',width=200,height=150)
can1.grid(row=0,column=0,sticky=NSEW)
# 創建定位畫布

img1=PhotoImage(file='car.png') # 導入圖片的大小是: 425 X 200
can1.create_image(0,0,image=img1,anchor=NW) # 在畫面上插入這個圖像對象

scr1=Scrollbar(root)  # 垂直滾動條
scr1.grid(row=0,column=1,sticky=NS)

can1.config(yscrollcommand = scr1.set) # 綁定垂直滾動條
scr1.config(command = can1.yview)

scr2=Scrollbar(orient=HORIZONTAL) # 水平滾動條
scr2.grid(row=1,column=0,sticky=EW)

can1.config(xscrollcommand = scr2.set) # 綁定水平滾動條
scr2.config(command =can1.xview)

can1.config(scrollregion=(0,0,425,200)) # 保證滾動范圍正好是圖片的寬高

root.mainloop()

運行結果:

未命名.GIF

我導入的圖片如下,大家可以把圖片另存為,下載使用。

202111111126119153895.gif

測試發現問題,在畫布上滾動滑輪沒有什么反應,可能畫布不像其它可以綁定滾動條的組件,綁定成功后就支持在畫布上滾動鼠標事件,解決辦法當然是自己再相關的鼠標滾動函數了。

加上垂直方向和水平方向的鼠標滾動事件函數:

def Wheel_y(event):
    a= int(-(event.delta)/60)
    can1.yview_scroll(a,'units')
def Wheel_x(event):
    a= int(-(event.delta)/60)
    can1.xview_scroll(a,'units')

再到代碼最后為畫布綁定好鼠標滾動事件,以及按住shift+鼠標輪動事件,代碼如下:

can1.bind("<MouseWheel>", Wheel_y) 
can1.bind("<Shift-MouseWheel>", Wheel_x)

全部代碼修改后如下:

from tkinter import *
def Wheel_y(event):
    a= int(-(event.delta)/60)
    can1.yview_scroll(a,'units')
def Wheel_x(event):
    a= int(-(event.delta)/60)
    can1.xview_scroll(a,'units')

root=Tk()  # 源碼來自wb98.com

root.rowconfigure(0,weight=1) 
root.columnconfigure(0,weight=1) 

can1=Canvas(root,bg='lightblue',width=200,height=150)
can1.grid(row=0,column=0,sticky=NSEW)
# 創建定位畫布

img1=PhotoImage(file='car.png') # 導入圖片的大小是: 425 X 200
can1.create_image(0,0,image=img1,anchor=NW) # 在畫面上插入這個圖像對象

scr1=Scrollbar(root)  # 垂直滾動條
scr1.grid(row=0,column=1,sticky=NS)

can1.config(yscrollcommand = scr1.set) # 綁定垂直滾動條
scr1.config(command = can1.yview)

scr2=Scrollbar(orient=HORIZONTAL) # 水平滾動條
scr2.grid(row=1,column=0,sticky=EW)

can1.config(xscrollcommand = scr2.set) # 綁定水平滾動條
scr2.config(command =can1.xview)

can1.config(scrollregion=(0,0,425,200)) # 保證滾動范圍正好是圖片的寬高

can1.bind("<MouseWheel>", Wheel_y) 
can1.bind("<Shift-MouseWheel>", Wheel_x)

root.mainloop()


畫布,滾動條也可以采用pack()布局定位的方法,代碼如下:

from tkinter import *
def Wheel_y(event):
    a= int(-(event.delta)/60)
    can1.yview_scroll(a,'units')
def Wheel_x(event):
    a= int(-(event.delta)/60)
    can1.xview_scroll(a,'units')

root=Tk()  # 源碼來自wb98.com

scr1=Scrollbar(root)  # 垂直滾動條
scr1.pack(side=RIGHT,fill=Y) 

scr2=Scrollbar(orient=HORIZONTAL) # 水平滾動條
scr2.pack(side=BOTTOM,fill=X)

can1=Canvas(root,bg='lightblue',width=200,height=150)
can1.pack(side=LEFT,expand=True,fill=BOTH) # 畫布定位

img1=PhotoImage(file='car.png') # 導入圖片的大小是: 425 X 200
can1.create_image(0,0,image=img1,anchor=NW) # 在畫面上插入這個圖像對象

can1.config(yscrollcommand = scr1.set) # 綁定垂直滾動條
scr1.config(command = can1.yview)

can1.config(xscrollcommand = scr2.set) # 綁定水平滾動條
scr2.config(command =can1.xview)

can1.config(scrollregion=can1.bbox("all")) # 保證滾動范圍正好是圖片的寬高

can1.bind("<MouseWheel>", Wheel_y) 
can1.bind("<Shift-MouseWheel>", Wheel_x)

root.mainloop()


上面代碼 can1.xview_scroll(a,'units')  等同 can1.xview('scroll',a,'units')

如果對 can1.xview_scroll(a,'units') 這行代碼不理解,可以參看我以前的文章《tkinter滾動條Scrollbar的實際運用》,網址 http://www.chinaengraver.com/post/322.html

此文章來自:wb98.com  網站還有相關的系列課程文章,感興趣的可以前往。

來源:濟亨網

本文鏈接:http://www.chinaengraver.com/post/345.html

    << 上一篇 下一篇 >>

    湘公網安備 43011102000514號 - 湘ICP備08100508號

    2019年秋霞鲁丝片瓜皮_导航亚洲AV日韩AV永久无码_有没有哪些可以看片的免费的_国产色妞妞在线视频免费播放