Matplotlib 简明教程

Matplotlib - Poly Editor

Poly Editor 是 Polygon Editor 的缩写，它是一个应用程序，允许用户在图形环境中交互式地编辑和操作多边形的顶点。

在 Matplotlib 的上下文中，多边形编辑器通常指的是一个跨 GUI 应用程序，允许用户交互式地修改显示在画布上的多边形。此应用程序提供诸如添加、删除和移动多边形顶点以及使用鼠标单击和键绑定调整其形状和位置之类的功能。

本教程将演示如何使用 Matplotlib 的事件处理功能创建一个多边形编辑器。

Creating the Polygon Interactor Class

要创建多边形编辑器，请定义一个名为 PolygonInteractor 的 Python 类，它处理与多边形顶点的交互。此类实现了事件处理方法以响应用户交互 −

  1. on_draw − 处理多边形及其顶点的绘制。

  2. on_button_press − 响应鼠标按钮按下以选择顶点。

  3. on_button_release − 处理鼠标按钮释放。

  4. on_key_press − 处理按键以切换顶点标记(使用 't' 键)、删除顶点(使用 'd' 键)或插入新顶点(使用 'i' 键)。

  5. on_mouse_move − 处理鼠标移动以拖动顶点并更新多边形。

以下是 PolygonInteractor 类的实现：

class PolygonInteractor:

   showverts = True
   epsilon = 3

   def __init__(self, ax, poly):
      if poly.figure is None:
         raise RuntimeError('You must first add the polygon to a figure '
            'or canvas before defining the interactor')
      self.ax = ax
      canvas = poly.figure.canvas
      self.poly = poly

      x, y = zip(*self.poly.xy)
      self.line = Line2D(x, y,
         marker='o', markerfacecolor='r',
         animated=True)
      self.ax.add_line(self.line)

      self.cid = self.poly.add_callback(self.poly_changed)
      self._ind = None  # the active vert

      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 on_draw(self, event):
      self.background = self.canvas.copy_from_bbox(self.ax.bbox)
      self.ax.draw_artist(self.poly)
      self.ax.draw_artist(self.line)


   def poly_changed(self, poly):
      vis = self.line.get_visible()
      Artist.update_from(self.line, poly)
      self.line.set_visible(vis)  # don't use the poly visibility state

   def get_ind_under_point(self, event):
      xy = np.asarray(self.poly.xy)
      xyt = self.poly.get_transform().transform(xy)
      xt, yt = xyt[:, 0], xyt[:, 1]
      d = np.hypot(xt - event.x, yt - event.y)
      indseq, = np.nonzero(d == d.min())
      ind = indseq[0]

      if d[ind] >= self.epsilon:
         ind = None

         return ind

   def on_button_press(self, event):

      if not self.showverts:
         return
      if event.inaxes is None:
         return
      if event.button != 1:
         return
      self._ind = self.get_ind_under_point(event)

   def on_button_release(self, event):

      if not self.showverts:
         return
      if event.button != 1:
         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
      elif event.key == 'd':
         ind = self.get_ind_under_point(event)
         if ind is not None:
            self.poly.xy = np.delete(self.poly.xy,
               ind, axis=0)
            self.line.set_data(zip(*self.poly.xy))
      elif event.key == 'i':
         xys = self.poly.get_transform().transform(self.poly.xy)
         p = event.x, event.y  # display coords
         for i in range(len(xys) - 1):
            s0 = xys[i]
            s1 = xys[i + 1]
            d = dist_point_to_segment(p, s0, s1)
            if d <= self.epsilon:
               self.poly.xy = np.insert(
                  self.poly.xy, i+1,
                  [event.xdata, event.ydata],
                  axis=0)
               self.line.set_data(zip(*self.poly.xy))
               break
      if self.line.stale:
         self.canvas.draw_idle()

   def on_mouse_move(self, event):
      if not self.showverts:
         return
      if self._ind is None:
         return
      if event.inaxes is None:
         return
      if event.button != 1:
         return
      x, y = event.xdata, event.ydata

      self.poly.xy[self._ind] = x, y
      if self._ind == 0:
         self.poly.xy[-1] = x, y
      elif self._ind == len(self.poly.xy) - 1:
         self.poly.xy[0] = x, y
      self.line.set_data(zip(*self.poly.xy))

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

Defining Utility Function

定义一个实用程序函数 dist_point_to_segment 来计算点与线段之间的距离。此函数用于确定与鼠标光标最接近的顶点是什么。

def dist_point_to_segment(p, s0, s1):
   s01 = s1 - s0
   s0p = p - s0
   if (s01 == 0).all():
      return np.hypot(*s0p)

   p1 = s0 + np.clip((s0p @ s01) / (s01 @ s01), 0, 1) * s01
   return np.hypot(*(p - p1))

Initializing the Polygon Editor

若要初始化多边形编辑器，我们需要创建一个 PolygonInteractor 类的实例，并将其传递给 axis 对象和多边形对象：

if __name__ == '__main__':
   import matplotlib.pyplot as plt

   from matplotlib.patches import Polygon

   theta = np.arange(0, 2*np.pi, 0.2)
   r = 1.5

   xs = r * np.cos(theta)
   ys = r * np.sin(theta)

   poly = Polygon(np.column_stack([xs, ys]), animated=True)

   fig, ax = plt.subplots()
   ax.add_patch(poly)
   p = PolygonInteractor(ax, poly)

   ax.set_title('Click and drag a point to move it')
   ax.set_xlim((-2, 2))
   ax.set_ylim((-2, 2))
   plt.show()

Running the Poly Editor

通过执行下面提供的完整代码，我们将获得一个 Matplotlib 窗口，其中显示有一个多边形图。通过单击并拖动多边形顶点与多边形交互，通过按’t’键切换顶点标记，按’d’键删除顶点，以及按’i’键插入新顶点。

Example

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

class PathInteractor:

    showverts = True
    # max pixel distance to count as a vertex hit
    epsilon = 5

    def __init__(self, pathpatch):
        # Initialization and event connections
        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  # the active vertex

        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):
        # Return the index of the point closest to the event position or None
        xy = self.pathpatch.get_path().vertices
        xyt = self.pathpatch.get_transform().transform(xy)  # to display coords
        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):
        # Callback for draws.
        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):
        # Callback for mouse button presses
        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):
        # Callback for mouse button releases
        if (event.button != MouseButton.LEFT
                or not self.showverts):
            return
        self._ind = None

    def on_key_press(self, event):
        # Callback for key presses
        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):
        # Callback for mouse movements
        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)

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)

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

plt.show()

执行上述代码，我们将得到以下输出 −

poly editor

观看下面的视频来观察此应用程序的工作原理：

poly editor