问题描述

如果您想要一个Scrollable图像小部件，那么最好的方法是创建一个Scrollable Image类，该类将对代码进行排列并使其看起来更好。因此，我为相同的对象创建了一个类，并添加了绑定，<MouseWheel>以便可以滚动鼠标以更方便地查看图像。

这是代码示例

import tkinter

class ScrollableImage(tkinter.Frame):
    def __init__(self, master=None, **kw):
        self.image = kw.pop('image', None)
        sw = kw.pop('scrollbarwidth', 10)
        super(ScrollableImage, self).__init__(master=master, **kw)
        self.cnvs = tkinter.Canvas(self, highlightthickness=0, **kw)
        self.cnvs.create_image(0, 0, anchor='nw', image=self.image)
        # Vertical and Horizontal scrollbars
        self.v_scroll = tkinter.Scrollbar(self, orient='vertical', width=sw)
        self.h_scroll = tkinter.Scrollbar(self, orient='horizontal', width=sw)
        # Grid and configure weight.
        self.cnvs.grid(row=0, column=0,  sticky='nsew')
        self.h_scroll.grid(row=1, column=0, sticky='ew')
        self.v_scroll.grid(row=0, column=1, sticky='ns')
        self.rowconfigure(0, weight=1)
        self.columnconfigure(0, weight=1)
        # Set the scrollbars to the canvas
        self.cnvs.config(xscrollcommand=self.h_scroll.set, 
                           yscrollcommand=self.v_scroll.set)
        # Set canvas view to the scrollbars
        self.v_scroll.config(command=self.cnvs.yview)
        self.h_scroll.config(command=self.cnvs.xview)
        # Assign the region to be scrolled 
        self.cnvs.config(scrollregion=self.cnvs.bBox('all'))
        self.cnvs.bind_class(self.cnvs, "<MouseWheel>", self.mouse_scroll)

    def mouse_scroll(self, evt):
        if evt.state == 0 :
            self.cnvs.yview_scroll(-1*(evt.delta), 'units') # For MacOS
            self.cnvs.yview_scroll(int(-1*(evt.delta/120)), 'units') # For windows
        if evt.state == 1:
            self.cnvs.xview_scroll(-1*(evt.delta), 'units') # For MacOS
            self.cnvs.xview_scroll(int(-1*(evt.delta/120)), 'units') # For windows

如何使用该类？

将ScrollableImage类视为Tkinter的小部件，并像使用其他任何Tkinter部件一样使用，因为如果您看到tkinter的源代码，则每个其他小部件都是一个类。

您可以使用多种方法ScrollableImage。

将上述代码作为包保存到同一目录中的新文件中<name>.py （例如：“ scrollimage.py”） ，然后像这样导入到您的主类中from scrollimage import ScrollableImage，然后将其用作普通窗口小部件。
或者，您可以ScrollableImage在导入主文件后将类放在顶部，然后像平常一样使用它。

import tkinter as tk
# Import the package if saved in a different .py file else paste 
# the ScrollableImage class right after your imports.
from scrollimage import ScrollableImage

root = tk.Tk()

# PhotoImage from tkinter only supports:- pgm, PPM, GIF, PNG format.
# To use more formats use PIL ImageTk.PhotoImage
img = tk.PhotoImage(file="logo.png")

image_window = ScrollableImage(root, image=img, scrollbarwidth=6, 
                               width=200, height=200)
image_window.pack()

root.mainloop()

绑定<MouseWheel>需要在窗口上进行一些修改，例如除以event.delta120。在macOS上，不需要进行修改。而在X11，你需要绑定两个<Button-4>，<Button-5>并且还分event.delta120。

Tkinter鼠标滚轮绑定

有关绑定<MouseWheel>及其在不同平台上如何工作的更多详细信息，请查看上面的链接。

构造Tkinter应用程序的最佳方法。

您可以参考上面的链接，详细了解如何在Tkinter中正确应用oop。使用OOP时，您始终可以继承Tkinter的任何小部件并对其进行修改，以创建新的小部件和有用的类，这些类将帮助您使Tkinter的应用程序更好。

解决方法

我想使用tkinter（Python 3）显示图像。图像很长。因此，我想添加一个垂直滚动条。这是我尝试过的：

（基于以下问题：Python中的Tkinter画布上.jpg图像的滚动条）

import tkinter
import PIL.Image,PIL.ImageTk

# Create a window
window = tkinter.Tk()

frame = tkinter.Frame(window,bd=2) # relief=SUNKEN)

frame.grid_rowconfigure(0,weight=1)
frame.grid_columnconfigure(0,weight=1)

xscrollbar = tkinter.Scrollbar(frame,orient=tkinter.HORIZONTAL)
xscrollbar.grid(row=1,column=0,sticky=tkinter.E+tkinter.W)

yscrollbar = tkinter.Scrollbar(frame)
yscrollbar.grid(row=0,column=1,sticky=tkinter.N+tkinter.S)

canvas = tkinter.Canvas(frame,bd=0,xscrollcommand=xscrollbar.set,yscrollcommand=yscrollbar.set)
canvas.grid(row=0,sticky=tkinter.N+tkinter.S+tkinter.E+tkinter.W)
canvas.config(scrollregion=canvas.bbox(tkinter.ALL))

File = "FILEPATH"
img = PIL.ImageTk.PhotoImage(PIL.Image.open(File))
canvas.create_image(0,image=img,anchor="nw")

xscrollbar.config(command=canvas.xview)
yscrollbar.config(command=canvas.yview)

frame.pack()
window.mainloop()

我得到以下内容：

我可以绘制图像，但是滚动条不起作用。它们只是灰色且无法正常工作。

python

在Python中使用滚动条显示大图

问题描述

如何使用该类？

解决方法