tkinter - 用鼠标移动显示图像叠加在画布上的图像

Question

我有两个完全相同大小的图像。一个是基础背景图像，另一个图像是背景图像的改变版本。我试图在背景图像的顶部显示一个静态大小（例如100,100）的窗口，在这些窗口中，无论鼠标移动到哪里，它们都会排列起来。在基本图像上覆盖改变后的图像的移动窗口的排序。我一直在试图修改我在Stack Overflow的某处找到的一些基本代码，但似乎无法弄清楚如何修改它以获得所需的结果。如果您认为我错误地采取了这种方式，或者在我错过了某个地方的情况下，请提出另一种方法。我对tkinter很新。另外，我不需要以下图像示例中显示的坐标系。只有图像是好的。

from tkinter import * 
from PIL import ImageTk, Image 
from scipy.misc import imread 

event2canvas = lambda e, c: (c.canvasx(e.x), c.canvasy(e.y)) 

# function to be called when mouse is moved 
def move_window(event): 
    # outputting x and y coords to console 
    cx, cy = event2canvas(event, canvas) 
    print("(%d, %d)/(%d, %d)" % (event.x, event.y, cx, cy)) 


if __name__ == "__main__": 
    root = Tk() 

    #setting up a tkinter canvas with scrollbars 
    frame = Frame(root, bd=2, relief=SUNKEN) 
    frame.grid_rowconfigure(0, weight=1) 
    frame.grid_columnconfigure(0, weight=1) 
    xscroll = Scrollbar(frame, orient=HORIZONTAL) 
    xscroll.grid(row=1, column=0, sticky=E+W) 
    yscroll = Scrollbar(frame) 
    yscroll.grid(row=0, column=1, sticky=N+S) 
    canvas = Canvas(frame, bd=0, xscrollcommand=xscroll.set, yscrollcommand=yscroll.set) 
    canvas.grid(row=0, column=0, sticky=N+S+E+W) 
    xscroll.config(command=canvas.xview) 
    yscroll.config(command=canvas.yview) 
    frame.pack(fill=BOTH,expand=1) 

    # loading background and altered image into numpy array. 
    background_image_data = imread("images/original.png", mode="L") 
    foreground_image_data = imread("images/altered.png", mode="L") 

    # Here is where the mouse coordinates should be injected to move the window over the background image 
    window_data = foreground_image_data[500:600, 500:600] 
    background_image_data[500:600, 500:600] = window_data 

    img = ImageTk.PhotoImage(Image.fromarray(background_image_data)) 
    canvas.create_image(0, 0,image=img,anchor="nw") 
    canvas.config(scrollregion=canvas.bbox(ALL), width=img.width(), height=img.height()) 

    test = canvas.bind("<ButtonPress-1>", move_window) 

    root.mainloop() 

背景图片：

修改过的图片：

所需的结果：

Answer 1

你居然做了几乎所有的。你只需要重新定位一些东西并在这里和那里添加一些东西（我不打算以一种干净的方式来做，否则我必须改变更多的东西。你以后可以自己做，以避免重复行您的代码）：

1. 更改您的这部分代码：

   # loading background and altered image into numpy array. 
   background_image_data = imread("images/original.png", mode="L") 
   foreground_image_data = imread("images/altered.png", mode="L") 
   
   # Here is where the mouse coordinates should be injected to move the window over the background image 
   window_data = foreground_image_data[500:600, 500:600] 
   background_image_data[500:600, 500:600] = window_data 
   
   img = ImageTk.PhotoImage(Image.fromarray(background_image_data)) 
   canvas.create_image(0, 0,image=img,anchor="nw") 
   canvas.config(scrollregion=canvas.bbox(ALL), width=img.width(), height=img.height()) 
   

   这样：

   # loading background and altered image into numpy array. 
   background_image_data = imread("images/original.png", mode="L") 
   foreground_image_data = imread("images/altered.png", mode="L") 
   '''Shouldn't change the original background image because 
   that way the changes will be permanent''' 
   bg_img = background_image_data.copy() 
   # Here is where the mouse coordinates should be injected to move the window over the background image 
   x,y,wh = (50,50,100) 
   window_data = foreground_image_data[y:y+wh,x:x+wh] 
   bg_img[y:y+wh,x:x+wh] = window_data 
   img = ImageTk.PhotoImage(Image.fromarray(bg_img)) 
   canvas.create_image(0, 0,image=img,anchor="nw") 
   canvas.config(scrollregion=canvas.bbox(ALL), width=img.width(), height=img.height()) 
   

2. 变化"<ButtonPress-1>"到"<Motion>"所以它会通过改变鼠标位置来运行。或者将其更改为"<B1-Motion>"，以便在您按住左键并移动鼠标时运行。

3. 更改此：

   def move_window(event): 
       cx, cy = event2canvas(event, canvas) 
   

   要这样：

   def move_window(event): 
       global img 
       cx, cy = event2canvas(event, canvas) 
       x,y,wh = (int(cx),int(cy),100) 
       window_data = foreground_image_data[y:y+wh,x:x+wh] 
       bg_img = background_image_data.copy() 
       bg_img[y:y+wh,x:x+wh] = window_data 
       img = ImageTk.PhotoImage(Image.fromarray(bg_img)) 
       canvas.create_image(0, 0,image=img,anchor="nw") 
   

大功告成！正如你所看到的那样，你所有的代码只是移动了一下，还有一些香料。我没有使用过非常多的画布，所以我不知道最后一部分会不断创建新的图像或替换已有的图像。所以我不知道它是否是最好的代码，但它的工作原理。
您最好清理此代码，因为您可以看到move_window中的很多代码与主循环之前的代码相同
祝您好运。