Python Tkinter画布元素拖拽后偏移问题求助

问题描述 #

在Tkinter画布上拖拽线条元素时，每次点击拖拽，元素会向西北方向偏移，光标无法与元素保持对齐。

问题原因 #

1. canvas.moveto()方法默认将元素的左上角移动到指定坐标，而非以光标点击点作为锚点。
2. 未记录点击瞬间光标相对于元素的偏移量，直接用光标坐标作为元素左上角位置，导致偏移。
3. 仅绑定了<B1-Motion>事件，缺少点击初始位置的记录逻辑。

解决方案 #

修改Preview类代码，添加点击事件记录偏移量，再基于偏移量计算元素目标位置：

class Preview(tk.Toplevel):

    COLORS = [
        "black", 
        "white", 
        "gray",
        "silver", 
        "maroon", 
        "red",
        "purple", 
    ]

    def __init__(self, parent):
        super().__init__(parent)

        self.geometry('462x1920');
        self.title('Toplevel Window');
        self.resizable(False, True);

        self.background = tk.PhotoImage(file = "./assets/test.png");
        
        # background image
        self.canvas = tk.Canvas(self, width = 462, height = 1920);
        self.canvas.create_image(0, 0, image = self.background);
        
        self.position = tk.Label(self, text = "hola");
        self.canvas.create_window(100, 300, window = self.position);

        # color entry 
        colors_text = tk.Label(self, text = "number of colors:");
        self.canvas.create_window(110, 680, window = colors_text);
   
        self.number_colors = tk.Entry(self, bg = "white", fg = "black");
        self.number_colors.insert(0, "6");
        self.canvas.create_window(150, 700, window = self.number_colors);
        
        # create bars
        self.createBars();

        # color entry 
        render_button = tk.Button(self, text = "Render", bg = "white", command = self.resetColors);
        self.canvas.create_window(300, 700, window = render_button);

        # 添加点击事件绑定，记录偏移量
        self.canvas.bind("<Button-1>", self.on_line_click)
        self.canvas.bind("<B1-Motion>", self.moveColors);

        # 用于存储点击时的偏移量
        self.offset_x = 0
        self.offset_y = 0

        self.canvas.pack();

    def on_line_click(self, e):
        # 获取点击位置下的元素（取第一个匹配的line标签元素）
        item = self.canvas.find_closest(e.x, e.y)[0]
        # 检查是否是line标签的元素
        if "line" in self.canvas.gettags(item):
            # 获取元素的当前左上角坐标
            x0, y0 = self.canvas.coords(item)[0], self.canvas.coords(item)[1]
            # 计算光标相对于元素左上角的偏移量
            self.offset_x = e.x - x0
            self.offset_y = e.y - y0

    def moveColors(self, e):
        # 计算元素应该移动到的左上角坐标：光标坐标减去偏移量
        target_x = e.x - self.offset_x
        target_y = e.y - self.offset_y
        # 移动所有line标签元素
        self.canvas.moveto("line", target_x, target_y);
        value = tk.StringVar();
        value.set(f"X: {e.x} Y: {e.y}");
        self.position.config(text = value.get());
     
    def createBars(self):
        
        size = (200, 50);

        for i in range(int(self.number_colors.get())):
            self.canvas.create_line(
                size[0], i*size[1], size[0], size[1]+(i*size[1]), 
                fill = self.COLORS[i], 
                width = 10, 
                tags = ("line", self.COLORS[i])
            );
           
    def resetColors(self):
        self.canvas.delete("line");
        self.createBars();

代码说明 #

1. on_line_click方法：点击时找到光标下的线条元素，计算光标相对于元素左上角的偏移量并存储。
2. moveColors方法：用当前光标坐标减去偏移量，得到元素左上角的目标位置，确保光标始终对准点击时的位置。
3. 添加self.offset_x和self.offset_y实例变量，用于存储偏移量。

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