首页 > 其他分享 >QT+OpenGL创建一个三角形并动态改变三角形颜色

QT+OpenGL创建一个三角形并动态改变三角形颜色

时间:2024-08-21 11:04:31浏览次数:13  
标签:1.0 QT OpenGL 0.0 shaderProgram2 0.5 shaderProgram QPushButton 三角形

一、概述

  需求:

    1.使用QT+OpenGL创建一个三角形

    2.默认三角形为黑色

    3.可以通过点击按钮改变三角形颜色值(红绿蓝)

    4.如下图所示

    ps:这一篇用的是QT封装好的opengl相关帮助类,下一篇会用原生的来写。

    

 

二、代码示例

  1.让窗口继承QOpenGLWidget、QOpenGLFunctions、并重写initializeGL()、resizeGL(w,h)、paintGL()

class GLTriangleWindow : public QOpenGLWidget,protected QOpenGLFunctions
{
    Q_OBJECT

public:
    GLTriangleWindow(QWidget* parent = nullptr);
    ~GLTriangleWindow();
    
protected:
    virtual void initializeGL();//初始化OpenGL
    virtual void resizeGL(int w, int h);//ResizeWindow大小
    virtual void paintGL();//绘制OpenGL

 

  2.使用QT创建一个窗口并放置三个QPushButton,并给QPushButton设置点击事件(信号槽)

this->resize(QSize(480, 480));
this->setWindowTitle("三角形");
this->setWindowIcon(QIcon("images/opencv.png"));
QHBoxLayout* hLayout = new QHBoxLayout(this);
QPushButton* btnRed = new QPushButton(this);
btnRed->setText("红色");
QPushButton* btnGreen = new QPushButton(this);
btnGreen->setText("绿色");
QPushButton* btnBlue = new QPushButton(this);
btnBlue->setText("蓝色");
hLayout->addWidget(btnRed);
hLayout->addWidget(btnGreen);
hLayout->addWidget(btnBlue);
hLayout->setAlignment(Qt::AlignTop);

connect(btnRed, &QPushButton::clicked, [=]() {
    changeTriangleColor(RED);
    });

connect(btnGreen, &QPushButton::clicked, [=]() {
    changeTriangleColor(GREEN);
    });

connect(btnBlue, &QPushButton::clicked, [=]() {
    changeTriangleColor(BLUE);
    });

  3.

void GLTriangleWindow::initializeGL() {
    initializeOpenGLFunctions();

    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);//设置清屏颜色为红色
    glClear(GL_COLOR_BUFFER_BIT);

    //第一个
    shaderProgram.create();
    shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/QtForOpenCV4Tool/shader/triangle.vert");
    shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/QtForOpenCV4Tool/shader/triangle.frag");
    shaderProgram.link();

    //第二个
    shaderProgram2.create();
    shaderProgram2.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/QtForOpenCV4Tool/shader/triangle.vert");
    shaderProgram2.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/QtForOpenCV4Tool/shader/triangle.frag");
    shaderProgram2.link();

    //开启着色器属性pos属性
    shaderProgram.enableAttributeArray("pos");
    shaderProgram2.enableAttributeArray("pos");
}


void GLTriangleWindow::resizeGL(int w, int h) {
    glViewport(0, 0, w, h);
}
void GLTriangleWindow::paintGL() {
    shaderProgram.bind();
    //设置三角形的顶点
    GLfloat vertices[] = {
        0.0f, 0.5f, 0.0f,
        0.5f, -0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
    };
    //设置顶点数据的来源
    shaderProgram.setAttributeArray("pos", vertices, 3);
    glDrawArrays(GL_TRIANGLES, 0, 3);

    //绘制第二个三角形
    shaderProgram2.bind();
    //设置三角形的顶点
    GLfloat vertices2[] = {
        0.5f, -0.5f, 0.0f,
        0.5f, -1.0f, 0.0f,
        1.0f, -0.5f, 0.0f,
    };
    //设置顶点数据的来源
    shaderProgram2.setAttributeArray("pos", vertices2, 3);
    glDrawArrays(GL_TRIANGLES, 0, 3);

}
void GLTriangleWindow::changeTriangleColor(TriColor mColor) {
    //makeCurrent();
    switch (mColor) {
    case RED:
        shaderProgram.bind();
        shaderProgram.setUniformValue("ourColor", 1.0f, 0.0f, 0.0f, 1.0f);
        shaderProgram2.bind();
        shaderProgram2.setUniformValue("ourColor", 1.0f, 0.0f, 0.0f, 1.0f);
        break;
    case GREEN:
        shaderProgram.bind();
        shaderProgram.setUniformValue("ourColor", 0.0f, 1.0f, 0.0f, 1.0f);
        shaderProgram2.bind();
        shaderProgram2.setUniformValue("ourColor", 0.0f, 1.0f, 0.0f, 1.0f);
        break;
    case BLUE:
        shaderProgram.bind();
        shaderProgram.setUniformValue("ourColor", 0.0f, 0.0f, 1.0f, 1.0f);
        shaderProgram2.bind();
        shaderProgram2.setUniformValue("ourColor", 0.0f, 0.0f, 1.0f, 1.0f);
        break;
    }
    glDrawArrays(GL_TRIANGLES, 0, 3);
    update();//opengl的渲染流程是一个巨大的状态机。这里调用update,会更新状态机
    //doneCurrent();
}

 

