第九章：资源和图像

回顾：
第一章：Qt的概述
第二章：在Ubuntu编写第一个Qt程序
第三章：Qt的字符串和字符编码
第四章：Qt的信号和槽
第五章：Qt容器窗口（父窗口）
第六章：面向对象的Qt编程
第七章：Qt设计师使用（designer）
第八章：Qt创造器的使用（qtcreator）

资源和图像

1、资源编译器（rcc）

• 创建资源脚本

vim test.qrc

<RCC>
    <qresource prefix="/">
        <file>0.jpg</file>
    </qresource>
</RCC>

• 使用rcc转换为C++源文件

rcc test.qrc -o qrc_test.cpp

2、绘图事件:paintEvent

• 当程序开始运行或界面改变时绘图事件将会被触发，对应的事件处理函数paintEvent将被执行
• 调用repaint()/update()函数来触发绘图事件
  void QWidget::paintEvent(QPaintEvent* event)[virtual]
• 绘图事件函数是虚函数，如果需要在自定的窗口中绘制指定的图像，可以通过重写该函数，在其中使用“画家”来实现具体的图像绘制操作

class QWidget{
	paintEvent()[virtual]
};
class myClass:public QWidget{
	paintEvent()
}

3、画家QPainter

• Qt中的二维图像引擎，实现在绘图设备（QWidget）绘制各种图像
• 绘图函数
  void drawImage(QRect, QImage);
  QRect:要绘制图像所在的矩形区域
  QImage:要绘制图像，QImage image(":/0.jpg")

案例：图图秀

• 使用qtcreator 创建工程：ShowPics
• 类信息：ShowPicsDialog
• 双击.ui文件进入设计师
• 添加资源图片
  • 选择项目名称右击Add new->Qt->Qt Resource File
  • 指定资源文件名字：showPics
  • 下一步->完成，进入资源编辑界面
  • 拷贝资源图片到工程目录下，将images整个目录拷贝到当前工程目录下
  • 在资源编辑界面，先添加前缀“/new/prefix” 改成 “/”，再添加文件
    ShowPicsDialog.h

#ifndef SHOWPICSDIALOG_H
#define SHOWPICSDIALOG_H

#include <QDialog>
#include <QPainter>//


QT_BEGIN_NAMESPACE
namespace Ui { class ShowPicsDialog; }
QT_END_NAMESPACE

class ShowPicsDialog : public QDialog
{
    Q_OBJECT

public:
    ShowPicsDialog(QWidget *parent = nullptr);
    ~ShowPicsDialog();
protected:
    //
    void paintEvent(QPaintEvent *);
private slots:
    void on_m_btnPrec_clicked();
    void on_m_btnNext_clicked();

private:
    Ui::ShowPicsDialog *ui;
    int m_index;//
};
#endif // SHOWPICSDIALOG_H

ShowPicsDialog.cpp

#include "ShowPicsDialog.h"
#include "ui_ShowPicsDialog.h"

ShowPicsDialog::ShowPicsDialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::ShowPicsDialog)
{
    ui->setupUi(this);
    m_index = 1;
}

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

//
void ShowPicsDialog::paintEvent(QPaintEvent *)
{
    //1)创建画家对象，参数表示绘制设置（父窗口指针）
    QPainter painter(this);
    //2)获取绘制图像所在的矩形区域
    QRect rcImage = ui->frame->frameRect();
    //平移，让rcImage和painter使用相同坐标系
    rcImage.translate(ui->frame->pos());
    //3)准备要绘制的图片（QImage）
    //":"表示资源路径
    QImage image(":/images/" + QString::number(m_index)+".jpg");
    //4)使用画家将image画到rcImage矩形中
    painter.drawImage(rcImage, image);
}

//
void ShowPicsDialog::on_m_btnPrec_clicked()
{
    if(--m_index < 1){
        m_index = 5;
    }
    update();//触发绘图事件
}

//
void ShowPicsDialog::on_m_btnNext_clicked()
{
    if(++m_index > 5){
        m_index = 1;
    }
    update();//触发绘图事件
}