Move Image in Tkinter in Python

Hey folks, This tutorial will help you move an image in Tkinter in Python, in any direction and also bind key presses to trigger those movements. So for this project, we are going to use an in-built library of Python namely: Tkinter

Using:

from tkinter import *

Move image in Tkinter – Python

We will first look at the following functions before moving to the main program:

The move_left() function:

def move_left(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(x1<=0):
        return
    else:
        c1.move(ball,-5,0)
        print("Left") #Only for test purpose.Remove if not needed.

This above function enables the movement of the image 5 pixels in the negative direction of the X-axis.

The move_right() function:

def move_right(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(x2>=c1.winfo_width()-5):
        return
    else:
        c1.move(ball,5,0)
        print("Right")  #Only for test purpose.Remove if not needed.

This above function enables the movement of the image 5 pixels in the positive direction of the X-axis.

The move_up() function:

def move_up(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(y1<=0):
        return
    else:
        c1.move(ball,0,-5) 
        print("Up")    #Only for test purpose.Remove if not needed.

This above function enables the movement of the image 5 pixels in the positive direction of the Y-axis.

The move_down() function:

def move_down(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(y2>=c1.winfo_height()-5):
        return
    else:
        c1.move(ball,0,5)  
        print("Down")  #Only for test purpose.Remove if not needed.

This above function enables the movement of the image 5 pixels in the negative direction of the Y-axis.

Note: We have created the temp parameter for each of the above functions because on being called by key presses, a value is returned, so that value has to be stored even if it’s of no use to the program

In the main program we follow the following steps:

1. We define the tk window using Tk() as the root variable.
2. Then we create the title of the window.
3. Next, we create a Canvas with some background color.
4. Then we define a variable to store the image to be displayed.
5. In the next step, we use .create_image() method of the Canvas class to create text on the canvas, whilst also passing parameters of the method.
6. After this, we bind all the arrow keys to the above-mentioned functions respectively.
7. We end by a root.mainloop() function to keep the events on the main window active and all widgets interactive.

The whole program looks like so:

from tkinter import *
def move_left(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(x1<=0):
        return
    else:
        c1.move(ball,-5,0)
        print("Left") #Only for test purpose.Remove if not needed.
def move_right(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(x2>=c1.winfo_width()-5):
        return
    else:
        c1.move(ball,5,0)
        print("Right")  #Only for test purpose.Remove if not needed.
def move_up(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(y1<=0):
        return
    else:
        c1.move(ball,0,-5) 
        print("Up")    #Only for test purpose.Remove if not needed. 
def move_down(temp):
    x1,y1,x2,y2=c1.bbox("ball")
    if(y2>=c1.winfo_height()-5):
        return
    else:
        c1.move(ball,0,5)  
        print("Down")  #Only for test purpose.Remove if not needed.
################## Main Program ####################
root=Tk()
root.title('Move Image')
c1=Canvas(root,bg='white')
image=PhotoImage(file='ball.png')
ball=c1.create_image(0,0,image=image,anchor=NW,tags=("ball"))
c1.pack(fill="both",expand=True)
root.bind('<Right>', move_right)
root.bind('<Left>', move_left)
root.bind('<Up>', move_up)
root.bind('<Down>', move_down)
root.mainloop()

To learn more about Tkinter:

Introduction to Tkinter module in Python

Also read:

Move Text from right to left in Tkinter

Bind a function to a Tkinter button – Python GUI

Tkinter pack() , grid() Method In Python