界面编程之QT绘图和绘图设备20180728

/*******************************************************************************************/

一、绘图

整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类：

QPainter(画家)->QPaintEngine(中间引擎，画家与设备之间的交互(通信接口)，对于应用开发一般用不上)->QpaintDevice(设备，表示画在哪里)

画图的时候就是要重写事件：

protected:

    //重写绘图事件，虚函数

    //如果在窗口上(给窗口)绘图，必须放在绘图事件里实现

    //绘图事件内部自动调用，窗口需要重绘的时候（窗口状态改变的时候）自动调用

         //当然也可以人为的调用

    void paintEvent(QPaintEvent *);

        

void Widget::paintEvent(QPaintEvent *)

{

    //QPainter p(this);//这是一种方法，因为this是Widget也是一种绘图设备

         //另一种方法，begin

    QPainter p;//创建画家对象

    p.begin(this);//指定当前窗口为绘图设备，因为this是Widget也是一种绘图设备

        

    //绘图操作

    //p.drawxxx();

    //比如，画背景图(一般先画)：

    //p.drawPixmap(0, 0, width(), height(), QPixmap("../Image/bk.png"));          //绘图操作

         p.drawPixmap(rect(), QPixmap("../Image/bk.png"));

    //定义画笔，画笔确定画家画出什么样的效果

    QPen pen;

    pen.setWidth(5); //设置线宽大小，

    //pen.setColor(Qt::red); //设置颜色

    pen.setColor( QColor(14, 9, 234) );//rgb设置颜色

    pen.setStyle(Qt::DashLine); //设置风格

    //把画笔交给画家，这样画家才有画笔，才生效

    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, 100, 50);

    //画圆形，后两个分别是水平半径和垂直半径，当相等的时候为圆形

    p.drawEllipse(QPoint(150, 150), 50, 25);

    //画笑脸

    p.drawPixmap(x, 180, 80, 80, QPixmap("../Image/face.png"));

        

         //另一种方法，end

    p.end();   

/*******************************************************************************************/

二、手动更新窗口

调用update()函数：

void Widget::on_pushButton_clicked()

{

    x += 20;

    if(x > width())

    {

        x = 0;

    }

    //刷新窗口，让窗口重绘，没有参数所以整个窗口都刷新(重绘)，如果有填入指定区域的参数，则只刷新区域部分

    update(); //相当于间接调用paintEvent()

}

上述代码具体见《PaintEvent》

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

protected:
    //重写绘图事件，虚函数
    //如果在窗口绘图，必须放在绘图事件里实现
    //绘图事件内部自动调用，窗口需要重绘的时候（状态改变）
    void paintEvent(QPaintEvent *);

private slots:
    void on_pushButton_clicked();

private:
    Ui::Widget *ui;
    int x;
};

#endif // WIDGET_H

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QPen>
#include <QBrush>

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

    x = 0;
}

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

void Widget::paintEvent(QPaintEvent *)
{
    //QPainter p(this);

    QPainter p;//创建画家对象
    p.begin(this);//指定当前窗口为绘图设备

    //绘图操作
    //p.drawxxx();
    //画背景图
    //p.drawPixmap(0, 0, width(), height(), QPixmap("../Image/bk.png"));
    p.drawPixmap(rect(), QPixmap("../Image/bk.png"));

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

    //把画笔交给画家
    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, 100, 50);

    //画圆形
    p.drawEllipse(QPoint(150, 150), 50, 25);

    //画笑脸
    p.drawPixmap(x, 180, 80, 80, QPixmap("../Image/face.png"));

    p.end();
}

void Widget::on_pushButton_clicked()
{
    x += 20;
    if(x > width())
    {
        x = 0;
    }

    //刷新窗口，让窗口重绘，整个窗口都刷新
    update(); //间接调用paintEvent()
}

/*******************************************************************************************/

三、QBitMap和QPixmap的区别

QBitMap是QPixmap的子类

QBitMap是黑白的图片

QPixmap是彩色的图片

#include "widget.h"

#include "ui_widget.h"

#include <QPainter>

#include <QBitmap>

Widget::Widget(QWidget *parent) :

    QWidget(parent),

    ui(new Ui::Widget)

{

    ui->setupUi(this);

}

Widget::~Widget()

{

    delete ui;

}

void Widget::paintEvent(QPaintEvent *)

{

    QPainter p(this);

    //QPixmap 图片背景透明

    p.drawPixmap(0, 0, QPixmap("../Image/butterfly.png"));

    //QBitmap 图片背景透明 透明的部分变为黑色了

    p.drawPixmap(200, 0, QBitmap("../Image/butterfly.png"));

     //QPixmap 图片背景白色

    QPixmap pixmap;

    pixmap.load("../Image/butterfly1.png");

    p.drawPixmap(0, 200, pixmap);

    //QBitmap 图片背景白色，白色变为透明了

    QBitmap bitmap;

    bitmap.load("../Image/butterfly1.png");

    p.drawPixmap(200, 200, bitmap);

}

/*******************************************************************************************/

四、绘图设备

绘图设备主要有三种：

I、QPixmap               //最常用，针对屏幕进行优化了，和平台(显卡)相关，不可以对图片进行修改 //QBitMap是QPixmap的子类 QBitMap是黑白的图片

II、QImage               //没有优化，和平台无关，有自己的一套系统。可以对图片进行修改(像素点的修改)，可以在线程中绘图即可以在单独开的线程中使用

III、QPicture   //平台无关的，保存绘图的状态(保存为一个二进制文件)，可以给另外的程序(平台)使用导致另外的绘的一样。

都可以在窗口上面绘图

