Qt C++简单图形界面与绘图实验

一、实验目的和要求

1、掌握Qt中掌握绘图工具和图形界面设计；绘制常见的图形。

2、熟悉Qt界面设计中常用的控件。

3、了解滚动条、滑动条、进度条、旋转按钮控件的用法。

二、实验内容

1、设计一个绘图软件，完成图像的绘制操作。

2、建立按钮的信号与槽函数，实现点击按钮进行相应文件操作。

3、利用滚动条、滑动条、进度条、旋转按钮控件完成绘图相关操作。

三、实验步骤

1、新建工程，选择Qt Widgets Applocation选项，工程名称为draw_test，类名设置为MainWidget继承的父类为Qwidget。

3、双击打开mainwdget.ui文件，打开界面设计，分别使用鼠标拖放一个Push Button、一个QScrollBar控件、一个QSlider控件、一个QProgressBar控件、四个QRadioButton控件，并将QScrollBar控件名称修改为scrollBar，QSlider控件名称修改为slider，QProgressBar控件名称修改为progressBar， QRadioButton控件名称分别修改为rectButton、circleButton、lineButton、curveButton，按钮文本分别修改为“矩形、圆形、直线及直线”。Button控件名称修改为resetButton，按钮文本分别修改为“重置”。

4、鼠标选中resetButton两个按钮，右键菜单选择转到槽，选择clicked()信号；选中slider、progressBar、scrollBar三个控件，右键菜单选择转到槽，选择valueChanged 信号

mainwidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H#include <QWidget>
#include <QPainter>
#include <QColor>namespace Ui {
class MainWidget;
}class MainWidget : public QWidget
{Q_OBJECTpublic:explicit MainWidget(QWidget *parent = nullptr);~MainWidget();protected:void paintEvent(QPaintEvent *event) override; // 重绘事件private slots:void onShapeChanged(); // 形状改变槽函数void on_resetButton_clicked(); // 重置按钮槽函数void on_slider_valueChanged(int value); // 滑块值改变槽函数void on_progressBar_valueChanged(int value); // 进度条值改变槽函数void on_scrollBar_valueChanged(int value); // 滚动条值改变槽函数void on_colorButton_clicked(); // 颜色按钮槽函数private:void drawShape(QPainter &painter); // 绘制图形函数Ui::MainWidget *ui;int shapeType; // 当前图形类型 (0:矩形, 1:圆形, 2:直线, 3:曲线)int progressValue; // 进度条值int shapeSize; // 图形大小int scrollOffset; // 滚动偏移量QColor shapeColor; // 图形颜色
};#endif // MAINWIDGET_H

mainwidge.ccp

