当前位置: 首页 > article >正文

qt+opengl 加载三维obj文件

1前面我们已经熟悉了opengl自定义顶点生成一个立方体,并且我们实现了立方体的旋转,光照等功能。下面我们来用opengl来加载一个obj文件。准备我们首先准备一个简单的obj文件(head.obj)。资源在本页下载

2 在obj文件里面,我们关注下 v 字段和f字段

 v 字段就是顶点  f字段代表了面,意思是每个面的顶点编号。 结构如下

v -0.99179999 -2.98999995 4.05410025  表示顶点值

f 12791 127 126   表示这个面的三个点在 v 里面的index值是12791 也是就是v[12791]的值的顶点是这个面的顶点值。

3 下面我们来解析obj文件

bool load(QString fileName, QVector<float>& vPoints)
{if (fileName.mid(fileName.lastIndexOf('.')) != ".obj" && fileName.mid(fileName.lastIndexOf('.')) != ".OBJ"){qDebug() << "file is not a obj file.";return false;}QFile objFile(fileName);if (!objFile.open(QIODevice::ReadOnly)){qDebug() << "open" << fileName << "failed";return false;}else{qDebug() << "open" << fileName << "success!";}QVector<float> vertextPoints, texturePoints, normalPoints;QVector<Face> facesIndexs;while (!objFile.atEnd()){QByteArray lineData = objFile.readLine();QList<QByteArray> strValues = lineData.trimmed().split(' ');QString dataType = strValues.takeFirst();for(int i=0;i<strValues.size();i++){double nData = strValues.at(i).toDouble();QString strTemp = QString::number(nData,'f',4);if (dataType == "v"){vertextPoints.append(strTemp.toFloat());}else if (dataType == "vt"){texturePoints.append(strValues.at(i).toFloat());}else if (dataType == "vn"){normalPoints.append(strValues.at(i).toFloat());}else if (dataType == "f"){Face ondInfo;if(strValues.at(i).contains("/")){QList<QByteArray> strTemp = strValues.at(i).split('/');if(strTemp.size()==2){ondInfo.vertices  =  strTemp.at(0).toInt();ondInfo.texCoords =  strTemp.at(1).toInt();}else if(strTemp.size()==3){ondInfo.vertices  =  strTemp.at(0).toInt();ondInfo.texCoords =  strTemp.at(1).toInt();ondInfo.normals   =  strTemp.at(2).toInt();}}else{ondInfo.vertices = strValues.at(i).toInt();//qDebug()<<"Face ondInfo"<<ondInfo.vertices;}facesIndexs.append(ondInfo);}}}objFile.close();int count =0;for (int i=0;i<facesIndexs.size();i++){int vIndex = facesIndexs[i].vertices - 1;if(vIndex * 3 <=vertextPoints.size() ||vIndex * 3 + 1 <=vertextPoints.size()||vIndex * 3 + 2<=vertextPoints.size() ){vPoints << vertextPoints.at(vIndex * 3);vPoints << vertextPoints.at(vIndex * 3 + 1);vPoints << vertextPoints.at(vIndex * 3 + 2);// qDebug()<<"vIndex"<<i<<vertextPoints.size()<<vIndex * 3;}else{//  qDebug()<<"vIndex error"<<i<<vertextPoints.size()<<vIndex * 3;}}vertextPoints.clear();texturePoints.clear();normalPoints.clear();facesIndexs.clear();return true;
}

 接着我们来写加载代码

和以前的一样,就是写glsl语句,

#ifndef TESTOBJOPENGL_H
#define TESTOBJOPENGL_H#include <QObject>
#include <QWidget>
#include <QOpenGLWidget>
#include <QOpenGLExtraFunctions>
#include <QOpenGLBuffer>
#include <QOpenGLShaderProgram>
#include <QOpenGLVertexArrayObject>
#include <QTimer>
#include <QOpenGLTexture>
#include <QOpenGLWidget>
#include <QOpenGLFunctions>
#include <QOpenGLBuffer>
#include <QOpenGLVertexArrayObject>
#include <QTimer>
#include <QMouseEvent>QT_FORWARD_DECLARE_CLASS(QOpenGLShaderProgram);
QT_FORWARD_DECLARE_CLASS(QOpenGLTexture)
class testobjOpengl : public QOpenGLWidget, protected QOpenGLFunctions
{
public:testobjOpengl( QWidget *parent=nullptr);~testobjOpengl();
protected:void initializeGL() override;void paintGL() override;void resizeGL(int width, int height) override;void rotateBy(int xAngle, int yAngle, int zAngle);bool load(QString fileName, QVector<float>& vPoints);struct Face{int vertices;int texCoords;int normals;Face(){vertices = -1;texCoords = -1;normals = -1;}};
private:QVector<float> m_vPoints;int m_xRot;int m_yRot;int m_zRot;QOpenGLShaderProgram *m_program= nullptr;QOpenGLVertexArrayObject vao;QOpenGLBuffer vbo;QVector3D cameraPos;QVector3D cameraTarget;QVector3D cameraDirection;QOpenGLTexture *texture;int m_projMatrixLoc;int m_mvMatrixLoc;int m_normalMatrixLoc;int m_lightPosLoc;QMatrix4x4 m_proj;QMatrix4x4 m_camera;QMatrix4x4 m_world;QVector3D m_camera_pos;QTimer* timer;int  m_yPos=0;int  m_zPos=0;};#endif // TESTOBJOPENGL_H
#include "testobjopengl.h"static const char *vertexShaderSourceCore ="#version 330\n""layout (location = 0) in vec4 vertex;\n""layout (location = 1) in vec3 normal;\n""out vec3 vert;\n""out vec3 vertNormal;\n""uniform  mat4 matrix;\n""uniform  mat4 view;\n""uniform  mat4 projection;\n""uniform  mat3 normalMatrix;\n""void main() {\n""   vert = vertex.xyz;\n""   vertNormal = normalMatrix * normal;\n""   gl_Position = projection*view* matrix * vertex;\n""}\n";
static const char *fragmentShaderSourceCore ="#version 150\n""in highp vec3 vert;\n""in highp vec3 vertNormal;\n""out highp vec4 fragColor;\n""uniform highp vec3 lightPos;\n""void main() {\n""   highp vec3 L = normalize(lightPos - vert);\n""   highp float NL = max(dot(normalize(vertNormal), L), 0.0);\n""   highp vec3 color = vec3(1.0, 1.0, 0.0);\n""   highp vec3 col = clamp(color * 0.2 + color * 0.8 * NL, 0.0, 1.0);\n""   fragColor = vec4(col, 1.0);\n""}\n";testobjOpengl::testobjOpengl(QWidget *parent): QOpenGLWidget(parent),m_xRot(0),m_yRot(0),m_zRot(0)
{m_vPoints.clear();cameraPos = QVector3D(0, 0, 3);QString strTemp = "F:/Tree2/head.obj";bool ret = load(strTemp,m_vPoints);if(ret){timer = new QTimer;timer->setInterval(100);connect(timer,&QTimer::timeout,this,[=]{qDebug()<<"timeout";rotateBy(10 * 16, +10 * 16, -1 * 16);});timer->start();}else{qDebug()<<"1111111111111111";}}
void testobjOpengl::rotateBy(int xAngle, int yAngle, int zAngle)
{float cameraSpeed = 0.2;m_camera_pos -= cameraSpeed * QVector3D(0, 0, -1);//由远到近if(m_yPos>=100){m_yPos = 0;}m_yPos+=10;if(m_zPos>=100){m_zPos = 0;}m_zPos+=10;// m_camera_pos = QVector3D(0, m_yPos, m_zPos);//由远到近// m_camera_pos.setY(m_yPos);m_xRot += xAngle;m_yRot += yAngle;m_zRot += zAngle;update();//timer->stop();
}
testobjOpengl::~testobjOpengl()
{}void testobjOpengl::initializeGL()
{initializeOpenGLFunctions();m_program = new QOpenGLShaderProgram;m_program->addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSourceCore);m_program->addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSourceCore);if (m_program->link()){qDebug() << "link success!";}else{qDebug() << "link failed";}m_program->bindAttributeLocation("vertex", 0);m_program->bindAttributeLocation("normal", 1);m_program->link();m_program->bind();//    m_projMatrixLoc = m_program->uniformLocation("projection");
//    m_mvMatrixLoc = m_program->uniformLocation("matrix");
//    m_normalMatrixLoc = m_program->uniformLocation("normalMatrix");
//    m_lightPosLoc = m_program->uniformLocation("lightPos");vbo.create();vbo.bind();vbo.allocate(m_vPoints.data(), m_vPoints.size() * sizeof(float));QOpenGLFunctions *f = QOpenGLContext::currentContext()->functions();f->glEnableVertexAttribArray(0);f->glEnableVertexAttribArray(1);f->glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), nullptr);f->glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), reinterpret_cast<void *>(3 * sizeof(GLfloat)));vbo.release();m_program->setUniformValue(m_lightPosLoc, QVector3D(10, 10, 10)); 
}void testobjOpengl::paintGL()
{glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glEnable(GL_DEPTH_TEST);glEnable(GL_CULL_FACE);QMatrix4x4 m;//m.ortho(-0.5f, +0.5f, +0.5f, -0.5f, 4.0f, 15.0f);m.setToIdentity();m.translate(0.0f, 0.0f, 0.0f);m.rotate(m_xRot / 16.0f, 1.0f, 0.0f, 0.0f);m.rotate(90, 0.0f, 1.0f, 0.0f);m.rotate(0, 0.0f, 0.0f, 1.0f);m.scale(0.5);QMatrix4x4 view;view.setToIdentity();view.lookAt(QVector3D(0, 20, 20), QVector3D(0,0,0), QVector3D(1,0,0));m_program->bind();m_program->setUniformValue("projection", m_proj);m_program->setUniformValue("matrix", m);m_program->setUniformValue("view", view);m_program->setUniformValue("lightPos", QVector3D(10, 10, 0));QMatrix3x3 normalMatrix = m.normalMatrix();m_program->setUniformValue("normalMatrix", normalMatrix);glDrawArrays(GL_TRIANGLES, 0, m_vPoints.size()/3);m_program->release();
}void testobjOpengl::resizeGL(int width, int height)
{m_proj.setToIdentity();m_proj.perspective(45.0f, GLfloat(width) / height, 0.01f, 100.0f);
}
bool testobjOpengl::load(QString fileName, QVector<float>& vPoints)
{if (fileName.mid(fileName.lastIndexOf('.')) != ".obj" && fileName.mid(fileName.lastIndexOf('.')) != ".OBJ"){qDebug() << "file is not a obj file.";return false;}QFile objFile(fileName);if (!objFile.open(QIODevice::ReadOnly)){qDebug() << "open" << fileName << "failed";return false;}else{qDebug() << "open" << fileName << "success!";}QVector<float> vertextPoints, texturePoints, normalPoints;QVector<Face> facesIndexs;while (!objFile.atEnd()){QByteArray lineData = objFile.readLine();QList<QByteArray> strValues = lineData.trimmed().split(' ');QString dataType = strValues.takeFirst();for(int i=0;i<strValues.size();i++){double nData = strValues.at(i).toDouble();QString strTemp = QString::number(nData,'f',4);if (dataType == "v"){vertextPoints.append(strTemp.toFloat());}else if (dataType == "vt"){texturePoints.append(strValues.at(i).toFloat());}else if (dataType == "vn"){normalPoints.append(strValues.at(i).toFloat());}else if (dataType == "f"){Face ondInfo;if(strValues.at(i).contains("/")){QList<QByteArray> strTemp = strValues.at(i).split('/');if(strTemp.size()==2){ondInfo.vertices  =  strTemp.at(0).toInt();ondInfo.texCoords =  strTemp.at(1).toInt();}else if(strTemp.size()==3){ondInfo.vertices  =  strTemp.at(0).toInt();ondInfo.texCoords =  strTemp.at(1).toInt();ondInfo.normals   =  strTemp.at(2).toInt();}}else{ondInfo.vertices = strValues.at(i).toInt();//qDebug()<<"Face ondInfo"<<ondInfo.vertices;}facesIndexs.append(ondInfo);}}}objFile.close();int count =0;for (int i=0;i<facesIndexs.size();i++){int vIndex = facesIndexs[i].vertices - 1;if(vIndex * 3 <=vertextPoints.size() ||vIndex * 3 + 1 <=vertextPoints.size()||vIndex * 3 + 2<=vertextPoints.size() ){vPoints << vertextPoints.at(vIndex * 3);vPoints << vertextPoints.at(vIndex * 3 + 1);vPoints << vertextPoints.at(vIndex * 3 + 2);// qDebug()<<"vIndex"<<i<<vertextPoints.size()<<vIndex * 3;}else{//  qDebug()<<"vIndex error"<<i<<vertextPoints.size()<<vIndex * 3;}}vertextPoints.clear();texturePoints.clear();normalPoints.clear();facesIndexs.clear();return true;
}

 我们开始调用

testobjOpengl w;

w.show();

运行结果:

相关文章:

qt+opengl 加载三维obj文件

1前面我们已经熟悉了opengl自定义顶点生成一个立方体&#xff0c;并且我们实现了立方体的旋转&#xff0c;光照等功能。下面我们来用opengl来加载一个obj文件。准备我们首先准备一个简单的obj文件&#xff08;head.obj&#xff09;。资源在本页下载 2 在obj文件里面&#xff0c…...

一个简单的用C#实现的分布式雪花ID算法

雪花ID是一个依赖时间戳根据算法生成的一个Int64的数字ID&#xff0c;一般用来做主键或者订单号等。以下是一个用C#写的雪花ID的简单实现方法 using System; using System.Collections.Concurrent; using System.Diagnostics;public class SnowflakeIdGenerator {// 配置常量p…...

【实战ES】实战 Elasticsearch:快速上手与深度实践-2.2.1 Bulk API的正确使用与错误处理

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 Elasticsearch Bulk API 深度实践&#xff1a;性能调优与容错设计1. Bulk API 核心机制解析1.1 批量写入原理剖析1.1.1 各阶段性能瓶颈 2. 高性能批量写入实践2.1 客户端最佳…...

鸿蒙Flutter开发故事:不,你不需要鸿蒙化

在华为牵头下&#xff0c;Flutter 鸿蒙化如火如荼进行&#xff0c;当第一次看到一份上百个插件的Excel 列表时&#xff0c;我也感到震惊&#xff0c;排名前 100 的插件赫然在列&#xff0c;这无疑是一次大规模的军团作战。 然后&#xff0c;参战团队鱼龙混杂&#xff0c;难免有…...

中间件框架漏洞攻略

中间件&#xff08;英语&#xff1a;Middleware&#xff09;是提供系统软件和应⽤软件之间连接的软件&#xff0c;以便于软件各部件之间的沟通。 中间件处在操作系统和更⾼⼀级应⽤程序之间。他充当的功能是&#xff1a;将应⽤程序运⾏环境与操作系统隔离&#xff0c;从⽽实…...

第21周:RestNet-50算法实践

目录 前言 理论知识 1.CNN算法发展 2.-残差网络的由来 一、导入数据 二、数据处理 四、编译 五、模型评估 六、总结 前言 &#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 理论知识 1.CNN算法发展 该图列举出…...

构建大语言模型应用:数据准备(第二部分)

本专栏通过检索增强生成&#xff08;RAG&#xff09;应用的视角来学习大语言模型&#xff08;LLM&#xff09;。 本系列文章 简介数据准备&#xff08;本文&#xff09;句子转换器向量数据库搜索与检索大语言模型开源检索增强生成评估大语言模型服务高级检索增强生成 RAG 如上…...

AI-Sphere-Butler之Ubuntu服务器如何部署Nginx代理,并将HTTP升级成HTTPS,用于移动设备访问

环境&#xff1a; AI-Sphere-Butler WSL2 Ubuntu22.04 Nginx 问题描述&#xff1a; AI-Sphere-Butler之Ubuntu服务器如何部署Nginx代理&#xff0c;并将HTTP升级成HTTPS&#xff0c;用于移动设备访问 解决方案&#xff1a; 一、生成加密证书 1.配置OpenSSL生成本地不加…...

飞致云荣获“Alibaba Cloud Linux最佳AI镜像服务商”称号

2025年3月24日&#xff0c;阿里云云市场联合龙蜥社区发布“2024年度Alibaba Cloud Linux最佳AI镜像服务商”评选结果。 经过主办方的严格考量&#xff0c;飞致云&#xff08;即杭州飞致云信息科技有限公司&#xff09;凭借旗下MaxKB开源知识库问答系统、1Panel开源面板、Halo开…...

Django项目之订单管理part6(message组件和组合搜索组件)

一.前言 我们前面讲的差不多了&#xff0c;接着上节课讲&#xff0c;今天要来做一个撤单要求&#xff0c;我们可以用ajax请求&#xff0c;但是我这里介绍最后一个知识点&#xff0c;message组件&#xff0c;但是我会把两种方式都讲出来的&#xff0c;讲完这个就开始讲我们最重…...

Taro创建微信小程序项目 第一步搭建项目

1.node: 2.第一步&#xff1a; 安装taro npm install -g tarojs/cli 3.创建文件夹wxxcx, 创建demos的文件夹的项目&#xff08;demos项目名称&#xff09; taro init demos 出现以下信息&#xff1a;可以根据自己的需求选择 出现安装项目依赖失败不要紧 4.进入demos文件夹…...

S32K144外设实验(六):FTM输出单路PWM

文章目录 1. 概述1.1 时钟系统1.2 实验目的2. 代码的配置2.1 时钟配置2.2 FTM模块配置2.3 输出引脚配置2.4 API函数调用1. 概述 1.1 时钟系统 FTM的CPU接口时钟为SYS_CLK,在RUN模式下最高80MHz。模块的时钟结构如下图所示。 从上图中可以看出,FTM模块的功能时钟为SYS_CLK,…...

前端工程化开篇

前端发展史梳理&#xff1a; 最早的html&#xff0c;css&#xff0c;js是前端三剑客&#xff0c;足以实现所有的前端开发任务&#xff0c;但是呢&#xff0c;一个简单的前端交互效果可能就需要一大堆的代码去实现。 后来呢&#xff0c;有了前端库jQuery&#xff0c;他可以使前…...

地下管线三维建模软件工具MagicPipe3D V3.6.1

经纬管网建模系统MagicPipe3D&#xff0c;基于二维矢量管线管点数据本地离线参数化构建地下管网三维模型&#xff08;包括管道、接头、附属设施等&#xff09;&#xff0c;输出标准3DTiles、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、…...

iOS自定义collection view的page size(width/height)分页效果

前言 想必大家工作中或多或少会遇到下图样式的UI需求吧 像这种cell长度不固定&#xff0c;并且还能实现的分页效果UI还是很常见的 实现 我们这里实现主要采用collection view&#xff0c;实现的方式是自定义一个UICollectionViewFlowLayout的子类&#xff0c;在这个类里对…...

以科技赋能,炫我云渲染受邀参加中关村文化科技融合影视精品创作研讨会!

在文化与科技深度融合的时代浪潮下&#xff0c;影视创作行业经历着前所未有的变革。影视创作行业发展态势迅猛&#xff0c; 同时也面临着诸多挑战。为促进影视创作行业的创新发展&#xff0c;加强业内交流与合作&#xff0c; 3月25日下午&#xff0c;海淀区文化创意产业协会举办…...

华为、浪潮、华三链路聚合概述

1、华为 链路聚合可以提高链路带宽和链路冗余性。有三种类型&#xff0c;分别是手工链路聚合&#xff0c;静态lacp链路聚合&#xff0c;动态lacp链路聚合。 手工链路模式&#xff1a;也称负载分担模式&#xff0c;需手动指定链路&#xff0c;各链路之间平均分担流量。静态LAC…...

Android 蓝牙/Wi-Fi通信协议之:经典蓝牙(BT 2.1/3.0+)介绍

在 Android 开发中&#xff0c;经典蓝牙&#xff08;BT 2.1/3.0&#xff09;支持多种协议&#xff0c;其中 RFCOMM/SPP&#xff08;串口通信&#xff09;、A2DP&#xff08;音频流传输&#xff09;和 HFP&#xff08;免提通话&#xff09;是最常用的。以下是它们在 Android 中的…...

【go微服务】Golang微服务之基--rpc的实现原理以及应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

Redis的List类型

Redis的List类型 一.List类型简单介绍 二.List的常用命令1.LPUSH2.LRANGE3.LPUSHX4.RPUSH5.RPUSHX6.LPOP7.RPOP8.LINDEX9.LINSERT10.LLEN11.LREM12.LTRIM13.LSET 三.阻塞命令1.BRPOP&#xff08;i&#xff09;针对不是空的列表进行操作&#xff1a;&#xff08;ii&#xff09;针…...

【C语言】分支与循环(下)

前言&#xff1a;小飞在&#xff08;上&#xff09;篇总结了分支结构的内容&#xff0c;本文接上&#xff0c;总结循环结构的知识。 看完觉得有帮助的话记得点赞收藏加关注哦~ 目录 一、while循环 二、for循环 三、do-while循环 四、循环中的break和continue 五、循环结构…...

Android 中两个 APK 之间切换的几中方法

在 Android 中&#xff0c;两个 APK&#xff08;应用程序&#xff09;之间的切换通常是通过 Intent 来实现的。以下是一些常见的方法和注意事项&#xff0c;帮助你实现两个 APK 之间的切换。 一、启动目标 APK 的主 Activity 1、setPackage 方法 使用 Intent 的 setPackage …...

SpringBoot集成腾讯云OCR实现身份证识别

OCR身份证识别 官网地址&#xff1a;https://cloud.tencent.com/document/product/866/33524 身份信息认证&#xff08;二要素核验&#xff09; 官网地址&#xff1a;https://cloud.tencent.com/document/product/1007/33188 代码实现 引入依赖 <dependency><…...

留记录excel 模板导入

Data EqualsAndHashCode public class FillData {ExcelProperty(value "姓名", index 0)private String name;ExcelProperty(value "数值", index 1)private double number;ExcelProperty(value "日期", index 2)private Date date; }pack…...

【C++数据库】SQLite3数据库连接与操作

注意:本文代码均为C++20标准下实现 一、SQLite3库安装 1.1 安装库文件 【工具】跨平台C++包管理利器vcpkg完全指南 vcpkg install sqlite3# 集成至系统目录,之前执行过此命令的无需再次执行 vcpkg integrate install1.2 验证代码 在VS2022中新建控制台项目,测试代码如下…...

【机器学习基础 4】 Pandas库

一、Pandas库简介 Pandas 是一个开源的 Python 数据分析库&#xff0c;主要用于数据清洗、处理、探索与分析。其核心数据结构是 Series&#xff08;一维数据&#xff09;和 DataFrame&#xff08;二维表格数据&#xff09;&#xff0c;可以让我们高效地操作结构化数据。Pandas …...

如何在根据名称或id找到json里的节点以及对应的所有的父节点?

函数如下&#xff1a; 数据如下&#xff1a; [{ "name": "数据看板", "id": "data", "pageName": "tableeauData", "list": [] }, { "name": "审计模块", "id": &quo…...

JS—异步编程:3分钟掌握异步编程

个人博客&#xff1a;haichenyi.com。感谢关注 一. 目录 一–目录二–引言三–JavaScript 事件循环机制四–定时器的秘密&#xff1a;setTimeout 和 setInterval五–异步编程模型对比 二. 引言 在现代Web开发中&#xff0c;异步编程是提升性能的关键技术。无论是脚本加载&am…...

mxgraph编辑器的使用

前端JS如何使用mxgraph编辑器 说明&#xff1a;此项目是JS项目&#xff0c;目前还不支持TS 引入资源 可以直接从官网上拿下来&#xff0c;或者从其他地方获取 官网编辑器 如果只是展示图形的话只引入 mxClient.js就可以了 一个免费在线编辑器 自己用它做了一个在线编辑器&#…...

electron打包vue2项目流程

1&#xff0c;安装一个node vue2 的项目 2&#xff0c;安装electron&#xff1a; npm install electron -g//如果安装还是 特比慢 或 不想安装cnpn 淘宝镜像查看是否安装成功&#xff1a;electron -v 3&#xff0c;进入到项目目录&#xff1a;cd electron-demo 进入项目目录…...