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

news2024/11/15 13:28:19

文章目录

    • 将图像嵌入tkinter
    • 简单的绘图系统
    • 导入数据
    • 三维绘图
    • 源代码

将图像嵌入tkinter

tkinter是Python标准库中自带的GUI工具，使用十分方便，如能将matplotlib嵌入到tkinter中，就可以做出相对专业的数据展示系统，很有竞争力。

在具体实现之前，可以先看一下典型的matplotlib窗口

import numpy as np
import matplotlib.pyplot as plt

plt.plot(np.arange(100))
plt.show()

在这里插入图片描述

这个图由两部分构成，分别是上面用于绘图的FigureCanvasTkAgg画布，以及下方的工具栏NavigationToolbar2Tk，这两个模块在地位上和tkinter中的组件是等同的。

除此之外，绘图窗口Figure也是一个独立部件，故而将matplotlib嵌入到tkinter中，最少需要用到下面这些模块

import tkinter as tk
import tkinter.ttk as ttk

import matplotlib as mpl
mpl.use('TkAgg')        # 启用tkinter渲染matplotlib，从而可以嵌入到tkinter中
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import (
    FigureCanvasTkAgg, NavigationToolbar2Tk)
from matplotlib.figure import Figure

接下来可以创建一个窗口，来演示一下matplotlib嵌入tkinter中的过程，首先创建一个窗口，并为其添加两个Frame，右边用于添加组件，左边用于嵌入图像，代码如下

root = tk.Tk()
root.title("数据展示工具")
frmCtrl = ttk.Frame(root, width=200)
frmCtrl.pack(side=tk.RIGHT)

frmFigure = ttk.Frame(root)
frmFigure.pack(side=tk.LEFT, fill=tk.BOTH, expand=tk.YES)

嵌入图像的部分又分为画布和工具栏，为了便于演示，下面先在绘图窗口中画一条直线，并将其导入画布，然后将画布放置到frmFigure上。至于工具栏，在关联画布和Frame之后需要更新一下，整体代码如下

fig = Figure()
ax = fig.add_subplot()
ax.plot(np.arange(100))

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

至此，就已经完成了图像的嵌入工作，最后调用mainloop，让窗口一直显示

root.mainloop()

结果如下

在这里插入图片描述

简单的绘图系统

在理解matplotlib嵌入到tkinter中的原理之后，就已经具备了打造绘图系统的技术基础，接下来要做的，就是做一个较有可读性的绘图类，其实就是把前面的代码封装到class里而已，代码如下

import tkinter as tk
import tkinter.ttk as ttk

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

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

        frmCtrl = ttk.Frame(self.root,width=320)
        frmCtrl.pack(side=tk.RIGHT, fill=tk.Y)
        self.setFrmCtrl(frmCtrl)

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

        self.root.mainloop()
    
    def setFrmCtrl(self, frmCtrl):
        pass

    def setFrmFig(self, frmFig):
        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)

其中，setFrmCtrl用于设置控制面板，后续会实现诸多功能；setFrmFig用于设置绘图界面，其中self.fig就是绘图窗口，后续若要画图，都要在这里设置坐标轴。

最简单的绘图系统，也至少需要三个部件，分别用于输入x值、y值以及点击绘图按钮，由于x,y都是绘图坐标，在控件形式上也高度雷同，从而setFrmCtrl函数可以先写为下面的形式

def setFrmCtrl(self, frmCtrl):
    frm = ttk.Frame(frmCtrl)
    frm.pack(side=tk.TOP, fill=tk.X)
    self.setCtrlButtons(frm)

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

第一个frm用于存放控制按钮；self.data用于存放坐标值，self.entrys中用于存放坐标的输入框，后面的循环为具体的布局过程。

setCtrlButtons是具体的控制按钮的布局函数，而setFrmAxis为坐标轴的布局函数，定义如下

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 setCtrlButtons(self, frm):
    tk.Button(frm, text="绘图",width=5,
        command=self.btnDrawImg).pack(side=tk.LEFT)

# 绘图函数
def btnDrawImg(self):
    pass