#include "mainwidget.h"
#include "ui_mainwidget.h"#include <QVBoxLayout>
#include <QGroupBox>
#include <QPushButton>
#include <QMessageBox>
#include <QColorDialog>
#include <QDebug>MainWidget::MainWidget(QWidget *parent): QWidget(parent), ui(new Ui::MainWidget), shapeType(0) // 默认绘制矩形, progressValue(0) // 进度条初始值, shapeSize(100) // 默认形状大小, scrollOffset(0) // 滚动偏移量初始化为0, shapeColor(Qt::black) // 默认颜色为黑色
{ui->setupUi(this);// 连接单选按钮的toggled信号到onShapeChanged槽connect(ui->rectButton, &QRadioButton::toggled, this, &MainWidget::onShapeChanged);connect(ui->circleButton, &QRadioButton::toggled, this, &MainWidget::onShapeChanged);connect(ui->lineButton, &QRadioButton::toggled, this, &MainWidget::onShapeChanged);connect(ui->curveButton, &QRadioButton::toggled, this, &MainWidget::onShapeChanged);// 设置默认选中的按钮ui->rectButton->setChecked(true);
}MainWidget::~MainWidget()
{delete ui;
}void MainWidget::onShapeChanged()
{// 根据选中的单选按钮更新图形类型if (ui->rectButton->isChecked()) {shapeType = 0; // 矩形} else if (ui->circleButton->isChecked()) {shapeType = 1; // 圆形} else if (ui->lineButton->isChecked()) {shapeType = 2; // 直线} else if (ui->curveButton->isChecked()) {shapeType = 3; // 曲线}update(); // 触发重绘事件
}void MainWidget::paintEvent(QPaintEvent *event)
{Q_UNUSED(event); // 避免未使用参数的警告QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing); // 设置抗锯齿// 设置画笔颜色painter.setPen(shapeColor);// 计算形状的起始位置int x = (width() - shapeSize) / 2;int y = (height() - shapeSize) / 2;// 平移坐标系到中心位置painter.translate(x, y);// 绘制选定的形状drawShape(painter);
}void MainWidget::drawShape(QPainter &painter)
{switch (shapeType) {case 0: // 绘制矩形painter.drawRect(0, 0, shapeSize, shapeSize);break;case 1: // 绘制圆形painter.drawEllipse(0, 0, shapeSize, shapeSize);break;case 2: // 绘制直线painter.drawLine(0, 0, shapeSize, shapeSize);break;case 3: // 绘制曲线painter.drawArc(0, 0, shapeSize, shapeSize, 0, 90 * 16); // 绘制90度弧线break;}
}void MainWidget::on_resetButton_clicked()
{// 重置所有控件到初始状态ui->slider->setValue(100); // 滑块重置为100ui->progressBar->setValue(0); // 进度条重置为0ui->scrollBar->setValue(0); // 滚动条重置为0shapeType = 0; // 重置为矩形shapeSize = 100; // 重置图形大小shapeColor = Qt::black; // 重置颜色为黑色ui->rectButton->setChecked(true); // 选中矩形按钮update(); // 刷新界面
}void MainWidget::on_slider_valueChanged(int value)
{shapeSize = value; // 更新图形大小update(); // 刷新界面
}void MainWidget::on_progressBar_valueChanged(int value)
{progressValue = value; // 更新进度条值ui->progressBar->setValue(progressValue); // 设置进度条值
}void MainWidget::on_scrollBar_valueChanged(int value)
{progressValue = value; // 更新进度条值ui->progressBar->setValue(progressValue); // 设置进度条值
}void MainWidget::on_colorButton_clicked()
{// 打开颜色对话框，让用户选择颜色QColor color = QColorDialog::getColor(shapeColor, this, "选择图形颜色");if (color.isValid()) { // 如果用户选择了有效颜色shapeColor = color; // 更新图形颜色update(); // 刷新界面}
}

运行结果

四、问题讨论

1、分析不同控件的作用、功能和用法。

2、分析Qt中绘图类的使用。

1、分析不同控件的作用、功能和用法。

1. QRadioButton（单选按钮）

作用：提供互斥选择，用于在多个选项中选择一个
功能：

• isChecked() 检查是否被选中
• setChecked(true/false) 设置选中状态
• toggled(bool) 信号在状态改变时触发

用法：

// 创建并连接信号

QRadioButton *rectBtn = new QRadioButton("矩形");

connect(rectBtn, &QRadioButton::toggled, this, &MainWidget::onShapeChanged);

// 判断选中状态

if(ui->rectButton->isChecked()){ /*...*/ }

QSlider（滑块）

作用：通过滑动选择数值范围
功能：

• setRange(min,max) 设置取值范围
• value() 获取当前值
• valueChanged(int) 信号在值变化时触发

用法：

// 初始化设置

ui->slider->setRange(10, 200);  // 大小范围10-200

ui->slider->setValue(100);      // 初始值

// 连接信号

connect(ui->slider, &QSlider::valueChanged, this, &MainWidget::on_slider_valueChanged);

QScrollBar（滚动条）

作用：提供数值滚动调节功能
功能：

• 与QSlider类似，但外观和交互方式不同
• 常用于内容区域滚动

用法：

ui->scrollBar->setRange(0, 100);

connect(ui->scrollBar, &QScrollBar::valueChanged,

        this, &MainWidget::on_scrollBar_valueChanged);

QProgressBar（进度条）

作用：显示操作进度
功能：

• setValue(int) 设置当前进度
• setRange(min,max) 设置范围
• 支持水平/垂直方向

用法：

ui->progressBar->setRange(0, 100);

ui->progressBar->setValue(50);  // 显示50%进度

QPushButton（普通按钮）

作用：触发操作命令
功能：

• clicked() 信号在点击时触发
• 可设置文本/图标

用法：

QPushButton *btn = new QPushButton("重置");

connect(btn, &QPushButton::clicked, this, &MainWidget::on_resetButton_clicked);

QColorDialog（颜色对话框）

作用：提供颜色选择功能
功能：

• getColor() 静态方法打开对话框
• 返回用户选择的QColor

用法：

QColor color = QColorDialog::getColor(Qt::black, this, "选择颜色");

if(color.isValid()){

    // 使用有效颜色

}

二、Qt中绘图类的使用分析

1. QPainter（核心绘图工具）

核心功能：

void MainWidget::paintEvent(QPaintEvent*){

    QPainter painter(this);  // 1. 创建Painter对象

   

    painter.setPen(Qt::red); // 2. 设置画笔（轮廓）

    painter.setBrush(Qt::blue); // 设置画刷（填充）

   

    painter.drawRect(10,10,100,50); // 3. 绘制图形

}

基本图形绘制

方法	功能	示例
drawRect()	矩形	painter.drawRect(0,0,w,h)
drawEllipse()	椭圆/圆	painter.drawEllipse(0,0,d,d)
drawLine()	直线	painter.drawLine(x1,y1,x2,y2)
drawArc()	圆弧	painter.drawArc(x,y,w,h,start,span)

 QPainter可以在多种设备上绘制：

• QPixmap：内存图像，适合屏幕显示

QPixmap pixmap(200,200);

QPainter painter(&pixmap);

• QImage：像素级操作，适合图像处理
• QWidget：直接在控件上绘制（如本实验）
• QPrinter：打印输出

4. 坐标系统

• 默认坐标系：左上角为原点(0,0)，x向右增加，y向下增加
• 视图-窗口转换：

painter.setWindow(-50,-50,100,100); // 定义逻辑坐标范围

painter.setViewport(0,0,width(),height()); // 映射到物理坐标