从零开始实现一个三维绘图系统

文章目录

- 框架
- 布局
- 绘图函数
- 源代码

框架

本文的目标是实现一个下图所示的系统，通过指定 $x, y, z$ 的表达式，以实现三维绘图的目的。这个需求其实此前也实现过，见此文，但其内容比较驳杂，并不利于快速实现，相比之下，本文直指核心问题，代码也进一步精简，更加适合学习。

在这里插入图片描述

为此，需要经历三个过程

实现将matplotlib的绘图窗口嵌入到tkinter的窗口中
实现对 $x, y, z$ 数据的读取
实现三维绘图

关于第一个问题，matplotlib中的图窗和工具栏分别是FigureCanvasTkAgg和NavigationToolbar2Tk对象，只需将二者押入到tkinter的布局窗口，即可实现二者的融合。

对于第二个问题，只需使用eval函数便可轻松实现，唯一的难点，则是 $x, y, z$ 三者之间的联系。

而只要第二个问题解决，那么第三个问题也就不是问题了，只需通过一个绘图函数，便可轻松解决。

下面代码给出了实现这个需求需要导入的模块，以及整个系统的基本框架

import tkinter as tk
import tkinter.ttk as ttk

import matplotlib as mpl
mpl.use('TkAgg')
from matplotlib.backends.backend_tkagg import (
    FigureCanvasTkAgg, NavigationToolbar2Tk)
from matplotlib.figure import Figure

import numpy as np

class DarwSystem():
    def __init__(self):
        self.root = tk.Tk()
        self.root.title("数据展示工具")

        self.data = {}

        self.setFrmCtrl()
        self.setFrmFig()
        self.root.mainloop()

    def setFrmCtrl(self): pass

    def setFrmFig(self): pass

    def setFrmAxis(self, frm, flag): pass

    def setCtrlButtons(self, frm): pass

    def readEntrys(self): pass

    def btnDrawImg(self): pass

其中，各函数含义如下

setFrmCtrl 用于右侧工具栏的组件布局
setFrmFig 用于左侧绘图窗口的嵌入，解决第一个问题
setFrmAxis 工具栏中的坐标输入框相似度很高，可以封装成专门的函数
readEntrys 读取输入窗口的数据，解决第二个问题
btnDrawImg 绘图函数，解决第三个问题

下面逐个讲解每个函数的实现过程，这些函数都是DataSystem类的成员，所以在书写时注意缩进。

布局

考虑matplotlib绘图窗口的嵌入是一个相对较难的问题，故而先行实现setFrmFig函数

def setFrmFig(self):
    frmFig = ttk.Frame(self.root)
    frmFig.pack(side=tk.LEFT,fill=tk.BOTH,expand=tk.YES)

    self.fig = Figure()
    self.canvas = FigureCanvasTkAgg(self.fig,frmFig)
    self.canvas.get_tk_widget().pack(
        side=tk.TOP,fill=tk.BOTH,expand=tk.YES)
    self.toolbar = NavigationToolbar2Tk(self.canvas,frmFig,
        pack_toolbar=False)
    self.toolbar.update()
    self.toolbar.pack(side=tk.RIGHT)

其中self.fig就是绘图窗口，后续若要画图，都要在这里设置坐标轴。canvas即绘图画布，toolbar则是画布下方的工具栏。在这里，可以将二者直接视为平平无奇的痛苦inter组件。

另一个和布局相关的函数是setFrmCtrl，其中又将 $x, y, z$ 三个坐标轴的设置封装成了一个函数，以简化代码。唯一的绘图按钮，绑定了btnDrawImg函数，将在后续实现。

def setFrmCtrl(self):
    frmCtrl = ttk.Frame(self.root,width=320)
    frmCtrl.pack(side=tk.RIGHT, fill=tk.Y)
    frm = ttk.Frame(frmCtrl, width=320)
    frm.pack(side=tk.TOP, fill=tk.X)
    ttk.Button(frm, text="绘图",width=5,
        command=self.btnDrawImg).pack(side=tk.LEFT)

    self.entrys = {}
    for flag in 'xyz':
        frm = ttk.Frame(frmCtrl)
        frm.pack(side=tk.TOP, fill=tk.X)
        self.setFrmAxis(frm, flag)

def setFrmAxis(self, frm, flag):
    tk.Label(frm, text=flag).pack(side=tk.LEFT)
    self.entrys[flag] = tk.Entry(frm)
    self.entrys[flag].pack(side=tk.LEFT, fill=tk.X)

绘图函数

绘图包括两个过程，一是读取输入内容，将其转换可供绘图的数据；二则是将这些数据绘制成图。

