Tkinter 将矩形小部件下方的小部件绑定到鼠标事件

Question

希望我能正确解释问题。我下面的示例能够移动在 canvas 上定义的两个图像。问题是我想要一个矩形，它也在图像顶部的 canvas 上定义。当我使用 .tag_raise 执行此操作时，鼠标拖动触发的事件是由矩形而不是图像触发的。

我尝试使用 bing_class，但没有用。我试图为矩形定义一个单独的 canvas，但它必须覆盖主 canvas，我卡住了。

如何将矩形保持在顶部但将图像绑定到我的鼠标拖动事件？

import Tkinter as tk # for Python2
import PIL.Image, PIL.ImageTk

win = tk.Tk()
canvas = tk.Canvas(win, height = 500, width = 500)

#Create a rectangle with stipples on top of the images
rectangle = canvas.create_rectangle(0, 0, 400, 300, fill = "gray", stipple = "gray12")

#Create two images
SPRITE = PIL.Image.open("image.jpg")
imagePIL = SPRITE.resize((100, 100))
imagePI = PIL.ImageTk.PhotoImage(imagePIL)
image1 = canvas.create_image(100, 100, image = imagePI, tags = "image")
image2 = canvas.create_image(200, 200, image = imagePI, tags = "image")

#Callback
# Here I select image1 or image2 depending on where I click, and
# drag them on the canvas. The problem is when I put the rectangle
# on top using tag_raise (see below).
def callback(event):
    id = canvas.find_withtag(tk.CURRENT)
    canvas.coords(id, (event.x, event.y))

#Binding
canvas.bind("<B1-Motion>", callback)
#Place the rectangle on top of all
canvas.pack()

# This is the problem. I want to have the rectangle on top and be able to use the callback
#canvas.tag_raise(rectangle)

canvas.mainloop()

解决方案： 我用以下代码增强了 Nehal 的回答。他的回答有一个小故障，可以切换图像。在我的增强中，我通过为每个图像存储一个锁来解决它，这样，在 canvas 上拖动图像时，会拖动相同的图像。当我移动时image1 over image2 我注意到 image1 并没有完全移动到 image2 之上，这对我来说很好。

import Tkinter as tk # for Python2
import PIL.Image, PIL.ImageTk

win = tk.Tk()
canvas = tk.Canvas(win, height = 500, width = 500)

#Create a rectangle with stipples on top of the images
rectangle = canvas.create_rectangle(0, 0, 400, 300, fill = "gray", stipple = "gray12")

#Create two images
SPRITE = PIL.Image.open("image.jpg")
imagePIL = SPRITE.resize((100, 100))
imagePI = PIL.ImageTk.PhotoImage(imagePIL)
image1 = canvas.create_image(100, 100, image = imagePI, tags = "image")
image2 = canvas.create_image(200, 200, image = imagePI, tags = "image")
images = [image1, image2]
locks = [True, True]

def getImage(x, y):
    for image in images:
        curr_x, curr_y = canvas.coords(image)
        x1 = curr_x - imagePI.width()/2
        x2 = curr_x + imagePI.width()/2
        y1 = curr_y - imagePI.height()/2
        y2 = curr_y + imagePI.height()/2
        if (x1 <= x <= x2) and (y1 <= y <= y2):
            return image
#Callback
# Here I select image1 or image2 depending on where I click, and
# drag them on the canvas.
def callback(event):
    id  = getImage(event.x, event.y)
    if id:
        if locks[images.index(id)] is False: #Hold on to the image on which I originally clicked
            canvas.coords(id, (event.x, event.y))

def mouseClick(event):
    id  = getImage(event.x, event.y)
    if id:
        locks[images.index(id)] = False
    print(locks)

def mouseRelease(event):
    id  = getImage(event.x, event.y)
    if id:
        locks[images.index(id)] = True
    print(locks)
#Binding
canvas.bind("<ButtonPress-1>", mouseClick)      #unlock the image to move it
canvas.bind("<ButtonRelease-1>", mouseRelease)  #lock the image
canvas.bind("<B1-Motion>", callback)
#Place the rectangle on top of all
canvas.pack()

# This was the original problem
canvas.tag_raise(rectangle)

canvas.mainloop()

Answer 1

我不知道 tkinter 执行此操作的具体方法，但是，您可以尝试获取最近图像的坐标并使用它们。像这样：

import Tkinter as tk # for Python2
import PIL.Image, PIL.ImageTk

win = tk.Tk()
canvas = tk.Canvas(win, height = 500, width = 500)

#Create a rectangle with stipples on top of the images
rectangle = canvas.create_rectangle(0, 0, 400, 300, fill = "gray", stipple = "gray12")

#Create two images
SPRITE = PIL.Image.open("image.jpg")
imagePIL = SPRITE.resize((100, 100))
imagePI = PIL.ImageTk.PhotoImage(imagePIL)
image1 = canvas.create_image(100, 100, image = imagePI, tags = "image")
image2 = canvas.create_image(200, 200, image = imagePI, tags = "image")
images = [image1, image2]

def getImage(x, y): 
    for image in images:
        curr_x, curr_y = canvas.coords(image)
        x1 = curr_x - imagePI.width()/2
        x2 = curr_x + imagePI.width()/2
        y1 = curr_y - imagePI.height()/2
        y2 = curr_y + imagePI.height()/2
        if (x1 <= x <= x2) and (y1 <= y <= y2):
            return image
#Callback
# Here I select image1 or image2 depending on where I click, and
# drag them on the canvas. The problem is when I put the rectangle
# on top using tag_raise (see below).
def callback(event):
    id  = getImage(event.x, event.y)
    if id: 
        canvas.coords(id, (event.x, event.y))

#Binding
canvas.bind("<B1-Motion>", callback)
#Place the rectangle on top of all
canvas.pack()

# This is the problem. I want to have the rectangle on top and be able to use the callback
canvas.tag_raise(rectangle)

canvas.mainloop()

Tkinter 将矩形小部件下方的小部件绑定到鼠标事件

Tkinter bind widgets below a rectangle widget to a mouse event

python

user-interface

canvas

tkinter

tkinter-canvas