标签:1.0,QT,OpenGL,0.0,shaderProgram2,0.5,shaderProgram,QPushButton,三角形
From: https://www.cnblogs.com/tony-yang-flutter/p/18371198

相关文章

  • lazarus 编译时切换QT5/GTK2的方法
    lazarus编译时可以随时切换QT5/GTK2,方法如下:在project菜单-->options-->compileroptions-->additionsandoverrides点Set"LCLWidgetType"选择QT5或其他然后重新编译应用就可以。带menu、combobox等控件(在银河麒麟)的应用,用GTK2时有深灰的背景,QT5编译的整体会好点。注意:fastrepor......
  • Qt_ui生成界面原理
    QtUI界面生成原理在使用Qt开发图形用户界面(GUI)时,我们可以使用QtDesigner创建.ui文件,这个文件描述了界面的布局和组件信息。在编译项目时,这些信息会被转换为实际的代码,生成一个可视化的界面。下面是详细的步骤解释:1.创建.ui界面文件本质:.ui文件是一个XML......
  • 如何用css制作一个三角形?
    在CSS中,你可以使用多种方法来实现三角形。以下是两种常见的方法:方法一:使用边框(border)你可以使用一个空div,并利用其边框的宽度和颜色来创建三角形。例如,如果你想创建一个朝上的三角形,你可以这样写:创建一个向上的三角形HTML代码:html<divclass="triangle-up"></div>CSS代......
  • Qt+ffmpeg环境搭建
    Qt+ffmpeg环境搭建各平台常见视频开发库举例:iOS:AVFoundationAudioUnitAndroid:MediaPlayer,MediaCodecWindows:DirectShowLinux:GStreamerFFmpeg库是一个跨平台的视频开发库,还有libVLC也是一个跨平台的视频开发库掌握了其中一个库,也能很快上手其它库,因为音视频解......
  • 输出一个三角形
    1.用for循环设置5次循环2.包住循环,输出空白的三角形3.接着for循环输出三角形建议使用debug来了解具体如何运行,此处不好解释......
  • 如何用纯CSS绘制三角形--03
    下拉菜单中的箭头通常用于提示用户点击以展开菜单。CSS三角形实现这个箭头: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • QTday4
    思维导图 第二题 widget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>#include<QTime>#include<QTimerEvent>#include<QTextToSpeech>QT_BEGIN_NAMESPACEnamespaceUi{classWidget;}QT_END_NAMESPACEclassWidget:public......
  • 如何用纯CSS绘制三角形
    要用纯CSS绘制三角形,可以通过利用CSS中的border属性来实现。具体来说,核心原理是通过设置不同方向的边框颜色和宽度来形成三角形效果。以下是写技术博客时可以介绍的几个要点:1.三角形的基本原理CSS三角形的关键在于设置一个元素的宽高为0,同时通过边框来创建三角形。例如:.trian......
  • QTabWidget自定义样式(仿DotNetBar)
    QSS如下,若需要tab栏背景色需要添加ui->tabWidget->setAttribute(Qt::WA_StyledBackground);语句使background-color生效,这个时候qtdesigner中仍然看不到背景色,但是不要担心它是生效的,只需在属性中勾上autofillbackground即可在designer中预览(该属性在QWidget属性组中,实际上勾不勾......
  • 如何用纯CSS绘制三角形--02
    通过结合@keyframes动画,让三角形实现旋转、移动等动态效果 代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......