首先，第一步实现如下

def readEntrys(self):
    self.data = {}
    for flag in 'xyz':
        label = self.entrys[flag].get()
        if label=="": continue
        self.data[flag] = eval(self.entrys[flag].get())
        if flag =='x' : x = self.data['x']
        elif flag =='y' : y = self.data['y']

首先，定义一个全局字典 $se l f . d a t a$ 用于绘图。

然后简单起见，用eval函数直接读取python表达式。但需要注意的是，由于循环顺序是 $x\to y\to z$ ，所以 $x$ 的表达式中不能出现 $y, z$ ； $y$ 的表达式中只能出现 $x$ ； $z$ 的表达式中 $x, y$ 都可以出现。

最后是绘图，这里需要实现给定 $x, y$ 和 $x, y, z$ 这两种情况的绘图代码，前者是二维坐标系，后者是三维的。而canvas的绘图逻辑与plt如出一辙，都是先创建一个坐标轴，然后在坐标轴上绘图，最后也只需把plt.draw改为canvas.draw，代码如下

def btnDrawImg(self):
    self.readEntrys()
    self.fig.clf()
    if 'z' in self.data:
        ax = self.fig.add_subplot(projection='3d')
        ax.plot(self.data['x'], self.data['y'], self.data['z'])
    else:
        ax = self.fig.add_subplot()
        ax.plot(self.data['x'], self.data['y'])
    self.fig.subplots_adjust(left=0.1, right=0.95, top=0.95, bottom=0.08)
    self.canvas.draw()

源代码

最后，将所有代码附在后面

import tkinter as tk
import tkinter.ttk as ttk

import matplotlib as mpl
mpl.use('TkAgg')
from matplotlib.backends.backend_tkagg import (
    FigureCanvasTkAgg, NavigationToolbar2Tk)
from matplotlib.figure import Figure

import numpy as np

def setEntry(e, text):
    e.delete(0, "end")
    e.insert(0, text)

def detectArray(s):
    return s.rstrip('0123456789:, ')==''

class DarwSystem():
    def __init__(self):
        self.root = tk.Tk()
        self.root.title("数据展示工具")

        self.data = {}

        self.setFrmCtrl()
        self.setFrmFig()
        self.root.mainloop()

    def setFrmCtrl(self):
        frmCtrl = ttk.Frame(self.root,width=320)
        frmCtrl.pack(side=tk.RIGHT, fill=tk.Y)
        frm = ttk.Frame(frmCtrl, width=320)
        frm.pack(side=tk.TOP, fill=tk.X)
        ttk.Button(frm, text="绘图",width=5,
            command=self.btnDrawImg).pack(side=tk.LEFT)

        self.entrys = {}
        for flag in 'xyz':
            frm = ttk.Frame(frmCtrl)
            frm.pack(side=tk.TOP, fill=tk.X)
            self.setFrmAxis(frm, flag)

    def setFrmAxis(self, frm, flag):
        tk.Label(frm, text=flag).pack(side=tk.LEFT)
        self.entrys[flag] = tk.Entry(frm)
        self.entrys[flag].pack(side=tk.LEFT, fill=tk.X)

    def readEntrys(self):
        self.data = {}
        for flag in 'xyz':
            label = self.entrys[flag].get()
            if label=="": continue
            self.data[flag] = eval(self.entrys[flag].get())
            if flag =='x' : x = self.data['x']
            elif flag =='y' : y = self.data['y']

    def btnDrawImg(self):
        self.readEntrys()
        self.fig.clf()
        if 'z' in self.data:
            ax = self.fig.add_subplot(projection='3d')
            ax.plot(self.data['x'], self.data['y'], self.data['z'])
        else:
            ax = self.fig.add_subplot()
            ax.plot(self.data['x'], self.data['y'])
        self.fig.subplots_adjust(left=0.1, right=0.95, top=0.95, bottom=0.08)
        self.canvas.draw()


    def setFrmFig(self):
        frmFig = ttk.Frame(self.root)
        frmFig.pack(side=tk.LEFT,fill=tk.BOTH,expand=tk.YES)

        self.fig = Figure()
        self.canvas = FigureCanvasTkAgg(self.fig,frmFig)
        self.canvas.get_tk_widget().pack(
            side=tk.TOP,fill=tk.BOTH,expand=tk.YES)
        self.toolbar = NavigationToolbar2Tk(self.canvas,frmFig,
            pack_toolbar=False)
        self.toolbar.update()
        self.toolbar.pack(side=tk.RIGHT)

if __name__ == "__main__":
    test = DarwSystem()