跨 GUI 应用程序 | Matplotlib 事件处理 | 交互式绘图

简介

本实验将指导你完成一个跨 GUI 应用程序的示例，该示例使用 Matplotlib 事件处理来与画布上的对象进行交互并对其进行修改。你将学习如何通过用鼠标拖动标记并切换其可见性来编辑绘图上的路径。

虚拟机提示

虚拟机启动完成后，点击左上角切换到“笔记本”标签以访问 Jupyter Notebook 进行练习。

有时，你可能需要等待几秒钟让 Jupyter Notebook 完成加载。由于 Jupyter Notebook 的限制，操作验证无法自动化。

如果你在学习过程中遇到问题，请随时向 Labby 提问。课程结束后提供反馈，我们将立即为你解决问题。

导入库

在这一步中，我们导入实验所需的库。我们使用 Matplotlib 来创建绘图并处理事件。

import matplotlib.pyplot as plt
import numpy as np

from matplotlib.backend_bases import MouseButton
from matplotlib.patches import PathPatch
from matplotlib.path import Path

创建绘图

在这一步中，我们使用提供的路径数据创建一个带有绿色路径和黄色边缘的绘图。然后，我们向绘图中添加一个 PathPatch 对象，它代表该路径。

fig, ax = plt.subplots()

pathdata = [
    (Path.MOVETO, (1.58, -2.57)),
    (Path.CURVE4, (0.35, -1.1)),
    (Path.CURVE4, (-1.75, 2.0)),
    (Path.CURVE4, (0.375, 2.0)),
    (Path.LINETO, (0.85, 1.15)),
    (Path.CURVE4, (2.2, 3.2)),
    (Path.CURVE4, (3, 0.05)),
    (Path.CURVE4, (2.0, -0.5)),
    (Path.CLOSEPOLY, (1.58, -2.57)),
]

codes, verts = zip(*pathdata)
path = Path(verts, codes)
patch = PathPatch(
    path, facecolor='green', edgecolor='yellow', alpha=0.5)
ax.add_patch(patch)

创建PathInteractor类

在这一步中，我们创建 PathInteractor 类，它处理路径对象的事件回调。这个类允许我们通过在绘图上拖动标记来交互式地编辑路径。

class PathInteractor:
    """
    一个路径编辑器。

    按 't' 键可切换顶点标记的显示与隐藏。当顶点标记显示时，可以用鼠标拖动它们。
    """

    showverts = True
    epsilon = 5  ## 作为顶点命中的最大像素距离

    def __init__(self, pathpatch):

        self.ax = pathpatch.axes
        canvas = self.ax.figure.canvas
        self.pathpatch = pathpatch
        self.pathpatch.set_animated(True)

        x, y = zip(*self.pathpatch.get_path().vertices)

        self.line, = ax.plot(
            x, y, marker='o', markerfacecolor='r', animated=True)

        self._ind = None  ## 活动顶点

        canvas.mpl_connect('draw_event', self.on_draw)
        canvas.mpl_connect('button_press_event', self.on_button_press)
        canvas.mpl_connect('key_press_event', self.on_key_press)
        canvas.mpl_connect('button_release_event', self.on_button_release)
        canvas.mpl_connect('motion_notify_event', self.on_mouse_move)
        self.canvas = canvas

    def get_ind_under_point(self, event):
        """
        返回最接近事件位置的点的索引，如果没有点在距离事件位置 ``self.epsilon`` 范围内，则返回 *None*。
        """
        xy = self.pathpatch.get_path().vertices
        xyt = self.pathpatch.get_transform().transform(xy)  ## 转换为显示坐标
        xt, yt = xyt[:, 0], xyt[:, 1]
        d = np.sqrt((xt - event.x)**2 + (yt - event.y)**2)
        ind = d.argmin()
        return ind if d[ind] < self.epsilon else None

    def on_draw(self, event):
        """绘制事件的回调函数。"""
        self.background = self.canvas.copy_from_bbox(self.ax.bbox)
        self.ax.draw_artist(self.pathpatch)
        self.ax.draw_artist(self.line)
        self.canvas.blit(self.ax.bbox)

    def on_button_press(self, event):
        """鼠标按钮按下事件的回调函数。"""
        if (event.inaxes is None
                or event.button!= MouseButton.LEFT
                or not self.showverts):
            return
        self._ind = self.get_ind_under_point(event)

    def on_button_release(self, event):
        """鼠标按钮释放事件的回调函数。"""
        if (event.button!= MouseButton.LEFT
                or not self.showverts):
            return
        self._ind = None

    def on_key_press(self, event):
        """按键事件的回调函数。"""
        if not event.inaxes:
            return
        if event.key == 't':
            self.showverts = not self.showverts
            self.line.set_visible(self.showverts)
            if not self.showverts:
                self._ind = None
        self.canvas.draw()

    def on_mouse_move(self, event):
        """鼠标移动事件的回调函数。"""
        if (self._ind is None
                or event.inaxes is None
                or event.button!= MouseButton.LEFT
                or not self.showverts):
            return

        vertices = self.pathpatch.get_path().vertices

        vertices[self._ind] = event.xdata, event.ydata
        self.line.set_data(zip(*vertices))

        self.canvas.restore_region(self.background)
        self.ax.draw_artist(self.pathpatch)
        self.ax.draw_artist(self.line)
        self.canvas.blit(self.ax.bbox)

创建路径交互器

在这一步中，我们创建 PathInteractor 类的一个实例，并传入我们之前创建的 PathPatch 对象。

interactor = PathInteractor(patch)

设置绘图属性

在这一步中，我们设置绘图的标题和坐标轴范围。

ax.set_title('drag vertices to update path')
ax.set_xlim(-3, 4)
ax.set_ylim(-3, 4)

显示绘图

在这一步中，我们在屏幕上显示绘图。

plt.show()

总结

在这个实验中，我们学习了如何创建一个交互式绘图，通过在绘图上拖动标记来编辑路径。我们使用Matplotlib库来创建绘图并处理事件，还创建了一个自定义类来处理事件回调。按照这些步骤，你可以使用Matplotlib创建自己的交互式绘图。

使用 Matplotlib 画布进行交互式编辑

简介