python - Tkinter 将小部件放置在相对于窗口调整大小的特定位置

Question

我是 tkinter 和 python 的新手，我只是想在特定点的 Canvas (带有背景图像)上放置一个“文本输入”小部件和一个“按钮”小部件，并让整个布局保持其位置相对于窗口的大小。这是因为我会将我的 gui 设置为在不同的显示器上全屏，例如从宽屏到 4:3 宽高比的任何东西。但我希望我的按钮和小部件保持它们的相对位置，这图表解释了我的意思:- https://i.imgur.com/IMBuwkQ.png

不幸的是，我没有运气使用 pack 和 grid 选项给我那个也相对于窗口/屏幕大小的精确位置。有没有我可以运行的代码来返回我想要的位置，所以我可以输入在网格/包中定位我的小部件？

所以我开发了一些简单的 python3 代码来尝试完成这个并拥有这个:- (为方便起见，图像引用是在线的，因此代码应该可以立即在您选择的 IDE 中顺利运行)

from tkinter import*
from PIL import ImageTk, Image
import io
from io import BytesIO
import base64
import webbrowser
import urllib.request  # not urllib.request
from PIL import Image, ImageTk



root = Tk()

root.geometry("1600x700+0+0")




url = "https://i.imgur.com/VqBbqpH.png"  #use "direct link" from imgur, not  "image link"

u = urllib.request.urlopen(url)
raw_data = u.read()
u.close()

im = Image.open(BytesIO(raw_data))
image = ImageTk.PhotoImage(im)

entryDefaultText="Enter Text"




class App(Frame):
    def __init__(self, master):
        Frame.__init__(self, master)
        self.button = Button(master, text="Edit Box Details(click here)", fg="blue")
        self.button.pack()
        #self.button.pack().pack(side=TOP, anchor=W, fill=X, expand=NO)
        self.columnconfigure(0,weight=1)
        self.rowconfigure(0,weight=1)
        self.original=im
        self.image = ImageTk.PhotoImage(self.original)
        self.display = Canvas(self, bd=0, highlightthickness=0)
        self.display.create_image(0, 0, image=self.image, anchor=NW, tags="IMG")
        self.display.grid(row=0, sticky=W+E+N+S)
        self.pack(fill=BOTH, expand=1)
        self.bind("<Configure>", self.resize)
        self.entryWidget(self)





    def entryWidget(self,root):
        self.entry_var = entryDefaultText
        v = StringVar(root, value='Enter Text')
        #self.entry = Entry(root, textvariable=self.entry_var)
        self.entry = Entry(root, textvariable=v)
        self.entry.grid(row=0, column=0, sticky=N,padx=1, pady=1)  # margins




    def resize(self, event):
        size = (event.width, event.height)
        resized = self.original.resize(size,Image.ANTIALIAS)
        self.image = ImageTk.PhotoImage(resized)
        self.display.delete("IMG")
        self.display.create_image(0, 0, image=self.image, anchor=NW, tags="IMG")

                                                                                 #in ms

app = App(root)
app.mainloop()
root.mainloop()

我设法让背景图像根据窗口大小调整大小，但我的小部件和按钮只是位于顶部。我尝试指定位置，例如在这种情况下，我希望小部件位于triangle.But 我怎样才能指定那个确切的位置，我怎样才能让我的小部件坐在那个位置的背景图片上，而不是在 gui 的顶部/底部/侧面。 谢谢!

Answer 1

我能够通过将 .pack 和 .grid 几何管理器替换为 .place 几何来解决这个问题(感谢 Goyo)经理，即我补充道:-

self.button.place(relwidth = 0.07, relheight = 0.03, relx = 0.489, rely = 0.243)

和

self.entry.place(relwidth=0.07, relheight=0.03, relx=0.489, rely=0.276)

所做的是允许我指定放置小部件和按钮的位置，并将它们的大小与我的窗口的相对大小联系起来。作为生活质量问题，我添加的另一件事是发布光标的位置在 gui 上使用此代码(特别感谢 unutbu 在此处对堆栈溢出的回答):-

def motion(event):
    x, y = event.x, event.y
    print('{}, {}'.format(x, y))
    #in ms

root.bind('<Motion>', motion)
root.mainloop()

这打印了我想要的位置坐标，这样我就可以正确定位我的按钮并编辑文本小部件