1.QPixmap绘图设备

    //绘图设备， 400*300

    QPixmap pixmap(400, 300);

    QPainter p(&pixmap);

    //填充白色背景色

    //p.fillRect(0, 0, 400, 300, QBrush(Qt::white));

    pixmap.fill(Qt::white);

    p.drawPixmap(0, 0, 80, 80, QPixmap("../Image/face.png"));

    //把绘图设备中的图片(绘画结果)保存出来，保存图片

    pixmap.save("../pixmap.jpg");

2.QImage绘图设备

         //创建一个绘图设备，QImage::Format_ARGB32背景是透明

    QImage image(400, 300, QImage::Format_ARGB32);

    QPainter p;

    p.begin(&image);

    //绘图

    p.drawImage(0, 0, QImage("../Image/face.png"));

    //对绘图设备前50个像素点进行操作

    for(int i = 0; i < 50; i++)

    {

        for(int j = 0; j < 50; j++)

        {

            image.setPixel(QPoint(i, j), qRgb(0, 255, 0));

            //image.pixel(QPoint(i, j));

        }

    }

    p.end();

    image.save("../image.png");

3.QPicture绘图设备

Widget::Widget(QWidget *parent) :

    QWidget(parent),

    ui(new Ui::Widget)

{

    ui->setupUi(this);

    QPicture picture;

    QPainter p;

    p.begin(&picture);

    p.drawPixmap(0, 0, 80, 80, QPixmap("../Image/face.png"));

    p.drawLine(50, 50, 150, 50);

    p.end();

    //保存的是二进制文件

    picture.save("../picture.png");//把绘图状态（绘图操作）保存为二进制文件

}

void Widget::paintEvent(QPaintEvent *)

{

    QPicture pic;

         //加载文件

    pic.load("../picture.png"); //加载之前绘图的操作，用于生成图片

    QPainter p(this);

    p.drawPicture(0, 0, pic);

}

4.QImage和QPixmap相互转换

QPixmap使用底层平台的绘制系统进行绘制，无法提供像素级别的操作，而QImage则是使用独立于硬件的绘制系统，实际上是自己绘制自己，

因此提供了像素级别的操作，并且能够在不同系统之上提供一个一致的显示形式。

比如网络传输的是QImage(因为和和平台无关)，但是画的时候需要有优化的QPixmap，这时就需要吧接收到的

QImage转换为QPixmap

void Widget::paintEvent(QPaintEvent *)

{

    QPainter p(this);

    QPixmap pixmap;

    pixmap.load("../Image/face.png");

    //QPixmap -> QImage

    QImage tempImage = pixmap.toImage();

    p.drawImage(0, 0, tempImage);

    QImage image;

    image.load("../Image/face.png");

    //QImage -> QPixmap

    QPixmap tempPixmap = QPixmap::fromImage(image);

    p.drawPixmap(100, 0, tempPixmap);

}

/*******************************************************************************************/

五、不规则窗口

常见的窗体是各种方形的对话框,但有时候也需要非方形的窗体,如圆形,椭圆甚至是不规则形状的对话框。

实现步骤：

1.新建一个项目，比如项目名称叫做“ShapeWidget”，给此项目添加一个类“ShapeWidget”，基类选择“QWidget”。

2.为了使该不规则窗体可以通过鼠标随意拖拽，在类中重定义鼠标事件：mousePressEvent（）、mouseMoveEvent（）、以及绘制函数paintEvent（）

3.“ShapeWidget”的构造函数部分是实现该不规则窗体的关键，添加具体代码如下:

Widget::Widget(QWidget *parent) :

    QWidget(parent),

    ui(new Ui::Widget)

{

    ui->setupUi(this);

    //去窗口边框

    setWindowFlags(Qt::FramelessWindowHint | windowFlags());

    //把窗口背景设置为透明，通过透明已经将窗口设置为图片的样式了，窗口和透明图片一样，当然就是不规则窗口了

    setAttribute(Qt::WA_TranslucentBackground);

         //注意，此时无法移动鼠标以及无法关闭整个特殊的窗口，所以需要重写这些事件

         //注意，移动窗口是行对于屏幕而言的，所以鼠标的坐标获取是相对于窗口左上角而言的差值，移动也是移动到左上角。(移动的时候是以窗口的左上角移动的)

}

4.重新实现鼠标事件和绘制函数

void Widget::mousePressEvent(QMouseEvent *e)

{

    if(e->button() == Qt::RightButton)

    {

        //如果是右键，关闭窗口

        close();

    }

    else if(e->button() == Qt::LeftButton)

    {

        //求坐标差值

        //坐标差值=当前点击坐标-窗口左上角坐标 //之所以不用表示相对于窗口的坐标e->x/y,是因为这个e->x/y是相对于窗口的内边框，而移动的是外边框

        p = e->globalPos() - this->frameGeometry().topLeft();//this->frameGeometry()获取的是当前矩形窗口

                   //e->globalPos()，当前坐标 全局的，即相对于屏幕左上角的坐标。.topLeft()矩形窗口的左上角坐标

    }

}

void Widget::mouseMoveEvent(QMouseEvent *e)

{

    if(e->buttons() & Qt::LeftButton)

    {

            //把当前窗口中心点移动到左上角，即以当前的左上角作为移动后窗口的中心位置

       move(e->globalPos() - p);//当前坐标(全局的)减去差值等于左上角坐标(全局的)

            //参数里是移动到的位置

    }

}

void Widget::paintEvent(QPaintEvent *)

{

    QPainter p(this);

    p.drawPixmap(0, 0, QPixmap("../Image/sunny.png"));

}