【編程】Tkinter組件的背景透明

歡迎關注我的專欄( つ•̀ω•́)つ【人工智能通識】
更多相關文章請點擊【量子計算通識】


如果你在尋找能夠讓Tkinter的組件背景Background變爲透明的方法,比如Label、Button、Canvas什麼的,到這裏你可以死心了,答案是至今不能。

是的,既然選擇了Tkinter,就已經是掉坑裏了。接下來我們來考慮如何挽救一下。

使用Canvas

Tkinter的每個組件Widget都是不能透明背景的,也就是一個組件壓一個組件,互相不能穿透。

但是並沒有說每個組件內部不能透明啊?比如說給Label加個圖片,那麼Label上的字“Button”就可以疊加在按鈕圖片上。

但這個圖上問題仍然存在,你不能把這個按鈕放到磚牆背景上,因爲即使你用PS把按鈕灰色的底色透明掉,也一樣無法穿透Button組件。

但是Canvas組件就比較特殊,它更像一個特別的容器,你可以在Canvas內創建很多東西。

我們可以創建一個Canvas,然後再在其內部創建多個圖片、文字,那麼這些圖片文字之間就是正常透明疊加的。

from tkinter import *
from PIL import Image,ImageTk

root = Tk()
root.geometry('1024x410+0+0')

canvas = Canvas(width=800, height=500, highlightthickness=0, borderwidth=0)
canvas.place(x=0, y=0)
brick = PhotoImage(file='brick.png')
bgid = canvas.create_image(0, 0, image=brick, anchor='nw')

btn = PhotoImage(file='btntm.png')
bgid = canvas.create_image(200,100, image=btn, anchor='nw')

txtid=canvas.create_text(370,140, font=("Purisa", 48),anchor="nw")
canvas.insert(txtid,1,"很好")

root.mainloop()

運行的結果是這樣的:

用到的圖在這裏:

雖然這個方法看似有效,但缺點也很明顯,首先,按鈕標籤全部嵌套在Canvas裏面,管理起來肯定不方便;其次,連背景都包含在一起,如果文字或按鈕需要動態更新,那麼會導致整個Canvas都要一起更新,這一定會產生畫面刷新的性能問題。

裁圖

既然我們可以給按鈕設置圖片,那麼我們如果把按鈕圖片和磚牆圖片在PS裏面疊加好,再裁下來,然後只要保證能夠對齊,那麼也能實現按鈕和背景融合,看上去就會像透明一樣效果。

如果界面設計稿完全確定不會修改的話,那麼只要設計人員把圖裁好,標註好位置尺寸,那麼這個方法就是可行的。

但如果界面設計有了變動,要修改,那可能就會需要重新裁圖,重新對齊,變得麻煩了。

我們可以把這個裁圖的事情放在Python代碼裏面,用代碼根據按鈕的位置和寬高自動從背景圖上裁切,作爲按鈕的圖片使用。

下面是這個思路的代碼,僅供參考:

from tkinter import *
from PIL import Image, ImageTk

root = Tk()
root.geometry('800x600+0+0')

# 添加背景,尺寸由原圖大小決定,左上角定位
canvas = Canvas(width=800, height=500, highlightthickness=0, borderwidth=0)
canvas.place(x=0, y=0)
bg = PhotoImage(file='brick.png')
bgid = canvas.create_image(0, 0, image=bg, anchor='nw')

# 從背景圖片中裁切出指定位置的圖片做按鈕背景
region = (200, 120, 500, 300)  # 左位置,上位置,橫向裁到位置,豎向裁到位置
im = Image.open('brick.png')
cropped = im.crop(region)
tk_im = ImageTk.PhotoImage(cropped)
wid = Label(image=tk_im,
            highlightthickness=0, borderwidth=1, padx=0, pady=0,  # 修改這裏查看按鈕邊緣大小
            compound='center', font='Simhei 48 bold',  # 修改字體和大小
            text='BUTTON').place(x=200, y=120)  # x、y和左位置、上位置一致即可

root.mainloop()

可以修改borderwidth=0去掉白色邊框。


歡迎關注我的專欄( つ•̀ω•́)つ【人工智能通識】


每個人的智能新時代

如果您發現文章錯誤,請不吝留言指正;
如果您覺得有用,請點喜歡;
如果您覺得很有用,歡迎轉載~


END

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章