76 - Canvas : desplazar una figura mediante el método move

Otra situación donde tiene sentido almacenar el Id de una figura es cuando en un momento posterior queremos desplazarla a otra posición dentro del objeto Canvas.

Problema:

Confeccionar un programa que que muestre un cuadrado dentro de un Canvas. Cuando se presione alguna de las teclas de flecha proceder a desplazar la figura 4 píxeles teniendo en cuenta la dirección de la tecla de flecha presionada.

La interfaz visual debe ser similar a esta:

Programa: ejercicio261.py

Ver video

import tkinter as tk

class Aplicacion:
    def __init__(self):
        self.ventana1=tk.Tk()
        self.canvas1=tk.Canvas(self.ventana1, width=600, height=400, background="black")
        self.canvas1.grid(column=0, row=0)
        self.cuadrado=self.canvas1.create_rectangle(150,10,200,60, fill="red")
        self.ventana1.bind("<KeyPress>", self.presion_tecla)
        self.ventana1.mainloop()
       
    def presion_tecla(self, evento):
        if evento.keysym=='Right':
            self.canvas1.move(self.cuadrado, 4, 0)
        if evento.keysym=='Left':
            self.canvas1.move(self.cuadrado, -4, 0)
        if evento.keysym=='Down':
            self.canvas1.move(self.cuadrado, 0, 4)
        if evento.keysym=='Up':
            self.canvas1.move(self.cuadrado, 0, -4)


aplicacion1=Aplicacion()

Creamos un objeto de la clase Canvas de 600 píxeles de ancho por 400 de alto:

        self.canvas1=tk.Canvas(self.ventana1, width=600, height=400, background="black")
        self.canvas1.grid(column=0, row=0)

Creamos un cuadrado de color rojo y guardamos su referencia en el atributo 'cuadrado':

        self.cuadrado=self.canvas1.create_rectangle(150,10,200,60, fill="red")

Ponemos a escuchar el evento 'KeyPress' e indicamos el método a ejecutar en caso que se dispare:

        self.ventana1.bind("<KeyPress>", self.presion_tecla)

En el método 'presion_tecla' verificamos cual de las cuatro teclas de flecha se ha presionado y llamamos al método 'move' de la clase Canvas, debemos pasar la referencia de la figura y cuantos píxeles se debe desplazar en 'x' e 'y':

    def presion_tecla(self, evento):
        if evento.keysym=='Right':
            self.canvas1.move(self.cuadrado, 4, 0)
        if evento.keysym=='Left':
            self.canvas1.move(self.cuadrado, -4, 0)
        if evento.keysym=='Down':
            self.canvas1.move(self.cuadrado, 0, 4)
        if evento.keysym=='Up':
            self.canvas1.move(self.cuadrado, 0, -4)

Problema propuesto

• Modificar el problema que desplaza un cuadrado con las teclas de flechas de tal modo que la figura no pueda salir del espacio definido para el Canvas.
  Para saber la posición actual de una figura la clase Canvas cuenta con el método 'coords':
  

          x1, y1, x2, y2 = self.canvas1.coords(self.cuadrado)
  

  Ver video

Solución

ejercicio262.py

import tkinter as tk

class Aplicacion:
    def __init__(self):
        self.ventana1=tk.Tk()
        self.canvas1=tk.Canvas(self.ventana1, width=600, height=400, background="black")
        self.canvas1.grid(column=0, row=0)
        self.cuadrado=self.canvas1.create_rectangle(150,10,200,60, fill="red")
        self.ventana1.bind("<KeyPress>", self.presion_tecla)
        self.ventana1.mainloop()
       
    def presion_tecla(self, evento):
        x1, y1, x2, y2 = self.canvas1.coords(self.cuadrado)
        if evento.keysym=='Right':
            if x2+4<=600:
                self.canvas1.move(self.cuadrado, 4, 0)
        if evento.keysym=='Left':
            if x1-4>=0:
                self.canvas1.move(self.cuadrado, -4, 0)
        if evento.keysym=='Down':
            if y2+4<=400:
                self.canvas1.move(self.cuadrado, 0, 4)
        if evento.keysym=='Up':
            if y1-4>=0:
                self.canvas1.move(self.cuadrado, 0, -4)


aplicacion1=Aplicacion()