如何在同一时间python Tkinter中将多个图像显示和移动为同一图像？

Question

I trying to improve offline GPS system. I wrote a python code for handle images such as move as follow. I want modify this code to handle multiple images.This code able to load a single image and it can move within canvas by mouse movement. I need load multiple images to this program simultaneously and show each image parts as a single image such as google maps.

 from Tkinter import *
 root = Tk(); root.geometry( "600x400" )
 c = Canvas( root, width = 600, height = 400, bg = "white" ); c.pack()

class MainFrame:
    """Class to move an image on a Canvas screen ( Python 2.5 )"""
   def __init__( self, image ):
     self.__image = image
     self.__x, self.__y = 250,250
     self.__picture = c.create_image( self.__x, self.__y, image =  self.__image )
     self.__move = False
     c.bind( "<Button-1>", self.startMovement )
     c.bind( "<ButtonRelease-1>", self.stopMovement )
     c.bind( "<Motion>", self.movement )
     c.create_polygon((0, 100, 50, 0, 100, 100), fill="#4eccde")

 def startMovement( self, event ):
    global initi_x
    global initi_y
    initi_x = event.x
    initi_y = event.y
    self.__move = True


def stopMovement( self, event ):
    self.__move = False


def movement( self, event ):
    if self.__move:
        global initi_x
        global initi_y

        c.delete( self.__picture )
        x_axis = initi_x - event.x
        y_axis = initi_y - event.y
        self.__x -= x_axis
        self.__y -= y_axis
        print("x is ",event.x)
        print("y is ",event.y)
        #self.__x, self.__y =   event.x ,event.y

        self.__picture = c.create_image( self.__x, self.__y, image = self.__image )
        initi_x = event.x
        initi_y = event.y

        c[ "cursor" ] = "hand2"

if __name__ == "__main__":      
    im = PhotoImage( file = "new1.gif" )
    m = MainFrame( im )
    mainloop()

Answer 1

I like to recommend you use the [.move(tagOrId, xAmount, yAmount)] method to move objects in tk.canvas. Read more from this webpage .

Advantages of .move() method:

1. This can help you reduce the amount of codes you need to write.
2. It is more efficient than your approach. Your present approach of creating and destroying is inefficient and I would not recommend it.
3. It will allow you to move any objects (ie many images) your mouse pointer touches.

General Steps to move a tk.Canvas object :

1. Convert mouse pointer screen coordinate to canvas coordinate.
2. Get canvas object ID using the mouse pointer canvas coordinate.
3. Initialize mouse pointer canvas coordinate as start point.
4. During move, get mouse pointer new canvas coordinate.
5. Find the delta of new and old canvas coordinate.
6. Update mouse pointer initial canvas coordinate with mouse pointer new canvas given in step 4.
7. Use that info and object ID to move the object.

Revised Code: I have revised your code. See below. I have also provided comments to help you understand the general step. I have also shown in the code how you can add another image object. I trust you will be able to use these information to move on to create a tk.canvas with multiple images and moving them with your mouse pointer.

from Tkinter import *
root = Tk(); root.geometry( "600x400" )
c = Canvas( root, width = 800, height = 400, bg = "white" ); c.pack()

class MainFrame:
    """Class to move an image on a Canvas screen ( Python 2.5 )"""
    def __init__( self, image0, image1 ):
        self.__image0 = image0
        self.__image1 = image1
        self.__x, self.__y = 250,250
        self.__picture0 = c.create_image( self.__x, self.__y,
                                          image =  self.__image0 )
        self.__picture1 = c.create_image( self.__x, self.__y,
                                          image =  self.__image1 )
        c.create_polygon((0, 100, 50, 0, 100, 100), fill="#4eccde")
        self.__move = False
        c.bind( "<Button-1>", self.startMovement )
        c.bind( "<ButtonRelease-1>", self.stopMovement )
        c.bind( "<Motion>", self.movement )

    def startMovement( self, event ):
        self.__move = True
        self.initi_x = c.canvasx(event.x) #Translate mouse x screen coordinate to canvas coordinate
        self.initi_y = c.canvasy(event.y) #Translate mouse y screen coordinate to canvas coordinate
        print('startMovement init', self.initi_x, self.initi_y)
        self.movingimage = c.find_closest(self.initi_x, self.initi_y, halo=5) # get canvas object ID of where mouse pointer is 
        print(self.movingimage)
        print(c.find_all()) # get all canvas objects ID 

    def stopMovement( self, event ):
        self.__move = False

    def movement( self, event ):
        if self.__move:
            end_x = c.canvasx(event.x) #Translate mouse x screen coordinate to canvas coordinate
            end_y = c.canvasy(event.y) #Translate mouse y screen coordinate to canvas coordinate
            print('movement end', end_x, end_y)
            deltax = end_x - self.initi_x #Find the difference
            deltay = end_y - self.initi_y
            print('movement delta', deltax, deltay)
            self.initi_x = end_x #Update previous current with new location
            self.initi_y = end_y
            print('movement init', self.initi_x, self.initi_y)
            c.move(self.movingimage, deltax, deltay) # move object

if __name__ == "__main__":      
    im0 = PhotoImage( file = "monkey.gif" )
    im1 = PhotoImage( file = "smooch.gif" )
    im2 = PhotoImage( file = "giphy.gif" )
    m = MainFrame( im0, im1 )
    mainloop()