【问题标题】:How to have multiple draggable canvas widgets?如何拥有多个可拖动的画布小部件?
【发布时间】:2020-05-28 20:46:05
【问题描述】:

到目前为止,我有:

  1. 来自 Drag and drop image object 的重新调整的代码允许多个自定义小部件可拖动。

  2. 除了尝试强制可拖动小部件仅在画布尺寸内移动之外,重新调整代码用途进展顺利。

  3. 如果将单个小部件添加到画布,则该小部件可拖动并绑定到画布尺寸。

  4. 问题:如果向画布添加任何数量大于一个的小部件,则只有最后添加的小部件可拖动并绑定到画布尺寸。 由于检测到的鼠标运动异常大的鼠标运动回调中的逻辑,所有其他小部件都无法移动。

  5. 可拖动小部件是面向对象的,因此制作单个可拖动小部件的逻辑与相同小部件类型的多个其他实例相同。

  6. 到目前为止我的操作代码是:

import os
import tkinter as tk

APP_TITLE = "Drag & Drop Tk Canvas Images"
APP_XPOS = 100
APP_YPOS = 100
APP_WIDTH = 300
APP_HEIGHT = 200

class CreateCanvasObject(object):    

    def __init__(self, canvas, block_name):
        self.canvas = canvas

        self.block_width = 250
        self.block_height = 250

        self.name = block_name

        self.max_speed = 30

        self.win_width = self.canvas.winfo_width()
        self.win_height = self.canvas.winfo_height()

        self.block_main = tk.Frame(self.canvas, bd=10, relief=tk.RAISED)
        self.block_main.pack(side=tk.TOP, fill=tk.BOTH, expand=False, padx=0, pady=0)

        self.block_name = tk.Label(self.block_main, text=block_name, anchor=tk.CENTER, font='Helvetica 10 bold', cursor='fleur')
        self.block_name.pack(fill=tk.BOTH, expand=True, padx=5, pady=5)

        self.image_obj = self.canvas.create_window( (0, 0), window=self.block_main, anchor="nw", width=self.block_width, height=self.block_height)

        self.block_name.bind( '<Button1-Motion>', self.move)
        self.block_name.bind( '<ButtonRelease-1>', self.release)
        self.move_flag = False    

        self.canvas.bind("<Configure>", self.configure)


    def configure(self, event):
        self.win_width = event.width
        self.win_height = event.height        


    def move(self, event):

        print('Moving [%s]'%self.name)
        print(event)

        if self.move_flag:

            dx, dy = event.x, event.y

            abs_coord_x, abs_coord_y = self.canvas.coords( self.image_obj )

            cond_1 = abs_coord_x + dx >= 0
            cond_2 = abs_coord_y + dy >= 0
            cond_3 = (abs_coord_x + self.block_width + dx) <= self.win_width
            cond_4 = (abs_coord_y + self.block_height + dy) <= self.win_height

            print('abs_coord_x = %3.2f ; abs_coord_y = %3.2f'%(abs_coord_x, abs_coord_y))
            print('dx = %3.2f ; dy = %3.2f'%(dx, dy))
            print('self.block_width = %3.2f'%(self.block_width))
            print('self.block_height = %3.2f'%(self.block_height))
            print('Cond 1 = %s; Cond 2 = %s; Cond 3 = %s; Cond 4 = %s\n\n'%(cond_1, cond_2, cond_3, cond_4))

            if cond_1 and cond_2 and cond_3 and cond_4:
                self.canvas.move(self.image_obj, dx, dy)

        else:
            self.move_flag = True
            self.canvas.tag_raise(self.image_obj)


    def release(self, event):
        self.move_flag = False



class Application(tk.Frame):

    def __init__(self, master):
        self.master = master
        self.master.protocol("WM_DELETE_WINDOW", self.close)
        tk.Frame.__init__(self, master)

        self.canvas = tk.Canvas(self, width=800, height=800, bg='steelblue', highlightthickness=0)
        self.canvas.pack(fill=tk.BOTH, expand=True)

        self.block_1 = CreateCanvasObject(canvas=self.canvas, block_name='Thing 1')
        self.block_2 = CreateCanvasObject(canvas=self.canvas, block_name='Thing 2')

    def close(self):
        print("Application-Shutdown")
        self.master.destroy()

def main():
    app_win = tk.Tk()
    app_win.title(APP_TITLE)
    app_win.geometry("+{}+{}".format(APP_XPOS, APP_YPOS))

    Application(app_win).pack(fill='both', expand=True)

    app_win.mainloop()


if __name__ == '__main__':
    main()

【问题讨论】:

  • 我建议您重构示例,使其不需要图像。您可以像拖动图像一样轻松地拖动矩形,矩形使我们更容易运行您的代码。此外,似乎有很多帧。如果问题是关于在画布上拖动项目,我们只需要画布即可。
  • 有关在画布上拖动多个项目之一的示例,请参阅此答案:stackoverflow.com/a/6789351/7432
  • 请简化您的代码,使其成为其他人可以轻松运行的minimal reproducible example
  • 根据要求,我们已对所有人进行了更新,以消除对图像的依赖,并更接近于最小的可重现示例。

标签: python canvas tkinter drag-and-drop


【解决方案1】:

问题的根源在于这行代码:

self.canvas.bind("<Configure>", self.configure)

每当您调用self.canvas.bind 时,都会替换小部件上的任何先前绑定。因此,当绑定被触发时,只有最后一个 CreateCanvasObject 会看到该事件,因为它将替换之前的 CreateCanvasObject 对象创建的绑定。

因此,您只能更新最后创建的对象的 self.win_widthself.win_height。由于您使用这些值来计算 self.cond3self.cond4,因此这些条件始终为 false,因此对象永远不会移动。

一个简单的解决方案是删除绑定并删除configure 方法,而是在move 函数中计算宽度和高度。那,或者使 self.win_widthself.win_height 类变量,所以当你更新一个你更新所有。这些不是解决问题的唯一方法,但它们是最简单的。

【讨论】:

  • 天才,谢谢!我通过 self.canvas.winfo_reqwidth() 和 self.canvas.winfo_reqheight() 在移动函数内部设置了 self.win_width 和 self.win_height。现在一切都很顺利。
  • Bryan,在您对这篇文章的第一次评论中,您对大量框架发表了评论。当然,这是一个坏习惯,我经常做一些事情来控制小部件的布局。诚然,我真的不知道更好,只是对这些选项感到满意。你能推荐一些更好的布局管理方法吗?
  • @TonyA:使用大量帧并没有错。它们的存在正是为了使布局更容易。关键是,他们没有必要重现这个问题中的问题。问题中的示例应尽可能简短。
猜你喜欢
  • 1970-01-01
  • 2023-01-16
  • 2015-12-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
相关资源
最近更新 更多