크로스 GUI 애플리케이션 | Matplotlib 이벤트 처리 | 대화형 플로팅

소개

이 랩에서는 Matplotlib 이벤트 처리를 사용하여 캔버스에서 객체와 상호 작용하고 수정하는 크로스 GUI (cross-GUI) 애플리케이션의 예시를 안내합니다. 마우스로 마커를 드래그하고 가시성을 토글하여 플롯의 경로를 편집하는 방법을 배우게 됩니다.

VM 팁

VM 시작이 완료되면, 왼쪽 상단을 클릭하여 Notebook 탭으로 전환하여 실습을 위해 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 클래스 생성

이 단계에서는 path 객체에 대한 이벤트 콜백을 처리하는 PathInteractor 클래스를 생성합니다. 이 클래스를 사용하면 플롯에서 마커를 드래그하여 경로를 대화식으로 편집할 수 있습니다.

class PathInteractor:
    """
    A path editor.

    Press 't' to toggle vertex markers on and off.  When vertex markers are on,
    they can be dragged with the mouse.
    """

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

    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  ## 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*
        if no point is within ``self.epsilon`` to the event position.
        """
        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)

Path Interactor 생성

이 단계에서는 앞서 생성한 PathPatch 객체를 전달하여 PathInteractor 클래스의 인스턴스를 생성합니다.

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 캔버스 편집

소개