tkinter Canvas 实现拖曳与缩放功能

拖曳功能

tkinter 内建了拖曳功能:使用 scan_mark(x0, y0) 记住当前坐标 (x_0, y_0),接着使用 scan_dragto(x1, y1, gain=10)view of the canvas 拖曳到 (x_0 + gain*(x_1-x0), y_0+gain*(y_1-y_0) 位置。

下面的例子参考 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 对象

该例子实现了使用鼠标左键记录 (x_0, y_0),鼠标移动时,触发拖曳功能,拖曳整个 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 实现了拖曳与缩放功能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,277评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,689评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,624评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,356评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,402评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,292评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,135评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,992评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,429评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,492评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,092评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2 354