Home > Software engineering >  How to insert grid system in canvas (with image=bg) to place label and more in rows and columns?
How to insert grid system in canvas (with image=bg) to place label and more in rows and columns?

Time:08-28

how can I insert a grid system with rows and columns, having a background image (with canvas), to place the labels, insert boxes and buttons? instead of entering them with x,y coordinates.

For example, in this case, I have to insert label1 with the cordinates x,y.

What should i change? thanks to those who will answer me.

from tkinter import *
from tkinter import ttk

root = Tk()
root.title("title of window")
root.geometry('1230x720')
root.resizable(False, False)

bg = PhotoImage(file="/Users/file.png")
my_canvas = Canvas(root, width=1000, height=720)
my_canvas.pack(fill='both', expand=True)
my_canvas.create_image(0, 0, image=bg, anchor='nw')

label1 = my_canvas.create_text(500, 30,
                               text='hello world',
                               fill='Black',
                               font=('Helvetica Bold', 24),
                               anchor='w')

root.mainloop()

CodePudding user response:

If I'm not mistaken, there aren't grid property for Canvas object. The best you can do is to create grid for the entire root, and set rowspan, columnspan for it. It might look like this:

from tkinter import *
from tkinter import ttk

root = Tk()
root.title("title of window")
root.geometry('1230x720')
root.resizable(False, False)

bg = PhotoImage(file="/Users/file.png")
my_canvas = Canvas(root, width=1000, height=720)
my_canvas.grid(row=0, column=0, rowspan=10, columnspan=10)  # Important part
my_canvas.create_image(0, 0, image=bg, anchor='nw')

label1 = Label(text='hello world', fg='black', font=('Helvetica Bold', 24))
label1.grid(row=0, column=0)
label2 = Label(text='hi world', fg='black', font=('Helvetica Bold', 24))
label2.grid(row=1, column=0)
label3 = Label(text='greeting world', fg='black', font=('Helvetica Bold', 24))
label3.grid(row=0, column=1)

root.mainloop()

CodePudding user response:

The canvas has no mechanism to define a grid for objects drawn on the canvas. You're going to have to do the math yourself, assuming you want to use actual canvas objects and want to be able to scroll the canvas.

If you are using the canvas simply as a container for other widgets, you can use grid to manage child widgets. It can't be used for things that you draw on the canvas, however.

  • Related