How to drag text which is printed over Image (in canvas) using mouse in python?

Question

I want to add a Drag Text Feature in canvas to change the position of text using mouse.

from PIL import Image,ImageFont,ImageDraw,ImageTk
import tkinter as tk

root = tk.Tk()
root.title('Demo')
root.geometry('400x50')

def func_image():

    img_window = tk.Toplevel()
    img_window.grab_set()

    photo = Image.open(r'E:\side_300.png')
    wi,hi = photo.size
    fonty = ImageFont.truetype('arial.ttf',18)
    draw = ImageDraw.Draw(photo)
    draw.text((50,50),text=text.get(),fill='red',font=fonty)
    new_photo = photo
    can_photo = ImageTk.PhotoImage(new_photo)

    canvas = tk.Canvas(img_window,height=500,width=500)
    canvas.pack(anchor='n')
    canvas.create_image(wi/2,hi/2,image=can_photo,anchor='center')
    img_window.mainloop()

lbl_text = tk.Label(root,text='Enter Text :')
lbl_text.grid(row=0,column=0)

text = tk.Entry()
text.grid(row=0,column=1)

btn = tk.Button(root,text='Click Me',command=func_image)
btn.grid(row=0,column=2)

root.mainloop()

When you run the code it will firstly open a window with name 'Demo' which contains one entry box and a button.
When you click on a Button 'Click Me' after entering some text into entry box it will go to a function func_image and opens a new window which contain a canvas filled with new_image.

Answer 1

Quick Disclaimer: I don't have a lot of experience with PIL, so i don't know how to remove text that has already been drawn. Maybe you can figure that one out yourself. But apart from that, i know some things about tkinter. My idea would be the following:

Bind a function to the <B1-motion> event (Button 1 is being held down and moved) that will constantly get the position of the mouse inside the window and draw new text at that position, while deleting the previous text.

    import...
    ...

    def func_image():
        img_window = tk.Toplevel()
        ...
        ...
        draw = ImageDraw.Draw(photo)
        draw.text((50,50),text=text.get(),fill='red',font=fonty)
        ...
        def move_text(event):
            # here you would delete your previous text
            x = event.x
            y = event.y
            draw.text((x,y),text=text.get(),fill='red',font=fonty

        img_window.bind('<B1-Motion>', move_text)

That being said, i think it would be a better idea to use Canvas.create_text (more on effbot.org) in order to write your text on the image. It's really easy to drag around text on a Canvas, here's a little example:

import tkinter as tk

root = tk.Tk()

def change_position(event):
    x = event.x
    y = event.y

    # 20x20 square around mouse to make sure text only gets targeted if the mouse is near it
    if text in c.find_overlapping(str(x-10), str(y-10), str(x+10), str(y+10)):
        c.coords(text, x, y)  # move text to mouse position

c = tk.Canvas(root)
c.pack(anchor='n')

text = c.create_text('10', '10', text='test', fill='red', font=('arial', 18))  # you can define all kinds of text options here
c.bind("<B1-Motion>", change_position)

root.mainloop()