Home > front end >  tkinter canvas draw an oval canvas with the canvas width and height 30% of the size responsive
tkinter canvas draw an oval canvas with the canvas width and height 30% of the size responsive

Time:09-28

# Main style configs
self.appWidth = 500
self.appHeigth = self.winfo_screenheight() - 75
screenPosX = self.winfo_screenwidth() - self.appWidth - 10
        
self.geometry(f'{self.appWidth}x{self.appHeigth} {screenPosX} 0')
self.tableContainner = Canvas(self)
    self.tableContainner.place(relx=0,rely=0.1, relwidth=1, relheight=0.5) 
    Create Table
    print(self.winfo_depth())
    self.tableContainner.create_oval(0,0,self.appWidth,self.appHeigth/2.5, fill='blue')

I'm trying to make an oval circle with the width of my app, and the height of 30% of it trying to make it responsive like the attributes found in 'place' relx rely etc, I've already tested them all but it's possible to use some winfo_* to find out what realtime window size and change canvas size when changed?

Or simply fill the entire canvas which in this case is already responsive...

enter image description here

CodePudding user response:

You should create the oval once, then create a binding to the <Configure> event of the canvas to call a function that resizes the oval. The <Configure> event fires whenever the canvas changes size.

The following example creates a canvas half the height of the window, and then draws an oval the full width and 1/3 the height, which will resize whenever the canvas changes size.

class Example(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.tableContainer = tk.Canvas(self)
        self.tableContainer.place(relx=0, rely=0.1, relwidth=1, relheight=0.5)

        self.tableContainer.create_oval(0, 0, 1, 1, fill='blue', tags=("oval",))
        self.tableContainer.bind("<Configure>", self.resize_oval)

    def resize_oval(self, event):
        width = event.width
        height = event.height
        self.tableContainer.coords("oval", 0, 0, width, height*.30)

  • Related