tkinter Canvas 实现拖曳与缩放功能

拖曳功能

tkinter 内建了拖曳功能：使用 scan_mark(x0, y0) 记住当前坐标 ，接着使用 scan_dragto(x1, y1, gain=10) 将 view of the canvas 拖曳到 位置。

下面的例子参考 stackoverflow 的 Move a tkinter canvas with Mouse：

from tkinter import Tk, Canvas, ttk
import random


class Drag(ttk.Frame):
    def __init__(self, master, **kw):
        super().__init__(master, **kw)
        self.canvas = Canvas(self, width=400, height=400, background="bisque")
        self.xsb = ttk.Scrollbar(self, orient="horizontal", command=self.canvas.xview)
        self.ysb = ttk.Scrollbar(self, orient="vertical", command=self.canvas.yview)
        self.canvas.configure(yscrollcommand=self.ysb.set, xscrollcommand=self.xsb.set)
        self.canvas.configure(scrollregion=(0,0,1000,1000))
        # draw
        self.draw_rectangle()
        self.canvas.create_text(50,10, anchor="nw", 
                                text="Click and drag to move the canvas")
        self.layout()
        # This is what enables scrolling with the mouse:
        self.canvas.bind("<ButtonPress-1>", self.scroll_start)
        self.canvas.bind("<B1-Motion>", self.scroll_move)

        
    def draw_rectangle(self):
        for n in range(50):
            x0 = random.randint(0, 900)
            y0 = random.randint(50, 900)
            x1 = x0 + random.randint(50, 100)
            y1 = y0 + random.randint(50,100)
            color = ("red", "orange", "yellow", "green", "blue")[random.randint(0,4)]
            self.canvas.create_rectangle(x0,y0,x1,y1, outline="black", fill=color)
        
    def layout(self):
        self.xsb.grid(row=1, column=0, sticky="ew")
        self.ysb.grid(row=0, column=1, sticky="ns")
        self.canvas.grid(row=0, column=0, sticky="nsew")
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)
        
    def scroll_start(self, event):
        self.canvas.scan_mark(event.x, event.y)

    def scroll_move(self, event):
        self.canvas.scan_dragto(event.x, event.y, gain=1)


if __name__ == "__main__":
    root = Tk()
    self = Drag(root)
    self.pack(fill="both", expand=True)
    root.mainloop()

效果：

图1 简单的拖曳 canvas 对象

该例子实现了使用鼠标左键记录 ，鼠标移动时，触发拖曳功能，拖曳整个 canvas。

缩放功能

参考 Move and zoom a tkinter canvas with mouse

需要注意：鼠标事件报告的是“屏幕坐标”（'screen coordinates'）。当您使用滚动画布时，通常需要将这些坐标转换为“画布（即，滚动区域）坐标”。

class DragZoom(Drag):
    def __init__(self, master, **kw):
        super().__init__(master, **kw)
        self.canvas.create_text(50,10, anchor="nw", text="\nScroll to zoom.")
        #linux scroll
        self.canvas.bind("<Button-4>", self.zoomerP)
        self.canvas.bind("<Button-5>", self.zoomerM)
        #windows scroll
        self.canvas.bind("<MouseWheel>",self.zoomer)
        
    def tocanvasxy(self, event):
        return int(self.canvas.canvasx(event.x)), int(self.canvas.canvasx(event.x))
        
    def scroll_start(self, event):
        x, y = self.tocanvasxy(event)
        self.canvas.scan_mark(x, y)

    def scroll_move(self, event):
        x, y = self.tocanvasxy(event)
        self.canvas.scan_dragto(x, y, gain=1)
        
    #windows zoom
    def zoomer(self, event):
        x, y = self.tocanvasxy(event)
        if (event.delta > 0):
            self.canvas.scale("all", x, y, 1.1, 1.1)
        elif (event.delta < 0):
            self.canvas.scale("all", x, y, 0.9, 0.9)
        self.canvas.configure(scrollregion = self.canvas.bbox("all"))

    #linux zoom
    def zoomerP(self,event):
        x, y = self.tocanvasxy(event)
        self.canvas.scale("all", x, y, 1.1, 1.1)
        self.canvas.configure(scrollregion = self.canvas.bbox("all"))

    def zoomerM(self,event):
        x, y = self.tocanvasxy(event)
        self.canvas.scale("all", x, y, 0.9, 0.9)
        self.canvas.configure(scrollregion = self.canvas.bbox("all"))
        
if __name__ == "__main__":
    root = Tk()
    self = DragZoom(root)
    self.pack(fill="both", expand=True)
    root.mainloop()

DragZoom 实现了拖曳与缩放功能。