其中btnDrawImg是绘图函数，简单起见，这里用eval函数直接读取python表达式，同时为了让不熟悉Python的人也可以顺利生成x序列，将np.linspace隐去。则x和y的读取过程可写为

def btnDrawImg(self):
    x = eval(f"np.linspace({self.entrys['x'].get()})")
    self.data['y'] = eval(self.entrys['y'].get())
    self.data['x'] = x
    self.drawPlot()

self.drawPlot就是核心的绘图函数，主要流程与命令行调用plt如出一辙，首先创建一个坐标轴，然后在坐标轴上绘图，区别是最后需要调用self.canvas中的引擎来完成图像绘制

def drawPlot(self):
    self.fig.clf()
    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()

结果如下

在这里插入图片描述

导入数据

单纯从作图的角度来说，更多情况是已经有了一组数据，然后需要将其绘制。这组数据可能是txt格式的，也可能是csv格式的，还可能是二进制数据。当然，这些一会儿在想，首先就是要添加一个按钮，将setCtrlButtons函数添加一行：

def setCtrlButtons(self, frm):
    ttk.Button(frm, text="绘图",width=5,
        command=self.btnDrawImg).pack(side=tk.LEFT)
    ttk.Button(frm, text="加载",width=5,
        command=self.btnLoadData).pack(side=tk.LEFT)

然后就可以考虑self.btnLoadData函数了。简洁起见，以后将不再具体展示setCtrlButtons的具体代码，而只是写出新增的代码。

加载数据，其实就是加载文件，那么就需要用到文件对话框

from tkinter.filedialog import askopenfile

self.btnLoadData函数，如果只是想实现一个最简单的功能，那么可以写为

def btnLoadData(self):
    name = askopenfilename()
    data = np.genfromtxt(name)
    if data.shape[1] < 2:
        return
    self.data['x'] = data[:,0]
    self.data['y'] = data[:,1]
    self.drawPlot()

效果如下

在这里插入图片描述

现在，我们有了两种数据生成模式，一是用语法生成，二是通过加载得到。但目前二者并不兼容。为此，可以为x和y的输入框添加一个标识，比如当x或者y的输入框中是data的时候，再点击绘图，就可以选中加载后的数据。

由于tkinter中输入Entry内容比较繁琐，所以封装一个全局的函数专门用于更改Entry内容

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

接下来，将加载数据函数和绘图函数分别改写为

def btnLoadData(self):
    name = askopenfilename()
    data = np.genfromtxt(name)
    if data.shape[1] < 2:
        return
    for i,key in enumerate('xy'):
        self.data[key] = data[:,i]
        setEntry(self.entrys[key], 'data')

def btnDrawImg(self):
    xLab = self.entrys['x'].get()
    if xLab != "data":
        x = eval(f"np.linspace({xLab})")
        self.data['x'] = x
    else:
        x = self.data['x']
    yLab = self.entrys['y'].get()
    if yLab != "data":
        self.data['y'] = eval(yLab)
    self.drawPlot()

在btnLoadData函数中，取消了绘图功能，而是在导入数据后，将x和y的输入框设置为"data"。

而绘图函数中，检测x和y输入框的内容，如果是data，那么说明已经读取到了相关数据，就直接调用，而非重新生成。

效果如下

在这里插入图片描述

三维绘图

三维绘图需要一个新的坐标变z，由于此前在设置x和y的时候，用到了self.entrys来存放坐标，所以更改起来十分便捷，只需在setFrmCtrl的循环中加一个’z’就可以了

def setFrmCtrl(self, frmCtrl):
    # 前面不用管，后面也不用管，只要把in 'xy'改为 'xyz'
    for flag in 'xyz':
        # 里面也不用管

相应地，加载数据的函数也略作修改

def btnLoadData(self):
    # 前面不用动，后面也不用动，只要把'xy'换成'xyz'
    for i,key in enumerate('xyz'):
        # 后面不用动

但随着z轴的出现，y轴也有可能是自变量，考虑到x和y都有可能用类似1,1,5的形式生成，所以先做一个检测数组的全局函数

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

然后新建readEntrys函数以读取输入框，考虑到在函数表达式中，用x和y指代self.data[‘x’]和selfdata[‘y’]，所以需要新建局部变量x和y，以确保eval函数的正常使用。

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

