计算机图形学实践:结合Qt和OpenGL实现绘制彩色三角形
以下是使用Qt和OpenGL实现绘制彩色三角形并添加颜色选择按钮的步骤:
一、创建OpenGL绘制组件
- 继承QOpenGLWidget实现自定义绘制类:
// myopenglwidget.h
#include <QOpenGLWidget>
#include <QOpenGLFunctions_3_3_Core>
#include <QOpenGLShaderProgram>class MyOpenGLWidget : public QOpenGLWidget, protected QOpenGLFunctions_3_3_Core
{Q_OBJECT
public:explicit MyOpenGLWidget(QWidget *parent = nullptr);void setTriangleColor(const QColor &color);protected:void initializeGL() override;void paintGL() override;private:GLuint VAO, VBO;QOpenGLShaderProgram *shaderProgram;QVector3D triangleColor = QVector3D(1.0f, 0.0f, 0.0f); // 默认红色
};
二、实现OpenGL初始化与绘制
// myopenglwidget.cpp
void MyOpenGLWidget::initializeGL()
{initializeOpenGLFunctions();glClearColor(0.1f, 0.1f, 0.1f, 1.0f);// 顶点数据(三角形位置)float vertices[] = {-0.5f, -0.5f, 0.0f,0.5f, -0.5f, 0.0f,0.0f, 0.5f, 0.0f};// 创建VAO/VBOglGenVertexArrays(1, &VAO);glGenBuffers(1, &VBO);glBindVertexArray(VAO);glBindBuffer(GL_ARRAY_BUFFER, VBO);glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);// 配置顶点属性glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);// 创建着色器程序shaderProgram = new QOpenGLShaderProgram(this);shaderProgram->addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout (location = 0) in vec3 aPos;\n""void main() {\n"" gl_Position = vec4(aPos, 1.0);\n""}");shaderProgram->addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""uniform vec3 ourColor;\n""void main() {\n"" FragColor = vec4(ourColor, 1.0);\n""}");shaderProgram->link();
}void MyOpenGLWidget::paintGL()
{glClear(GL_COLOR_BUFFER_BIT);shaderProgram->bind();shaderProgram->setUniformValue("ourColor", triangleColor);glBindVertexArray(VAO);glDrawArrays(GL_TRIANGLES, 0, 3);shaderProgram->release();
}void MyOpenGLWidget::setTriangleColor(const QColor &color)
{triangleColor = QVector3D(color.redF(), color.greenF(), color.blueF());update(); // 触发重绘
}
三、添加颜色选择按钮
// mainwindow.cpp
#include <QMainWindow>
#include <QPushButton>
#include <QColorDialog>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{MyOpenGLWidget *glWidget = new MyOpenGLWidget(this);setCentralWidget(glWidget);// 创建颜色选择按钮QPushButton *colorBtn = new QPushButton("选择颜色", this);colorBtn->setGeometry(10, 10, 100, 30);connect(colorBtn, &QPushButton::clicked, [=](){QColor color = QColorDialog::getColor(Qt::red, this, "选择三角形颜色");if (color.isValid()) {glWidget->setTriangleColor(color);}});
}
四、运行效果
- 窗口显示灰色背景的红色三角形
- 点击"选择颜色"按钮弹出颜色选择对话框
- 选择颜色后三角形实时更新颜色
关键实现原理
- 着色器控制颜色:通过
uniform
变量传递颜色值到片段着色器 - 颜色转换:将Qt的QColor转换为OpenGL的归一化颜色值(0.0-1.0)
- 实时更新:调用
update()
触发OpenGL重绘