Tkinter 画布缩放 + 移动/平移
- 2025-04-10 09:47:00
- admin 原创
- 23
问题描述：
Tkinter 的画布小部件具有内置功能：
canvas.scan_mark使用和 移动/平移画布（例如，单击 + 拖动）canvas.scan_dragto，请参阅此问题使用 缩放画布上的矢量元素
canvas.scale，但遗憾的是，这对画布上的位图图像不起作用
幸运的是，此方法允许缩放图像（通过手动重新绘制图像的缩放部分）。但是：
当我们重新绘制画布的某个特定部分时，移动/平移功能将不再起作用……
我们绝对需要渲染比当前显示区域更多的区域，以便移动/平移。假设画布上有 1000x1000 的位图，我们想将其放大 50 倍...如何避免内存中有 50.000 x 50.000 像素的位图？（RAM 中的 2.5 千兆像素太大了）。我们可以考虑只渲染视口，或者渲染比当前视口多一点的区域以允许平移，但是一旦平移导致渲染区域的边缘，该怎么办？
如何在 Tkinter 画布上使用适用于图像的移动/平移 + 缩放功能？
解决方案 1：
高级缩放示例。类似 Google 地图。
示例视频（此处有较长的视频）：
它只缩放一个图块，而不是整个图像。因此，缩放的图块占用恒定内存，而不会为大缩放而用巨大的调整大小图像塞满内存。有关简化的缩放示例，请参见此处。
在 Windows 7 64 位和 Python 3.6.2 上测试。
请不要忘记在脚本末尾放置图像的路径。
# -*- coding: utf-8 -*-
# Advanced zoom example. Like in Google Maps.
# It zooms only a tile, but not the whole image. So the zoomed tile occupies
# constant memory and not crams it with a huge resized image for the large zooms.
import random
import tkinter as tk
from tkinter import ttk
from PIL import Image, ImageTk
class AutoScrollbar(ttk.Scrollbar):
''' A scrollbar that hides itself if it's not needed.
Works only if you use the grid geometry manager '''
def set(self, lo, hi):
if float(lo) <= 0.0 and float(hi) >= 1.0:
self.grid_remove()
else:
self.grid()
ttk.Scrollbar.set(self, lo, hi)
def pack(self, **kw):
raise tk.TclError('Cannot use pack with this widget')
def place(self, **kw):
raise tk.TclError('Cannot use place with this widget')
class Zoom_Advanced(ttk.Frame):
''' Advanced zoom of the image '''
def __init__(self, mainframe, path):
''' Initialize the main Frame '''
ttk.Frame.__init__(self, master=mainframe)
self.master.title('Zoom with mouse wheel')
# Vertical and horizontal scrollbars for canvas
vbar = AutoScrollbar(self.master, orient='vertical')
hbar = AutoScrollbar(self.master, orient='horizontal')
vbar.grid(row=0, column=1, sticky='ns')
hbar.grid(row=1, column=0, sticky='we')
# Create canvas and put image on it
self.canvas = tk.Canvas(self.master, highlightthickness=0,
xscrollcommand=hbar.set, yscrollcommand=vbar.set)
self.canvas.grid(row=0, column=0, sticky='nswe')
self.canvas.update() # wait till canvas is created
vbar.configure(command=self.scroll_y) # bind scrollbars to the canvas
hbar.configure(command=self.scroll_x)
# Make the canvas expandable
self.master.rowconfigure(0, weight=1)
self.master.columnconfigure(0, weight=1)
# Bind events to the Canvas
self.canvas.bind('<Configure>', self.show_image) # canvas is resized
self.canvas.bind('<ButtonPress-1>', self.move_from)
self.canvas.bind('<B1-Motion>', self.move_to)
self.canvas.bind('<MouseWheel>', self.wheel) # with Windows and MacOS, but not Linux
self.canvas.bind('<Button-5>', self.wheel) # only with Linux, wheel scroll down
self.canvas.bind('<Button-4>', self.wheel) # only with Linux, wheel scroll up
self.image = Image.open(path) # open image
self.width, self.height = self.image.size
self.imscale = 1.0 # scale for the canvaas image
self.delta = 1.3 # zoom magnitude
# Put image into container rectangle and use it to set proper coordinates to the image
self.container = self.canvas.create_rectangle(0, 0, self.width, self.height, width=0)
# Plot some optional random rectangles for the test purposes
minsize, maxsize, number = 5, 20, 10
for n in range(number):
x0 = random.randint(0, self.width - maxsize)
y0 = random.randint(0, self.height - maxsize)
x1 = x0 + random.randint(minsize, maxsize)
y1 = y0 + random.randint(minsize, maxsize)
color = ('red', 'orange', 'yellow', 'green', 'blue')[random.randint(0, 4)]
self.canvas.create_rectangle(x0, y0, x1, y1, fill=color, activefill='black')
self.show_image()
def scroll_y(self, *args, **kwargs):
''' Scroll canvas vertically and redraw the image '''
self.canvas.yview(*args, **kwargs) # scroll vertically
self.show_image() # redraw the image
def scroll_x(self, *args, **kwargs):
''' Scroll canvas horizontally and redraw the image '''
self.canvas.xview(*args, **kwargs) # scroll horizontally
self.show_image() # redraw the image
def move_from(self, event):
''' Remember previous coordinates for scrolling with the mouse '''
self.canvas.scan_mark(event.x, event.y)
def move_to(self, event):
''' Drag (move) canvas to the new position '''
self.canvas.scan_dragto(event.x, event.y, gain=1)
self.show_image() # redraw the image
def wheel(self, event):
''' Zoom with mouse wheel '''
x = self.canvas.canvasx(event.x)
y = self.canvas.canvasy(event.y)
bbox = self.canvas.bbox(self.container) # get image area
if bbox[0] < x < bbox[2] and bbox[1] < y < bbox[3]: pass # Ok! Inside the image
else: return # zoom only inside image area
scale = 1.0
# Respond to Linux (event.num) or Windows (event.delta) wheel event
if event.num == 5 or event.delta == -120: # scroll down
i = min(self.width, self.height)
if int(i * self.imscale) < 30: return # image is less than 30 pixels
self.imscale /= self.delta
scale /= self.delta
if event.num == 4 or event.delta == 120: # scroll up
i = min(self.canvas.winfo_width(), self.canvas.winfo_height())
if i < self.imscale: return # 1 pixel is bigger than the visible area
self.imscale *= self.delta
scale *= self.delta
self.canvas.scale('all', x, y, scale, scale) # rescale all canvas objects
self.show_image()
def show_image(self, event=None):
''' Show image on the Canvas '''
bbox1 = self.canvas.bbox(self.container) # get image area
# Remove 1 pixel shift at the sides of the bbox1
bbox1 = (bbox1[0] + 1, bbox1[1] + 1, bbox1[2] - 1, bbox1[3] - 1)
bbox2 = (self.canvas.canvasx(0), # get visible area of the canvas
self.canvas.canvasy(0),
self.canvas.canvasx(self.canvas.winfo_width()),
self.canvas.canvasy(self.canvas.winfo_height()))
bbox = [min(bbox1[0], bbox2[0]), min(bbox1[1], bbox2[1]), # get scroll region box
max(bbox1[2], bbox2[2]), max(bbox1[3], bbox2[3])]
if bbox[0] == bbox2[0] and bbox[2] == bbox2[2]: # whole image in the visible area
bbox[0] = bbox1[0]
bbox[2] = bbox1[2]
if bbox[1] == bbox2[1] and bbox[3] == bbox2[3]: # whole image in the visible area
bbox[1] = bbox1[1]
bbox[3] = bbox1[3]
self.canvas.configure(scrollregion=bbox) # set scroll region
x1 = max(bbox2[0] - bbox1[0], 0) # get coordinates (x1,y1,x2,y2) of the image tile
y1 = max(bbox2[1] - bbox1[1], 0)
x2 = min(bbox2[2], bbox1[2]) - bbox1[0]
y2 = min(bbox2[3], bbox1[3]) - bbox1[1]
if int(x2 - x1) > 0 and int(y2 - y1) > 0: # show image if it in the visible area
x = min(int(x2 / self.imscale), self.width) # sometimes it is larger on 1 pixel...
y = min(int(y2 / self.imscale), self.height) # ...and sometimes not
image = self.image.crop((int(x1 / self.imscale), int(y1 / self.imscale), x, y))
imagetk = ImageTk.PhotoImage(image.resize((int(x2 - x1), int(y2 - y1))))
imageid = self.canvas.create_image(max(bbox2[0], bbox1[0]), max(bbox2[1], bbox1[1]),
anchor='nw', image=imagetk)
self.canvas.lower(imageid) # set image into background
self.canvas.imagetk = imagetk # keep an extra reference to prevent garbage-collection
path = 'doge.jpg' # place path to your image here
root = tk.Tk()
app = Zoom_Advanced(root, path=path)
root.mainloop()
编辑：
我创建了更高级的缩放功能。有“图像金字塔”可以平滑缩放大图像，甚至能够打开和缩放高达几 GB 的大型 TIFF 文件。
版本 3.0 在 Windows 7 64 位和 Python 3.7 上进行了测试。
# -*- coding: utf-8 -*-
# Advanced zoom for images of various types from small to huge up to several GB
import math
import warnings
import tkinter as tk
from tkinter import ttk
from PIL import Image, ImageTk
class AutoScrollbar(ttk.Scrollbar):
""" A scrollbar that hides itself if it's not needed. Works only for grid geometry manager """
def set(self, lo, hi):
if float(lo) <= 0.0 and float(hi) >= 1.0:
self.grid_remove()
else:
self.grid()
ttk.Scrollbar.set(self, lo, hi)
def pack(self, **kw):
raise tk.TclError('Cannot use pack with the widget ' + self.__class__.__name__)
def place(self, **kw):
raise tk.TclError('Cannot use place with the widget ' + self.__class__.__name__)
class CanvasImage:
""" Display and zoom image """
def __init__(self, placeholder, path):
""" Initialize the ImageFrame """
self.imscale = 1.0 # scale for the canvas image zoom, public for outer classes
self.__delta = 1.3 # zoom magnitude
self.__filter = Image.ANTIALIAS # could be: NEAREST, BILINEAR, BICUBIC and ANTIALIAS
self.__previous_state = 0 # previous state of the keyboard
self.path = path # path to the image, should be public for outer classes
# Create ImageFrame in placeholder widget
self.__imframe = ttk.Frame(placeholder) # placeholder of the ImageFrame object
# Vertical and horizontal scrollbars for canvas
hbar = AutoScrollbar(self.__imframe, orient='horizontal')
vbar = AutoScrollbar(self.__imframe, orient='vertical')
hbar.grid(row=1, column=0, sticky='we')
vbar.grid(row=0, column=1, sticky='ns')
# Create canvas and bind it with scrollbars. Public for outer classes
self.canvas = tk.Canvas(self.__imframe, highlightthickness=0,
xscrollcommand=hbar.set, yscrollcommand=vbar.set)
self.canvas.grid(row=0, column=0, sticky='nswe')
self.canvas.update() # wait till canvas is created
hbar.configure(command=self.__scroll_x) # bind scrollbars to the canvas
vbar.configure(command=self.__scroll_y)
# Bind events to the Canvas
self.canvas.bind('<Configure>', lambda event: self.__show_image()) # canvas is resized
self.canvas.bind('<ButtonPress-1>', self.__move_from) # remember canvas position
self.canvas.bind('<B1-Motion>', self.__move_to) # move canvas to the new position
self.canvas.bind('<MouseWheel>', self.__wheel) # zoom for Windows and MacOS, but not Linux
self.canvas.bind('<Button-5>', self.__wheel) # zoom for Linux, wheel scroll down
self.canvas.bind('<Button-4>', self.__wheel) # zoom for Linux, wheel scroll up
# Handle keystrokes in idle mode, because program slows down on a weak computers,
# when too many key stroke events in the same time
self.canvas.bind('<Key>', lambda event: self.canvas.after_idle(self.__keystroke, event))
# Decide if this image huge or not
self.__huge = False # huge or not
self.__huge_size = 14000 # define size of the huge image
self.__band_width = 1024 # width of the tile band
Image.MAX_IMAGE_PIXELS = 1000000000 # suppress DecompressionBombError for the big image
with warnings.catch_warnings(): # suppress DecompressionBombWarning
warnings.simplefilter('ignore')
self.__image = Image.open(self.path) # open image, but down't load it
self.imwidth, self.imheight = self.__image.size # public for outer classes
if self.imwidth * self.imheight > self.__huge_size * self.__huge_size and \n self.__image.tile[0][0] == 'raw': # only raw images could be tiled
self.__huge = True # image is huge
self.__offset = self.__image.tile[0][2] # initial tile offset
self.__tile = [self.__image.tile[0][0], # it have to be 'raw'
[0, 0, self.imwidth, 0], # tile extent (a rectangle)
self.__offset,
self.__image.tile[0][3]] # list of arguments to the decoder
self.__min_side = min(self.imwidth, self.imheight) # get the smaller image side
# Create image pyramid
self.__pyramid = [self.smaller()] if self.__huge else [Image.open(self.path)]
# Set ratio coefficient for image pyramid
self.__ratio = max(self.imwidth, self.imheight) / self.__huge_size if self.__huge else 1.0
self.__curr_img = 0 # current image from the pyramid
self.__scale = self.imscale * self.__ratio # image pyramide scale
self.__reduction = 2 # reduction degree of image pyramid
w, h = self.__pyramid[-1].size
while w > 512 and h > 512: # top pyramid image is around 512 pixels in size
w /= self.__reduction # divide on reduction degree
h /= self.__reduction # divide on reduction degree
self.__pyramid.append(self.__pyramid[-1].resize((int(w), int(h)), self.__filter))
# Put image into container rectangle and use it to set proper coordinates to the image
self.container = self.canvas.create_rectangle((0, 0, self.imwidth, self.imheight), width=0)
self.__show_image() # show image on the canvas
self.canvas.focus_set() # set focus on the canvas
def smaller(self):
""" Resize image proportionally and return smaller image """
w1, h1 = float(self.imwidth), float(self.imheight)
w2, h2 = float(self.__huge_size), float(self.__huge_size)
aspect_ratio1 = w1 / h1
aspect_ratio2 = w2 / h2 # it equals to 1.0
if aspect_ratio1 == aspect_ratio2:
image = Image.new('RGB', (int(w2), int(h2)))
k = h2 / h1 # compression ratio
w = int(w2) # band length
elif aspect_ratio1 > aspect_ratio2:
image = Image.new('RGB', (int(w2), int(w2 / aspect_ratio1)))
k = h2 / w1 # compression ratio
w = int(w2) # band length
else: # aspect_ratio1 < aspect_ration2
image = Image.new('RGB', (int(h2 * aspect_ratio1), int(h2)))
k = h2 / h1 # compression ratio
w = int(h2 * aspect_ratio1) # band length
i, j, n = 0, 1, round(0.5 + self.imheight / self.__band_width)
while i < self.imheight:
print('
Opening image: {j} from {n}'.format(j=j, n=n), end='')
band = min(self.__band_width, self.imheight - i) # width of the tile band
self.__tile[1][3] = band # set band width
self.__tile[2] = self.__offset + self.imwidth * i * 3 # tile offset (3 bytes per pixel)
self.__image.close()
self.__image = Image.open(self.path) # reopen / reset image
self.__image.size = (self.imwidth, band) # set size of the tile band
self.__image.tile = [self.__tile] # set tile
cropped = self.__image.crop((0, 0, self.imwidth, band)) # crop tile band
image.paste(cropped.resize((w, int(band * k)+1), self.__filter), (0, int(i * k)))
i += band
j += 1
print('
' + 30*' ' + '
', end='') # hide printed string
return image
def redraw_figures(self):
""" Dummy function to redraw figures in the children classes """
pass
def grid(self, **kw):
""" Put CanvasImage widget on the parent widget """
self.__imframe.grid(**kw) # place CanvasImage widget on the grid
self.__imframe.grid(sticky='nswe') # make frame container sticky
self.__imframe.rowconfigure(0, weight=1) # make canvas expandable
self.__imframe.columnconfigure(0, weight=1)
def pack(self, **kw):
""" Exception: cannot use pack with this widget """
raise Exception('Cannot use pack with the widget ' + self.__class__.__name__)
def place(self, **kw):
""" Exception: cannot use place with this widget """
raise Exception('Cannot use place with the widget ' + self.__class__.__name__)
# noinspection PyUnusedLocal
def __scroll_x(self, *args, **kwargs):
""" Scroll canvas horizontally and redraw the image """
self.canvas.xview(*args) # scroll horizontally
self.__show_image() # redraw the image
# noinspection PyUnusedLocal
def __scroll_y(self, *args, **kwargs):
""" Scroll canvas vertically and redraw the image """
self.canvas.yview(*args) # scroll vertically
self.__show_image() # redraw the image
def __show_image(self):
""" Show image on the Canvas. Implements correct image zoom almost like in Google Maps """
box_image = self.canvas.coords(self.container) # get image area
box_canvas = (self.canvas.canvasx(0), # get visible area of the canvas
self.canvas.canvasy(0),
self.canvas.canvasx(self.canvas.winfo_width()),
self.canvas.canvasy(self.canvas.winfo_height()))
box_img_int = tuple(map(int, box_image)) # convert to integer or it will not work properly
# Get scroll region box
box_scroll = [min(box_img_int[0], box_canvas[0]), min(box_img_int[1], box_canvas[1]),
max(box_img_int[2], box_canvas[2]), max(box_img_int[3], box_canvas[3])]
# Horizontal part of the image is in the visible area
if box_scroll[0] == box_canvas[0] and box_scroll[2] == box_canvas[2]:
box_scroll[0] = box_img_int[0]
box_scroll[2] = box_img_int[2]
# Vertical part of the image is in the visible area
if box_scroll[1] == box_canvas[1] and box_scroll[3] == box_canvas[3]:
box_scroll[1] = box_img_int[1]
box_scroll[3] = box_img_int[3]
# Convert scroll region to tuple and to integer
self.canvas.configure(scrollregion=tuple(map(int, box_scroll))) # set scroll region
x1 = max(box_canvas[0] - box_image[0], 0) # get coordinates (x1,y1,x2,y2) of the image tile
y1 = max(box_canvas[1] - box_image[1], 0)
x2 = min(box_canvas[2], box_image[2]) - box_image[0]
y2 = min(box_canvas[3], box_image[3]) - box_image[1]
if int(x2 - x1) > 0 and int(y2 - y1) > 0: # show image if it in the visible area
if self.__huge and self.__curr_img < 0: # show huge image
h = int((y2 - y1) / self.imscale) # height of the tile band
self.__tile[1][3] = h # set the tile band height
self.__tile[2] = self.__offset + self.imwidth * int(y1 / self.imscale) * 3
self.__image.close()
self.__image = Image.open(self.path) # reopen / reset image
self.__image.size = (self.imwidth, h) # set size of the tile band
self.__image.tile = [self.__tile]
image = self.__image.crop((int(x1 / self.imscale), 0, int(x2 / self.imscale), h))
else: # show normal image
image = self.__pyramid[max(0, self.__curr_img)].crop( # crop current img from pyramid
(int(x1 / self.__scale), int(y1 / self.__scale),
int(x2 / self.__scale), int(y2 / self.__scale)))
#
imagetk = ImageTk.PhotoImage(image.resize((int(x2 - x1), int(y2 - y1)), self.__filter))
imageid = self.canvas.create_image(max(box_canvas[0], box_img_int[0]),
max(box_canvas[1], box_img_int[1]),
anchor='nw', image=imagetk)
self.canvas.lower(imageid) # set image into background
self.canvas.imagetk = imagetk # keep an extra reference to prevent garbage-collection
def __move_from(self, event):
""" Remember previous coordinates for scrolling with the mouse """
self.canvas.scan_mark(event.x, event.y)
def __move_to(self, event):
""" Drag (move) canvas to the new position """
self.canvas.scan_dragto(event.x, event.y, gain=1)
self.__show_image() # zoom tile and show it on the canvas
def outside(self, x, y):
""" Checks if the point (x,y) is outside the image area """
bbox = self.canvas.coords(self.container) # get image area
if bbox[0] < x < bbox[2] and bbox[1] < y < bbox[3]:
return False # point (x,y) is inside the image area
else:
return True # point (x,y) is outside the image area
def __wheel(self, event):
""" Zoom with mouse wheel """
x = self.canvas.canvasx(event.x) # get coordinates of the event on the canvas
y = self.canvas.canvasy(event.y)
if self.outside(x, y): return # zoom only inside image area
scale = 1.0
# Respond to Linux (event.num) or Windows (event.delta) wheel event
if event.num == 5 or event.delta == -120: # scroll down, smaller
if round(self.__min_side * self.imscale) < 30: return # image is less than 30 pixels
self.imscale /= self.__delta
scale /= self.__delta
if event.num == 4 or event.delta == 120: # scroll up, bigger
i = min(self.canvas.winfo_width(), self.canvas.winfo_height()) >> 1
if i < self.imscale: return # 1 pixel is bigger than the visible area
self.imscale *= self.__delta
scale *= self.__delta
# Take appropriate image from the pyramid
k = self.imscale * self.__ratio # temporary coefficient
self.__curr_img = min((-1) * int(math.log(k, self.__reduction)), len(self.__pyramid) - 1)
self.__scale = k * math.pow(self.__reduction, max(0, self.__curr_img))
#
self.canvas.scale('all', x, y, scale, scale) # rescale all objects
# Redraw some figures before showing image on the screen
self.redraw_figures() # method for child classes
self.__show_image()
def __keystroke(self, event):
""" Scrolling with the keyboard.
Independent from the language of the keyboard, CapsLock, <Ctrl>+<key>, etc. """
if event.state - self.__previous_state == 4: # means that the Control key is pressed
pass # do nothing if Control key is pressed
else:
self.__previous_state = event.state # remember the last keystroke state
# Up, Down, Left, Right keystrokes
if event.keycode in [68, 39, 102]: # scroll right: keys 'D', 'Right' or 'Numpad-6'
self.__scroll_x('scroll', 1, 'unit', event=event)
elif event.keycode in [65, 37, 100]: # scroll left: keys 'A', 'Left' or 'Numpad-4'
self.__scroll_x('scroll', -1, 'unit', event=event)
elif event.keycode in [87, 38, 104]: # scroll up: keys 'W', 'Up' or 'Numpad-8'
self.__scroll_y('scroll', -1, 'unit', event=event)
elif event.keycode in [83, 40, 98]: # scroll down: keys 'S', 'Down' or 'Numpad-2'
self.__scroll_y('scroll', 1, 'unit', event=event)
def crop(self, bbox):
""" Crop rectangle from the image and return it """
if self.__huge: # image is huge and not totally in RAM
band = bbox[3] - bbox[1] # width of the tile band
self.__tile[1][3] = band # set the tile height
self.__tile[2] = self.__offset + self.imwidth * bbox[1] * 3 # set offset of the band
self.__image.close()
self.__image = Image.open(self.path) # reopen / reset image
self.__image.size = (self.imwidth, band) # set size of the tile band
self.__image.tile = [self.__tile]
return self.__image.crop((bbox[0], 0, bbox[2], band))
else: # image is totally in RAM
return self.__pyramid[0].crop(bbox)
def destroy(self):
""" ImageFrame destructor """
self.__image.close()
map(lambda i: i.close, self.__pyramid) # close all pyramid images
del self.__pyramid[:] # delete pyramid list
del self.__pyramid # delete pyramid variable
self.canvas.destroy()
self.__imframe.destroy()
class MainWindow(ttk.Frame):
""" Main window class """
def __init__(self, mainframe, path):
""" Initialize the main Frame """
ttk.Frame.__init__(self, master=mainframe)
self.master.title('Advanced Zoom v3.0')
self.master.geometry('800x600') # size of the main window
self.master.rowconfigure(0, weight=1) # make the CanvasImage widget expandable
self.master.columnconfigure(0, weight=1)
canvas = CanvasImage(self.master, path) # create widget
canvas.grid(row=0, column=0) # show widget
filename = './data/img_plg5.png' # place path to your image here
#filename = 'd:/Data/yandex_z18_1-1.tif' # huge TIFF file 1.4 GB
#filename = 'd:/Data/The_Garden_of_Earthly_Delights_by_Bosch_High_Resolution.jpg'
#filename = 'd:/Data/The_Garden_of_Earthly_Delights_by_Bosch_High_Resolution.tif'
#filename = 'd:/Data/heic1502a.tif'
#filename = 'd:/Data/land_shallow_topo_east.tif'
#filename = 'd:/Data/X1D5_B0002594.3FR'
app = MainWindow(tk.Tk(), path=filename)
app.mainloop()
PS 这是使用高级缩放功能通过多边形进行手动图像注释的 GitHub 应用程序。
解决方案 2：
（问题标题并未表明其重点是位图。我在此为那些对画布的基本缩放/平移支持感兴趣并通过搜索引擎找到这里的人添加了一个答案）
支持缩放（使用滚轮）和移动/平移（使用左键拖动）的基本机制如下：
from tkinter import ALL, EventType
canvas.bind("<MouseWheel>", do_zoom) # WINDOWS ONLY
canvas.bind('<ButtonPress-1>', lambda event: canvas.scan_mark(event.x, event.y))
canvas.bind("<B1-Motion>", lambda event: canvas.scan_dragto(event.x, event.y, gain=1))
def do_zoom(event):
x = canvas.canvasx(event.x)
y = canvas.canvasy(event.y)
factor = 1.001 ** event.delta
canvas.scale(ALL, x, y, factor, factor)
简单扩展：支持对各个轴进行单独缩放，通过查看Ctrl和Shift的状态，如下：
def do_zoom(event):
x = canvas.canvasx(event.x)
y = canvas.canvasy(event.y)
factor = 1.001 ** event.delta
is_shift = event.state & (1 << 0) != 0
is_ctrl = event.state & (1 << 2) != 0
canvas.scale(ALL, x, y,
factor if not is_shift else 1.0,
factor if not is_ctrl else 1.0)
更多鼠标滚轮事件：Linux 鼠标生成<4>和<5>（分别为放大和缩小）。需要其他事件处理程序，如下所示。请注意，此示例过于繁琐；显然，放大和缩小处理程序可以通过一些数学运算和 lambda 合并为一个处理程序。
def do_zoom_in(event):
x = canvas.canvasx(event.x)
y = canvas.canvasy(event.y)
factor = 1.1
canvas.scale(ALL, x, y, factor, factor)
def do_zoom_out(event):
x = canvas.canvasx(event.x)
y = canvas.canvasy(event.y)
factor = 0.9
canvas.scale(ALL, x, y, factor, factor)
canvas.bind('<4>', do_zoom_in)
canvas.bind('<5>', do_zoom_out)
解决方案 3：
在这种情况下，您可以考虑使用地图图块。图块可以特定于缩放级别。根据平移和缩放级别选择图块后，您可以使用将它们放置在画布上Canvas.create_image。
假设您有一些带有坐标和图像的图块类，您可以根据平移、缩放和框架大小选择可见的图块。
for tile in visible_tiles(pan_center, frame_dimensions, zoom_level):
canvas.create_image(tile.x, tile.y, anchor=Tkinter.NW, image=tile.image)
John Sample 和 Elias Ioup 合著的《基于图块的地理空间信息系统》中的“图块地图客户端”一章提供了完整的示例。
解决方案 4：
提供的答案非常好，并且也适用于非常大的图像。但是，如果您想要一个缩放/平移功能，既可以在鼠标点上缩放，又可以将图像保持在框架中，请参见附加的代码。您可以调整self.zoom_cycle函数中的def mouse_wheel(self, event)，使缩放效果尽可能远或尽可能近。您还需要调整 max_y = scale * 3072和max_x = scale * 4096使用常量来表示要显示的图像的宽度/高度。 *请注意，这允许您在任意框架大小中使用全尺寸图像分辨率。只需确保将 canvas_w 和 canvas_h 设置为与要显示的图像相同的比例即可。
import tkinter as tk
from PIL import Image, ImageTk
import numpy as np
class PanZoomCanvas(tk.Frame):
def __init__(self, master,canvas_w,canvas_h):
super().__init__(master)
self.pil_image = None # Image data to be displayed
self.zoom_cycle = 0
self.create_widget(canvas_w,canvas_h) # Create canvas
# Initial affine transformation matrix
self.reset_transform()
# Define the create_widget method.
def create_widget(self,width,height):
# Canvas
self.canvas = tk.Canvas(self.master, background="black", width = width,height = height)
self.canvas.pack()
# Controls
self.master.bind("<Button-1>", self.mouse_down_left) # MouseDown
self.master.bind("<B1-Motion>", self.mouse_move_left) # MouseDrag
self.master.bind("<Double-Button-1>", self.mouse_double_click_left) # MouseDoubleClick
self.master.bind("<MouseWheel>", self.mouse_wheel) # MouseWheel
def set_image(self, filename):
'''To open an image file'''
if not filename:
return
# PIL.Image
self.pil_image = Image.open(filename)
# Set the affine transformation matrix to display the entire image.
self.zoom_fit(self.pil_image.width, self.pil_image.height)
# To display the image
self.draw_image(self.pil_image)
# -------------------------------------------------------------------------------
# Mouse events
# -------------------------------------------------------------------------------
def mouse_down_left(self, event):
self.__old_event = event
def mouse_move_left(self, event):
if (self.pil_image == None):
return
self.translate(event.x - self.__old_event.x, event.y - self.__old_event.y)
self.redraw_image()
self.__old_event = event
def mouse_double_click_left(self, event):
if self.pil_image == None:
return
self.zoom_fit(self.pil_image.width, self.pil_image.height)
self.redraw_image()
def mouse_wheel(self, event):
if self.pil_image == None:
return
if (event.delta < 0):
if self.zoom_cycle <= 0:
return
# Rotate upwards and shrink
self.scale_at(0.8, event.x, event.y)
self.zoom_cycle -= 1
else:
if self.zoom_cycle >= 9:
return
# Rotate downwards and enlarge
self.scale_at(1.25, event.x, event.y)
self.zoom_cycle += 1
self.redraw_image() # Refresh
# -------------------------------------------------------------------------------
# Affine Transformation for Image Display
# -------------------------------------------------------------------------------
def reset_transform(self):
self.mat_affine = np.eye(3) # 3x3の単位行列
def translate(self, offset_x, offset_y,zoom = False):
mat = np.eye(3) # 3x3 identity matrix
mat[0, 2] = float(offset_x)
mat[1, 2] = float(offset_y)
# Get the current canvas size
canvas_width = self.canvas.winfo_width()
canvas_height = self.canvas.winfo_height()
# Get the current scale
scale = self.mat_affine[0, 0]
max_y = scale * 3072
max_x = scale * 4096
self.mat_affine = np.dot(mat, self.mat_affine)
if not zoom:
if abs(self.mat_affine[0,2]) > abs(max_x-canvas_width):
self.mat_affine[0,2] = -(max_x-canvas_width)
if abs(self.mat_affine[1,2]) > abs(max_y-canvas_height):
self.mat_affine[1,2] = -(max_y-canvas_height)
if self.mat_affine[0, 2] > 0.0:
self.mat_affine[0, 2] = 0.0
if self.mat_affine[1,2] > 0.0:
self.mat_affine[1,2] = 0.0
def scale(self, scale:float):
mat = np.eye(3) # 3x3 identity matrix
mat[0, 0] = scale
mat[1, 1] = scale
self.mat_affine = np.dot(mat, self.mat_affine)
def scale_at(self, scale:float, cx:float, cy:float):
# Translate to the origin
self.translate(-cx, -cy, True)
# Scale
self.scale(scale)
# Restore
self.translate(cx, cy)
def zoom_fit(self, image_width, image_height):
# Update canvas object and get size
self.master.update()
canvas_width = self.canvas.winfo_width()
canvas_height = self.canvas.winfo_height()
if (image_width * image_height <= 0) or (canvas_width * canvas_height <= 0):
return
# Initialization of affine transformation
self.reset_transform()
scale = 1.0
offsetx = 0.0
offsety = 0.0
if (canvas_width * image_height) > (image_width * canvas_height):
# The widget is horizontally elongated (resizing the image vertically)
scale = canvas_height / image_height
# Align the remaining space to the center by offsetting horizontally
offsetx = (canvas_width - image_width * scale) / 2
else:
# The widget is vertically elongated (resizing the image horizontally)
scale = canvas_width / image_width
# Align the remaining space to the center by offsetting vertically
offsety = (canvas_height - image_height * scale) / 2
# Scale
self.scale(scale)
# Align the remaining space to the center
self.translate(offsetx, offsety)
self.zoom_cycle = 0
def to_image_point(self, x, y):
'''Convert coordinates from the canvas to the image'''
if self.pil_image == None:
return []
# Convert coordinates from the image to the canvas by taking the inverse of the transformation matrix.
mat_inv = np.linalg.inv(self.mat_affine)
image_point = np.dot(mat_inv, (x, y, 1.))
if image_point[0] < 0 or image_point[1] < 0 or image_point[0] > self.pil_image.width or image_point[1] > self.pil_image.height:
return []
return image_point
# -------------------------------------------------------------------------------
# Drawing
# -------------------------------------------------------------------------------
def draw_image(self, pil_image):
if pil_image == None:
return
self.pil_image = pil_image
# Canvas size
canvas_width = self.canvas.winfo_width()
canvas_height = self.canvas.winfo_height()
# Calculate the affine transformation matrix from canvas to image data
# (Calculate the inverse of the display affine transformation matrix)
mat_inv = np.linalg.inv(self.mat_affine)
# Convert the numpy array to a tuple for affine transformation
affine_inv = (
mat_inv[0, 0], mat_inv[0, 1], mat_inv[0, 2],
mat_inv[1, 0], mat_inv[1, 1], mat_inv[1, 2]
)
# Apply affine transformation to the PIL image data
dst = self.pil_image.transform(
(canvas_width, canvas_height), # Output size
Image.AFFINE, # Affine transformation
affine_inv, # Affine transformation matrix (conversion matrix from output to input)
Image.NEAREST # Interpolation method, nearest neighbor
)
im = ImageTk.PhotoImage(image=dst)
# Draw the image
item = self.canvas.create_image(
0, 0, # Image display position (top-left coordinate)
anchor='nw', # Anchor, top-left is the origin
image=im # Display image data
)
self.image = im
def redraw_image(self):
'''Redraw the image'''
if self.pil_image == None:
return
self.draw_image(self.pil_image)
if __name__ == "__main__":
root = tk.Tk()
root.geometry('1200x900')
app = PanZoomCanvas(master=root,canvas_w = 1024,canvas_h = 768)
app.canvas.config(bg = 'grey')
app.set_image('image_path_here')
app.mainloop()
相关推荐
热门文章
项目管理软件有哪些？
热门标签
曾咪二维码
扫码咨询，免费领取项目管理大礼包！
云禅道AD