最后，就是绘图功能的实现，由于有了readEntrys函数，从而btnDrawImg函数变得更加专注，只需复制调用专门的绘图函数就可以了。三维绘图函数和二维绘图函数其实没什么区别，只要绘制的还是plot图，区别只是多加了一个z轴坐标而已。

def btnDrawImg(self):
    self.readEntrys()
    self.fig.clf()
    if 'z' in self.data: 
        self.drawPlot3D()
    else:
        self.drawPlot()
    self.fig.subplots_adjust(left=0.1, right=0.95, top=0.95, bottom=0.08)
    self.canvas.draw()

def drawPlot(self):
    self.fig.clf()
    ax = self.fig.add_subplot()
    ax.plot(self.data['x'], self.data['y'])

def drawPlot3D(self):
    ax = self.fig.add_subplot(projection='3d')
    ax.plot(self.data['x'], self.data['y'], self.data['z'])

效果如下

在这里插入图片描述

源代码

本文是在这四篇博客的基础之上，做适当精简而总结的：将matplotlib嵌入到tkinter 📈简单的绘图系统 📈数据导入📈三维绘图系统

其基本思路是，以第四篇博客的源代码为基准，优化这个代码的设计过程，使之更易于学习，所以源代码并没有发生变化。

import tkinter as tk
import tkinter.ttk as ttk
from tkinter.filedialog import askopenfilename

import matplotlib as mpl
mpl.use('TkAgg')
import matplotlib.pyplot as plt
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 = {}

        frmCtrl = ttk.Frame(self.root,width=320)
        frmCtrl.pack(side=tk.RIGHT, fill=tk.Y)
        self.setFrmCtrl(frmCtrl)

        frmFig = ttk.Frame(self.root)
        frmFig.pack(side=tk.LEFT,fill=tk.BOTH,expand=tk.YES)
        self.setFrmFig(frmFig)
        
        self.root.mainloop()
    
    def setFrmCtrl(self, frmCtrl):
        frm = ttk.Frame(frmCtrl, width=320)
        frm.pack(side=tk.TOP, fill=tk.X)
        self.setCtrlButtons(frm)

        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 setCtrlButtons(self, frm):
        ttk.Button(frm, text="绘图",width=5,
            command=self.btnDrawImg).pack(side=tk.LEFT)
        ttk.Button(frm, text="加载",width=5,
            command=self.btnLoadData).pack(side=tk.LEFT)

    def btnLoadData(self):
        name = askopenfilename()
        data = np.genfromtxt(name)
        for i, flag in enumerate('xyz'):
            if i >= data.shape[1]:
                return
            self.data[flag] = data[:,i]
            setEntry(self.entrys[flag], 'data')
    
    def readEntrys(self):
        for flag in 'xyz':
            label = self.entrys[flag].get()
            if label=="":
                continue
            if label != 'data':
                if detectArray(label):
                    label = f"np.linspace({label})"
                self.data[flag] = eval(self.entrys[flag].get())
            if flag =='x' : x = self.data['x']
            elif flag =='y' : y = self.data['y']        
        
        if self.entrys['z'].get()=="":
            del self.data['z']

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

    def drawPlot(self):
        ax = self.fig.add_subplot()
        ax.plot(self.data['x'], self.data['y'])

    def setFrmFig(self, frmFig):
        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()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/930391.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C进阶】指针（一）

【C进阶】指针（一）

大家好&#xff0c;我是深鱼~ 【前言】&#xff1a; 指针的主题&#xff0c;在初阶指针章节已经接触过了&#xff0c;我们知道了指针的概念&#xff1a; 1.指针就是个变量&#xff0c;用来存放地址&#xff0c;地址的唯一标识一块内存空间&#xff08;指针变量&#xff09;&a…
阅读更多...
centos7装docker（在线与离线）

centos7装docker（在线与离线）

centos7装docker&#xff08;在线与离线&#xff09; 小白教程&#xff0c;一看就会&#xff0c;一做就成。 1.Docker是什么 Docker是一个开源的应用容器引擎&#xff0c;Docker可以让开发者打包应用及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何Linux上运行…
阅读更多...
stm32f103+CC2500PATR2.4SK

