0

Lo que necesito saber es cómo puedo cargar una imagen cualquiera de mi PC dentro de un canvas. Luego, hacer clic sobre ella (tal vez que se resalte con algún color como "red" no importa si no es posible resaltarla) y al hacer clic con el ratón poder arrastrar dicha imagen a cualquier posición dentro del mismo canvas. Todo debe hacerse no con una imagen precargada desde el código sino con diálogo open (de tkFileDialog) y seleccionar cualquier imagen .jpg o .png. Hasta ahora tengo esto, que funciona bien, carga una imagen .jpg en el centro del canvas:

img = None

def abririmg(main):
    global img

    pic = tkFileDialog.askopenfilename()
    canvas.img = ImageTk.PhotoImage(file=pic)
    canvas.create_image(cw/2,ch/2, anchor=CENTER, image=canvas.img)

Ahora ¿se puede mover haciendo clic sobre dicha imagen?

1 respuesta 1

1

La imagen se puede mover igual que cualquier item de Canvas. La idea básica es usar los eventos del ratón ButtonPress-1,ButtonRelease-1 y B1-Motion y crear nuestras funciones para manejarlos.

Un ejemplo partiendo de tu idea sería:

import Tkinter as tk
import tkFileDialog
from PIL import ImageTk

#Creamos un diccionario que nos permmita guardar las coordenadas y el nombre del objeto
posicion = {"x": 0, "y": 0, "img": None}

#Funcion que permite guardar en el diccionario anterior los datos de un objeto sobre el que presionamos con el raton
def imgPress(event):
    posicion["item"] = canvas.find_closest(event.x, event.y)[0]
    posicion["x"] = event.x
    posicion["y"] = event.y

#Funcion que permite reiniciar el diccionario cuando se sulta un objeto para poder usarlo de nuevo
def imgRelease(event):
    posicion["item"] = None
    posicion["x"] = 0
    posicion["y"] = 0

#Funcion que calcula el desplazamiento y usa el metodo move() de Canvas para reposicionar el item.
def imgMotion(event):
    incremento_x = event.x - posicion["x"]
    incremento_y = event.y - posicion["y"]
    canvas.move(posicion["item"], incremento_x, incremento_y)
    posicion["x"] = event.x
    posicion["y"] = event.y

#Creamos nuestra ventana y el canvas.
root = tk.Tk()
canvas = tk.Canvas(width=400, height=400)
canvas.pack(fill="both", expand=True)

#Enlazamos las senales con su correspondiente funcion usando una etiqueta que delimita los objetos sobre los que se aplica
canvas.tag_bind("img", "<ButtonPress-1>", imgPress)
canvas.tag_bind("img", "<ButtonRelease-1>", imgRelease)
canvas.tag_bind("img", "<B1-Motion>", imgMotion)

#Cargamos la imagen, estipulando la etiqueta que decidimos antes
pic = tkFileDialog.askopenfilename()
img = ImageTk.PhotoImage(file=pic)
canvas.create_image(200, 200, anchor=tk.CENTER, image=img, tags="img")

#Lanzamos nuestra app
root.mainloop()
1
  • Muy interesante tu código. Voy a estudiarlo a ver cómo mas se puede implementar. Gracias
    – Toño
    Commented el 4 dic. 2016 a las 22:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.