1

我有两张完全相同大小的图像。一个是基本背景图像,另一个图像是背景图像的更改版本。我试图在背景图像的顶部显示一个静态大小(例如 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()

背景图片: 在此处输入图像描述

改变图像: 在此处输入图像描述

期望的结果: 在此处输入图像描述

4

1 回答 1

2

实际上,您几乎完成了所有工作。你只需要重新定位一些东西并在这里和那里添加一些东西(我不会以一种干净的方式来做,否则我必须改变更多的东西。你可以稍后自己做,不要有重复的行你的代码):

  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_windowmainloop 之前的代码是一样的
。祝你好运。

于 2017-08-18T19:54:59.093 回答