stm32f103+CC2500PATR2.4SK

前言 记录一下自己最近在项目中用到并使用这个模块的使用过程。 模块介绍 模块特点 CC2500PATR2.4SK是集FSK/ASK/OOK/MSK.调制方式于一体的收发模块。它提供扩展硬件支持实现信息包处理、数据缓冲、群发射、空闲信道评估、链接 质量指示和无线电波唤醒&#xff0c;可以采用…
阅读更多...
【Qt学习】03：QMainWindow

【Qt学习】03：QMainWindow

QMainWindow OVERVIEW QMainWindow一、QMainWindow1.菜单栏2.工具栏3.状态栏4.铆接部件5.核心部件6.练习 二、ui资源文件 QMainWindow是一个为用户提供主窗口程序的类&#xff0c;包含一个菜单栏menu bar、多个工具栏tool bars、多个锚接部件dock widgets、一个状态栏status ba…
阅读更多...
【SpringBoot】第二篇：RocketMq使用

【SpringBoot】第二篇：RocketMq使用

背景&#xff1a; 本文会介绍多种案例&#xff0c;教大家如何使用rocketmq。 一般rocketmq使用在微服务项目中&#xff0c;属于分模块使用。这里使用springboot单体项目来模拟使用。 本文以windows系统来做案例。 下载rocketmq和启动&#xff1a; RocketMQ 在 windows 上运行…
阅读更多...
基于ssm+vue德云社票务系统源码和论文

基于ssm+vue德云社票务系统源码和论文

基于ssmvue德云社票务系统源码和论文063 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1.选题的依据和意义 互联网时代&#xff0c;随着生活节奏的加快和不断上升的压力&#xff0c;人们急需寻找到情绪的宣泄…
阅读更多...
你工作效率低，可能是因为不会Python...

你工作效率低，可能是因为不会Python...

前言 你是不是感觉你的工作非常无聊&#xff0c;每天有大量的重复性的工作要做&#xff0c;比如在我的工作中&#xff0c;就有很多类似的动作。每天早上要看我们DevOps流水线跑出的结果&#xff0c;查看各个微服务中的重复代码率是多少&#xff0c;有没有增加&#xff0c;Clea…
阅读更多...
【Qt学习】06：事件与事件过滤器

【Qt学习】06：事件与事件过滤器

OVERVIEW 事件与事件过滤器一、事件1.鼠标事件创建子类MyLabel重写鼠标事件提升Label控件为MyLabel 2.定时器事件timerEventQTimer 3.事件分发器&#xff08;event函数&#xff09;event函数重写event函数深入 二、事件过滤器1.事件过滤器2.事件处理的五个层次 事件与事件过滤器…
阅读更多...
VMVareC++开发环境快速配置

VMVareC++开发环境快速配置

OVERVIEW VMVareC开发环境快速配置ipgitvimgithubzshgcc&g&cmakesshifconfigmysqlnginxredisgdb VMVareC开发环境快速配置 VMVareC开发环境快速配置&#xff0c;为了省时间快速整理出文档方便以后快速配置&#xff0c; 按照这个流程直接可以快速得到一个舒适的C/C开发…
阅读更多...
[论文阅读笔记25]A Comprehensive Survey on Graph Neural Networks

[论文阅读笔记25]A Comprehensive Survey on Graph Neural Networks

这是一篇GNN的综述, 发表于2021年的TNNLS. 这篇博客旨在对GNN的基本概念做一些记录. 论文地址: 论文 1. 引言, 背景与定义 对于图像数据来说, CNN具有平移不变性和局部连接性, 因此可以在欧氏空间上良好地学习. 然而, 对于具有图结构的数据(例如社交网络 化学分子等)就需要用…
阅读更多...
用AI + Milvus Cloud搭建着装搭配推荐系统

用AI + Milvus Cloud搭建着装搭配推荐系统

