tkinter - マウスでキャンバスイメージにイメージオーバーレイを表示する

Question

全く同じサイズの2つのイメージがあります。一方は基本背景画像であり、他方の画像は背景画像の変更されたバージョンである。私は、変更されたイメージの静的サイズ（100,100など）のウィンドウを背景イメージの上に表示しようとしていますが、マウスが動かされた場所にそっくり並んでいます。変更されたイメージをベースイメージにオーバーレイする移動ウィンドウのソート。スタックオーバーフローのどこかで見つかったベースコードを変更しようとしていますが、目的の結果を得るためにスタックを変更する方法がわからないようです。私がこれを間違った方法でやっていると思っている場合や、私が見逃した近くの例がある場合は、代わりの方法を提案してください。私は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): 
       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") 
   

そして、あなたが行われている。これに

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

！ご覧のように、ちょうど移動したばかりのコードといくつかのスパイスがあります。私はキャンバスをあまり使っていないので、最後の部分がもう一方の上に新しいイメージを作成し続けるか、既存のものを置き換えるかどうかは分かりません。だから私はそこで使うのに最高のコードかどうかわからないが、うまくいく。
move_windowのコードの多くがメインループの前と同じであることがわかっているので、このコードを整理してください。
幸いです。