Lección 1 · 1 de 20
El lienzo: formas y texto · tkinter
Dibuje rectángulos, óvalos, polígonos, líneas, arcos y texto en un Canvas de tkinter, y entienda sus coordenadas, sus identificadores y sus tags.
tk.Canvas es una superficie de dibujo. Sus coordenadas empiezan en la esquina superior izquierda, (0, 0): la x crece hacia la derecha y la y, hacia abajo (al revés que en las gráficas del colegio). Las dos flechas grises, dibujadas con create_line(..., arrow="last"), lo recuerdan.
Cada figura se crea con un método create_* y sus coordenadas: create_rectangle y create_oval reciben las dos esquinas del rectángulo que las contiene; create_polygon, los vértices; create_line, tantos puntos como quiera (con smooth=True la línea se curva), y create_arc, el rectángulo del óvalo más start y extent en grados. fill, outline y width ponen el relleno, el borde y su grosor.
create_text coloca un texto en un punto; anchor dice qué lado del texto toca ese punto ("e": el derecho; "w": el izquierdo). Cada create_* devuelve el identificador numérico del elemento, y coords(id) lee (o cambia) sus coordenadas, como hace la etiqueta de abajo con el arco.
Las tags agrupan elementos: las dos letras de los ejes llevan tags="axis", e itemconfigure("axis", ...) les cambia el color y la letra a la vez. Con una tag también se usan move, delete o tag_bind para mover, borrar o responder a clics. find_all() devuelve todos los identificadores.
En DMarlon Studio el Lienzo está en la paleta: lo arrastra a la ventana y el estudio escribe el tk.Canvas (sin el borde de foco, con highlightthickness=0); el dibujo se hace desde el código, como aquí.
Código · main.py
import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Canvas: shapes and text")root.geometry("520x360")# A drawing surface: (0, 0) is its top-left corner.canvas = tk.Canvas(root, bg="white", highlightthickness=0)info = ttk.Label(root)info.pack(side="bottom", anchor="w", padx=12, pady=(0, 8))canvas.pack(fill="both", expand=True, padx=10, pady=10)# The axes: x grows to the right and y grows downwards.canvas.create_line(20, 20, 490, 20, arrow="last", fill="gray")canvas.create_line(20, 20, 20, 300, arrow="last", fill="gray")# Each create_* takes coordinates and returns the new item's id.canvas.create_rectangle(60, 60, 180, 140, fill="#4f8cf7", outline="")canvas.create_oval(220, 50, 320, 150, fill="#f7b84f", outline="#c07d10", width=3)canvas.create_polygon(380, 150, 430, 50, 480, 150, fill="#5cc28a")canvas.create_line(60, 200, 160, 260, 260, 200, 340, 260, width=4, fill="#d9534f", smooth=True)arc = canvas.create_arc(380, 180, 470, 270, start=30, extent=300, fill="#a17be0")# Text goes at a point; anchor says which side of the text touches it.canvas.create_text(120, 100, text="rectangle", fill="white", font=("Helvetica", 12, "bold"))canvas.create_text(490, 32, text="x", anchor="e", tags="axis")canvas.create_text(32, 290, text="y", anchor="w", tags="axis")# A tag names a group of items: change them all at once.canvas.itemconfigure("axis", fill="gray", font=("Helvetica", 13, "italic"))info.config(text=f"{len(canvas.find_all())} items · the arc is item {arc}: {canvas.coords(arc)}")root.mainloop()Para recordar
(0, 0)es la esquina superior izquierda y la y crece hacia abajo.- Cada
create_*devuelve el identificador del elemento. fill,outlineywidthdan relleno, borde y grosor.- Una tag agrupa elementos para cambiarlos todos a la vez.
Ejercicio
Escriba su nombre con create_text en el punto (260, 300) y póngale la tag «axis»: verá que toma el color y la letra de los ejes.