在上一篇文章中，我们学习了如何利用人工智能技术（例如开源 AI 向量数据库 Milvus Cloud 和 Hugging Face 模型）寻找与自己穿搭风格相似的明星。在这篇文章中，我们将进一步介绍如何通过对上篇文章中的项目代码稍作修改，获得更详细和准确的结果，文末附赠彩蛋。 注：试用此…
阅读更多...
Excel 打开文件提示内存或磁盘不足

Excel 打开文件提示内存或磁盘不足

Excel表格打开文件时&#xff0c;提示内存或磁盘空间不足&#xff0c;Microsoft Excel 无法再次打开或保存任何文档&#xff0c;这是很多人都会遇到的问题&#xff0c;该如何解决这个问题呢&#xff1f;如果你是用Excel表格打开某个文件时遇到提示内存或磁盘空间不足&#xff0…
阅读更多...
学好嵌入式，未来能干啥？

学好嵌入式，未来能干啥？

很多对嵌入式行业不了解的人会以为嵌入式就是单纯搞单片机的工作。甚至有很多专业学生也抱有这种观念。 这种现象的原因在于大学专业中没有专门针对嵌入式行业的完善专业体系。嵌入式的知识体系庞大&#xff0c;不同的方向需要的知识差异很大。关于嵌入式学习路线&#xff0c;网…
阅读更多...
Django（4）-Django 管理页面

Django（4）-Django 管理页面

创建一个管理员账号 python manage.py createsuperuser运行项目&#xff0c;访问http://127.0.0.1:8080/admin&#xff0c;可以看到管理员界面 管理页面加上投票应用 polls/admin.py from django.contrib import admin# Register your models here. from .models import …
阅读更多...
npm和yarn的区别？

npm和yarn的区别？

文章目录 前言npm和yarn的作用和特点npm和yarn的安装的机制npm安装机制yarn安装机制检测包解析包获取包链接包构建包 总结后言 前言 这一期给大家讲解npm和yarn的一些区别 npm和yarn的作用和特点 包管理&#xff1a;npm 和 yarn 可以用于安装、更新和删除 JavaScript 包。它们提…
阅读更多...
腾讯云服务器可用区是什么？可用区怎么选择？

腾讯云服务器可用区是什么？可用区怎么选择？

腾讯云服务器可用区是什么意思&#xff1f;可用区是指同一地域内电力和网络互相独立的物理数据中心&#xff0c;腾讯云每个地域下都有多个可用区供选择&#xff0c;将应用部署到不同可用区能够做到故障隔离&#xff0c;提升应用的可靠性和容灾性&#xff0c;阿腾云来详细说下什…
阅读更多...
SpringMVC 第二天

SpringMVC 第二天

第 1 章 ModelAttribute 和 SessionAttribute[ 应 用 ] 1.1ModelAttribute 1.1.1 使用说明 作用&#xff1a; 该注解是 SpringMVC4.3 版本以后新加入的。它可以用于修饰方法和参数。 出现在方法上&#xff0c;表示当前方法会在控制器的方法执行之前&#xff0c;先执行…
阅读更多...
综合能源系统（9）——综合能源系统运行管控平台技术

综合能源系统（9）——综合能源系统运行管控平台技术

综合能源系统关键技术与典型案例　 何泽家&#xff0c;李德智主编 1、综合能源系统运行管控平台技术发展现状 在综合能源服务蓝海市场驱动下&#xff0c;作为能源和互联网跨界融合中枢产品&#xff0c;综合能源服务平台取得了较大进展。综合能源服务平台属性示意图如图3-47所…
阅读更多...
Jvm之JIT优化详细解释

Jvm之JIT优化详细解释

文章目录 一、JIT 产生的背景二、HotSpot虚拟机内置JIT编译器1. Client Compiler2. Server Compiler3. 查看本地编译器模式 三、常见热点探测技术1. 基于计数器的热点探测2. 基于采样的热点探测2.1 方法调用计数器2.2 回边计数器 四、常见JIT优化手段1. 公共子表达式消除2. 方法…
阅读更多...
vue登录验证码组件，前端验证

vue登录验证码组件，前端验证

效果图 点击可以切换验证码 自定义组件 <template><div class"s-canvas"><canvas id"s-canvas" :width"contentWidth" :height"contentHeight"></canvas></div> </template> <script> e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023