Matplotlib - 多边形编辑器

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

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

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

创建多边形交互类

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

• on_draw - 处理多边形及其顶点的绘制。

• on_button_press - 响应鼠标按钮按下以选择顶点。

• on_button_release - 处理鼠标按钮释放。

• on_key_press - 处理按键以切换顶点标记（使用“t”键）、删除顶点（使用“d”键）或插入新顶点（使用“i”键）。

• 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)

定义实用程序函数

定义一个实用程序函数 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))

初始化多边形编辑器

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

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()

运行多边形编辑器

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

示例

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()

输出

执行上述代码后，我们将获得以下输出：

观看下面的视频以观察此应用程序的工作方式：