如何在Tkinter中实现双指触摸板全方向滚动？

我希望在Tkinter里实现触摸板双指任意方向滚动（无需按键，直接通过双指拖动实现上下、左右及对角线滚动），目前的代码只能实现单一对角线滚动，代码如下：

import tkinter as tk

class Scene:
    def __init__(self, canvas):
        self.canvas = canvas
        self.elements = [
            {
                "type": "rect",
                "x": canvas.winfo_width() / 2,
                "y": canvas.winfo_height() / 2,
                "width": 200,
                "height": 200,
                "color": (55 / 255, 55 / 255, 10 / 255),
            },
            {
                "type": "rect",
                "x": 100,
                "y": 300,
                "width": 200,
                "height": 200,
                "color": (155 / 255, 200 / 255, 10 / 255),
            },
        ]

    def update_scene(self, offset):
        for element in self.elements:
            element["x"] -= offset[0]
            element["y"] -= offset[1]
        self.render_scene()

    def render_scene(self):
        self.canvas.delete("all")
        for element in self.elements:
            if element["type"] == "rect":
                self.canvas.create_rectangle(
                    element["x"],
                    element["y"],
                    element["x"] + element["width"],
                    element["y"] + element["height"],
                    fill=f"#{int(element['color'][0] * 255):02x}{int(element['color'][1] * 255):02x}{int(element['color'][2] * 255):02x}",
                )
            else:
                print(f"Error: type {element['type']} is not supported.")


root = tk.Tk()
root.geometry("{}x{}".format(800, 600))

canvas = tk.Canvas(root)
canvas.pack(fill="both", expand=True)

canvas_scroll = [0, 0]

scene = Scene(canvas)
scene.render_scene()


def on_mouse_scroll(event):
    canvas_scroll[0] = event.delta
    canvas_scroll[1] = event.delta
    scene.update_scene(canvas_scroll)


canvas.bind("<MouseWheel>", on_mouse_scroll)

root.mainloop()

当前代码仅绑定了<MouseWheel>事件，只能获取单一的event.delta值，无法区分横向和纵向的滚动偏移，因此只能实现对角线滚动。

解决方案 #

Tkinter本身没有原生的双指滚动事件，但可以通过适配不同平台的滚动事件参数，区分横向和纵向的滚动分量，实现任意方向的双指滚动。

适配多平台的完整实现 #

import tkinter as tk

class Scene:
    def __init__(self, canvas):
        self.canvas = canvas
        self.elements = [
            {
                "type": "rect",
                "x": canvas.winfo_width() / 2,
                "y": canvas.winfo_height() / 2,
                "width": 200,
                "height": 200,
                "color": (55 / 255, 55 / 255, 10 / 255),
            },
            {
                "type": "rect",
                "x": 100,
                "y": 300,
                "width": 200,
                "height": 200,
                "color": (155 / 255, 200 / 255, 10 / 255),
            },
        ]

    def update_scene(self, offset):
        # 调整滚动速度系数，可根据需求修改
        scroll_speed = 2
        for element in self.elements:
            element["x"] -= offset[0] * scroll_speed
            element["y"] -= offset[1] * scroll_speed
        self.render_scene()

    def render_scene(self):
        self.canvas.delete("all")
        for element in self.elements:
            if element["type"] == "rect":
                hex_color = f"#{int(element['color'][0]*255):02x}{int(element['color'][1]*255):02x}{int(element['color'][2]*255):02x}"
                self.canvas.create_rectangle(
                    element["x"], element["y"],
                    element["x"] + element["width"],
                    element["y"] + element["height"],
                    fill=hex_color
                )
            else:
                print(f"Error: 不支持的元素类型 {element['type']}")


root = tk.Tk()
root.geometry("800x600")

canvas = tk.Canvas(root)
canvas.pack(fill="both", expand=True)

scene = Scene(canvas)
scene.render_scene()

def on_scroll(event):
    delta_x = 0
    delta_y = 0

    # 适配不同平台的滚动事件参数
    if hasattr(event, 'deltaX') and hasattr(event, 'deltaY'):
        # macOS或支持deltaX/Y的平台，直接获取双指滚动的横纵分量
        delta_x = event.deltaX
        delta_y = event.deltaY
    else:
        # Windows/Linux平台，处理单轴滚动，同时兼容触摸板横向滚动的映射
        if event.state & 0x0010:
            delta_x = event.delta
        else:
            delta_y = event.delta

    # 统一转换为正负1的方向值，消除不同平台的delta数值差异
    delta_x = delta_x // abs(delta_x) if delta_x != 0 else 0
    delta_y = delta_y // abs(delta_y) if delta_y != 0 else 0

    scene.update_scene((delta_x, delta_y))

# 绑定核心滚动事件
canvas.bind("<MouseWheel>", on_scroll)
# 适配Linux平台的鼠标滚轮事件
canvas.bind("<Button-4>", lambda e: on_scroll(tk.Event(e.widget, delta=120)))
canvas.bind("<Button-5>", lambda e: on_scroll(tk.Event(e.widget, delta=-120)))

root.mainloop()

关键修改说明 #

1. 区分横纵滚动分量：通过检测event.deltaX和event.deltaY获取触摸板双指滚动的横向、纵向偏移，适配macOS等原生支持双轴滚动事件的平台
2. 统一平台差异：将不同平台的delta值转换为正负1的方向值，避免Windows（delta为±120）和macOS（delta为±1）的数值差异
3. 多平台事件绑定：补充Linux平台的<Button-4>/<Button-5>事件绑定，确保全平台兼容
4. 滚动速度控制：新增scroll_speed系数，可根据需求调整滚动的灵敏度

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