Qt5基础 背景图，绘图，点击事件

Qt5基础系列

Qt基础的学习笔记。此文章为在B站上学习黑马程序员Qt教程的绘图部分做的记录，加深理解，方便回看。

一、简介

主要介绍了画背景图，绘图，点击事件，对于整个绘图系统的介绍可以移步Qt5基础 QPixmap和QBitmap的区别

---

二、绘图

1、头文件

protected:
    //重写绘图事件
    //如果给窗口绘图，一定要在paintEvent()实现
    //绘图事件内部自动调用
    void paintEvent(QPaintEvent *);
    //点击鼠标触发事件
private slots:
    void on_pushButton_clicked();

2、引入api

#include "widget.h"//新建的项目接口
#include "ui_widget.h"//ui界面接口
#include <QPainter>//画家
#include <QPen>//画笔
#include <QBrush>//画刷

3、相关参数定义

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    x = 0;
}

Widget::~Widget()
{
    delete ui;
}

4、图片前进按钮转到槽

5、主程序

void Widget::paintEvent(QPaintEvent *){

    //QPainter p(this);
    QPainter p;//创建画家对象
    p.begin(this);//指定当前窗口为绘图设备
    //绘图操作
    //p.drawxxx();
    //画背景图
    //p.drawPixmap(0,0,width(),height(),QPixmap("../image/7.jpg"));
    p.drawPixmap(rect(),QPixmap("../image/7.jpg"));

    //定义画笔
    QPen pen;
    pen.setWidth(5);//设置线宽
    //pen.setColor(Qt::red);//设置线条颜色
    pen.setColor( QColor(14,9,234));
    pen.setStyle(Qt::DashDotLine);//设置线条风格

    //把画笔交给画家
    p.setPen(pen);

    //画直线
    p.drawLine(50,50,150,50);
    p.drawLine(50,50,50,150);

    //创建画刷对象
    QBrush brush;
    brush.setColor(Qt::red);
    brush.setStyle(Qt::Dense1Pattern);
    //把画刷交给画家
    p.setBrush(brush);

    //画矩形
    p.drawRect(150,150,50,50);

    //画圆形
    p.drawEllipse(QPoint(150,150),50,25);//qpointer圆心，50，25为x，y半径，得到的是一个椭圆

    //画图
    p.drawPixmap(x,200,80,80,QPixmap("../image/9.jpg"));


    p.end();
}
//一个按钮的点击事件，一张图片点击则向前走20像素
void Widget::on_pushButton_clicked(){
    x+=20;
    if(x>width()){//超出右边框，重置到做边框位置
        x=0;
    }
    //刷新窗口，让窗口重绘,整个窗口都刷新
    update();//间接调用paintEvent()
}

6、运行截图

7、结果分析

以我最爱的流川枫为素材~
蓝色线条，线宽为5，线条风格为Qt::DashDotLine，颜色RGB（14,9,234）；椭圆是以150,150像素点为圆心，50,25为长短轴；矩形以150,150为起点，50为长宽；PushButton为事件触发按钮，点击可以触发图片前移20个像素点。

三、总结

绘图可能不是太常用（还不如ps做一张呢）；背景，图片，时间触发这些还是比较常用的。