Tkinter Canvas使用scan_dragto平移后元素点击失效、坐标未更新问题

问题根源 #

你调用scan_dragto实现视口平移时，本质只是偏移了画布内容的渲染显示位置，画布上所有元素的实际存储坐标不会发生任何变化。
你之前判断点击位置用的event.x/event.y是鼠标相对于窗口左上角的原始坐标，没有计算视口的平移偏移量，所以点击平移后的元素显示位置时，坐标和元素实际存储的坐标匹配不上，自然找不到对应元素。

修复步骤 #

只需要做3处修改即可解决问题：

• 所有需要匹配画布元素的位置，都用Canvas自带的canvas.canvasx()和canvas.canvasy()方法，将窗口坐标转换为画布实际逻辑坐标，该方法会自动计算视口偏移量，不用手动计算
• 补上你代码里缺失的mouse_up事件处理函数，避免运行报错
• 修正drag_the_node函数里的错误赋值逻辑

修复后完整代码 #

from tkinter import *

def make():
    # 创建两个测试矩形
    global lbl,lbl2
    lbl2 = canvas.create_rectangle(50,30,70,50,fill="white",tags="tag")
    lbl = canvas.create_rectangle(20,0,40,20,fill="red",tags="tag")


def click_on_nodes(event):
    # 将窗口点击坐标转换为画布实际逻辑坐标
    click_x = canvas.canvasx(event.x)
    click_y = canvas.canvasy(event.y)
    # 用转换后的坐标查找元素
    selected = canvas.find_overlapping(click_x-5, click_y-5, click_x+5, click_y+5)
    if selected:
        canvas.tag_raise(selected)
        canvas.selected = selected[-1]  # 选中最上层的元素
        canvas.startxy = (click_x, click_y) # 存储转换后的坐标作为拖动起点
        print(canvas.selected, canvas.startxy)
    else:
        canvas.selected = None
        print("none")

def drag_the_node(event):
    if canvas.selected:
        print(f"矩形坐标: {canvas.coords(lbl)}")
        # 同样转换当前鼠标坐标
        cur_x = canvas.canvasx(event.x)
        cur_y = canvas.canvasy(event.y)
        # 计算移动距离
        dx, dy = cur_x - canvas.startxy[0], cur_y - canvas.startxy[1]
        # 移动选中的元素
        canvas.move(canvas.selected, dx, dy)
        # 更新起点坐标
        canvas.startxy = (cur_x, cur_y)

def pan_click(event):
    canvas.scan_mark(event.x,event.y)

def pan_move(event):
    canvas.scan_dragto(event.x,event.y,gain=1)
    print(f"视口平移后矩形实际坐标: {canvas.coords(lbl)}")

def mouse_up(event):
    # 右键松开后清空状态
    canvas.selected = None

root=Tk()
canvas=Canvas(root,bg="#222222",width=500,height=500)
canvas.pack()
make()

# 左键拖动元素绑定
canvas.bind("<Button-1>",click_on_nodes,add="+")
canvas.bind("<B1-Motion>",drag_the_node,add="+")

# 右键平移视口绑定
canvas.bind("<ButtonPress-3>",pan_click)
canvas.bind("<B3-Motion>",pan_move)
canvas.bind("<ButtonRelease-3>",mouse_up)

root.mainloop()

效果说明 #

修复后右键平移视口时，元素显示位置同步变化，左键点击平移后的元素可以正常选中拖动，两个功能互不冲突，元素的实际坐标也不会因为视口平移发生改变。

内容的提问来源于stack exchange，提问作者Tony