Use mouse to move a zoomed image in a frame-CodePudding

I have a scale which controls the zoom-in and out of an image in a Tkinter frame. I want to use the mouse to click on image and move zoomed image in the frame, however its not working. Below is my code I am using. Any help to get it to work will be appreciated. Thanks in Advance. Below is my current code.

root = Tk()
canvas = tk.Canvas(root, height=500, width=500)
canvas.pack()
frame = customtkinter.CTkFrame(master=root, width=300, height=200)
frame.place(x=10, y=10)

canvas.bind('<ButtonPress-1>', move_from)
canvas.bind('<B1-Motion>', move_to)

###putting image on frame label###
def Image():
    global img, img_label, IMG
    IMG = Image.open('im.png')
    img = ImageTk.PhotoImage(IMG.resize((280, 280), Image.ANTIALIAS))
    img_label = Label(frame, image=img)
    img_label.image = img
    img_label.place(x=200, y=0)
    img_label.pack(side=TOP, padx=20, pady=50)
    return img_label

#### zoom function ####
def zoom_img(zoom):
    global Img
    newsize = (IMG.size[0]* int(zoom), 
                IMG.size[1]*int(zoom))
    scaledIMG = IMG.resize(newsize, Image.LINEAR)
    Img = ImageTk.PhotoImage(scaledIMG)
    img_label.configure(image=Img, width=200, height=220)
    img_label.place(x=80, y=0)
    img_label.pack(side=TOP, padx=5, pady=5)

### scale ###
scale_label = customtkinter.CTkLabel(master=root, text="Zoom", width=50, fg_color="gray80").place(x=85, y=130)

var = StringVar()
scale = tk.Scale(root, variable=var, orient='horizontal', from_=1, to=5, length=200, resolution=1, command=zoom_img)
scale.place(x=85, y=140)

def move_from(event):
    canvas.scan_mark(event.x, event.y)

def move_to(event):
    canvas.scan_dragto(event.x, event.y, gain=1)

CodePudding user response：

You're attempting to use the canvas scanning feature, that that only works on canvas objects. You aren't creating canvas objects, you're creating labels and are placing them on the canvas with pack. You won't be able to scroll or scan anything added to a canvas with pack, place, or grid.

For you to be able to use the scanning feature you have to make the image an object on the canvas with the canvas' create_image method.

Here is an example showing how to use the scanning feature of the canvas. Note: the scan feature doesn't move the image, it moves the viewport in the same way that scrollbars do. The actual coordinate of the image doesn't change.

import tkinter as tk

def main():
    root = tk.Tk()

    image = tk.PhotoImage(data = image_data)

    canvas = tk.Canvas(root, width=400, height=400, bg="white")
    canvas.pack(fill="both", expand=True)

    canvas.create_image(10, 10, anchor="nw", image=image)

    canvas.bind("<ButtonPress-1>", drag_start)
    canvas.bind("<B1-Motion>", drag_move)

    root.mainloop()

def drag_start(event):
    event.widget.scan_mark(event.x, event.y)

def drag_move(event):
    event.widget.scan_dragto(event.x, event.y, gain=1)

image_data = """
    R0lGODlhGAAYAPZvAAIaLgwmOwcnQQcoQBMxSBc4VBQ6Vhk7VRY9WhY XSI4RxJC
    ZRRCZi9KYSFNbzJUbSJOcCZVeiZUeyBWfy1Zei5afB1Wgh1XgyFXgDpjgSVjkyZl
    liZnmCxrmixsmjZtlSptoCpuoSxxqCxzqjh1oTV3qDR4qD5/rjV8tDV tUFlgUZp
    hFNwhVVyh0ZzlUh7nnB8hUF8pkJ8pkx oTuBuFmBn3SEkHeOn3mNnUeBqUiBqUqD
    q1CBpFKCpVuDoVyEokeGs0eHs0aKvkaMvlGOuGqKom Pp3yUpziEwTiFwz2KxT K
    xE6VylKUw1qaxV6fx0CQ0E b1lCd1l6h0Wiq1Wyu12Wp22aq3FOi4F2s5WCt5W64
    7XW24Xu743u/6omfsZymroqhso6jtJynsJ2psaS1w6S2xIvH7YvI7d/h5ODi5eDk
    5 Dm6uLn7OPo7QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAACH SUNvcHlyaWdodCBJTkNPUlMgR21iSCAod3d3Lmljb25l
    eHBlcmllbmNlLmNvbSkgLSBVbmxpY2Vuc2VkIHByZXZpZXcgaW1hZ2UAIfkEBQAA
    bwAsAAAAABgAGAAAB9eAb4KDhIWGh4iJiouMjY6PiGkwCgAACjBqj2ABBSw3Ny0H
    AWONYwIqYmFfX2FiKwNki2kEFEZFRba3RhUEa4o2Cy41NT/FPsMuDDaKDRYfLzM8
    PT0zMy8fFw2KBRoeJDI6Ojs5MSQdGwaKCCAmJ0FE8ERAJyUhCYoPIjRDTU5PT06a
    CKEx4oEiHBuWMJlCpUoVKlOYKOFwQxEbB0ikXOHSpQsXK1GSQGizyIwFKFq8oDnj
    JQsUDGYalYmAYsqWLVhSSIjpqM2RDBMuZDjiBpLRo0iTKjUaCAA7
"""

if __name__ == "__main__":
    main()