基于Tkinter实现画布椭圆拖拽：方向异常与联动问题排查

问题根源 #

1. 原代码在鼠标移动时同时操作两个圆形，导致二者绑定无法独立拖拽。
2. canvas.move()方法需要传入相对当前位置的偏移量，但原代码直接使用鼠标的绝对坐标event.x/event.y，这会让圆形每次移动都累加绝对坐标值，出现方向异常、位置跳变的问题。
3. 没有判断鼠标按下时选中的是哪个圆形，无法区分拖拽目标。

修正方案 #

• 绑定<ButtonPress-1>事件，记录鼠标按下时的坐标，以及点击位置相对于选中圆形左上角的偏移量，同时标记当前选中的圆形。
• 在<B1-Motion>事件中，仅移动当前选中的圆形，通过当前鼠标坐标减去按下时的坐标得到偏移量，再调用canvas.coords()完成移动。

修正后的代码 #

from tkinter import *

class MovingCircle:
    def __init__(self):
        self.window = Tk()
        self.window.title("Moving circles")
        self.window.geometry("500x400")

        self.canvas1 = Canvas(self.window, width=300, height=300, bg="grey")
        self.canvas1.pack(pady=30)
        
        # 创建两个圆形
        self.circle1 = self.canvas1.create_oval(10, 10, 50, 50, fill="red")
        self.circle2 = self.canvas1.create_oval(70, 70, 110, 110, fill="blue")
        
        # 记录当前选中的圆形和初始偏移
        self.selected_circle = None
        self.offset_x = 0
        self.offset_y = 0
        
        # 绑定鼠标事件
        self.canvas1.bind("<ButtonPress-1>", self.on_press)
        self.canvas1.bind("<B1-Motion>", self.on_drag)

        self.window.mainloop()

    def on_press(self, event):
        # 检查点击位置是否在某个圆形内
        items = self.canvas1.find_overlapping(event.x, event.y, event.x, event.y)
        if items:
            self.selected_circle = items[0]
            # 获取选中圆形的当前位置
            x1, y1, x2, y2 = self.canvas1.coords(self.selected_circle)
            # 计算鼠标点击位置相对于圆形左上角的偏移
            self.offset_x = event.x - x1
            self.offset_y = event.y - y1

    def on_drag(self, event):
        if self.selected_circle:
            # 计算圆形需要移动到的新位置（基于鼠标位置和偏移量）
            new_x1 = event.x - self.offset_x
            new_y1 = event.y - self.offset_y
            new_x2 = new_x1 + 40  # 圆形宽度（50-10=40）
            new_y2 = new_y1 + 40  # 圆形高度（50-10=40）
            # 移动圆形到新位置
            self.canvas1.coords(self.selected_circle, new_x1, new_y1, new_x2, new_y2)

MovingCircle()

代码说明 #

• on_press方法：当鼠标按下时，通过find_overlapping检测点击位置是否在圆形范围内，记录选中的圆形，并计算鼠标点击点与圆形左上角的偏移（避免圆形跳转到鼠标位置）。
• on_drag方法：仅移动当前选中的圆形，通过鼠标当前位置减去偏移量，得到圆形的新位置，使用canvas.coords()直接设置圆形的新坐标，实现平滑拖拽。
• 两个圆形现在可以独立拖拽，移动方向完全跟随鼠标动作。

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