16基本绘图

Posted 2020-11-19 gd-luojialin

Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。

QPainter用来执行绘制的操作；

QPaintDevice是一个二维空间的抽象，这个二维空间允许QPainter在其上面进行绘制，也就是QPainter工作的空间；

QPaintEngine提供了画笔（QPainter）在不同的设备上进行绘制的统一的接口。QPaintEngine类应用于QPainter和QPaintDevice之间，通常对开发人员是透明的。除非你需要自定义一个设备，否则你是不需要关心QPaintEngine这个类的。我们可以把QPainter理解成画笔；把QPaintDevice理解成使用画笔的地方，比如纸张、屏幕等；而对于纸张、屏幕而言，肯定要使用不同的画笔绘制，为了统一使用一种画笔，我们设计了QPaintEngine类，这个类让不同的纸张、屏幕都能使用一种画笔。

下图给出了这三个类之间的层次结构:

上面的示意图告诉我们，Qt 的绘图系统实际上是，使用QPainter在QPainterDevice上进行绘制，它们之间使用QPaintEngine进行通讯（也就是翻译QPainter的指令）。

 

 

下面我们通过一个实例来介绍QPainter的使用：

class PaintedWidget : public QWidget

{

    Q_OBJECT

public:

    PaintedWidget(QWidget *parent = 0);

protected:

    void paintEvent(QPaintEvent *);

}

注意我们重写了QWidget的paintEvent()函数。接下来就是PaintedWidget的源代码：

PaintedWidget::PaintedWidget(QWidget *parent) :

    QWidget(parent)

{  ui->setupUi(this);

this->resize(800,800);

this->setWindowTitle(tr("Paint Demo"));

}

 

void PaintedWidget::paintEvent(QPaintEvent *)

{

    QPainter painter(this);

    painter.drawLine(80, 100, 650, 500);

    painter.setPen(Qt::red);

    painter.drawRect(10, 10, 100, 400);

    painter.setPen(QPen(Qt::green, 5));

    painter.setBrush(Qt::blue);

    painter.drawEllipse(50, 150, 400, 200);

}

在构造函数中，我们仅仅设置了窗口的大小和标题。而paintEvent()函数则是绘制的代码。首先，我们在栈上创建了一个QPainter对象，也就是说，每次运行paintEvent()函数的时候，都会重建这个QPainter对象。

注意，这一点可能会引发某些细节问题：由于我们每次重建QPainter，因此第一次运行时所设置的画笔颜色、状态等，第二次再进入这个函数时就会全部丢失。有时候我们希望保存画笔状态，就必须自己保存数据，否则的话则需要将QPainter作为类的成员变量。

QPainter接收一个QPaintDevice指针作为参数。QPaintDevice有很多子类，比如QImage，以及QWidget。注意回忆一下，QPaintDevice可以理解成要在哪里去绘制，而现在我们希望画在这个组件，因此传入的是 this 指针。

QPainter有很多以 draw 开头的函数，用于各种图形的绘制，比如这里的drawLine()，drawRect()以及drawEllipse()等。当绘制轮廓线时，使用QPainter的pen()属性。比如，我们调用了painter.setPen(Qt::red)将 pen 设置为红色，则下面绘制的矩形具有红色的轮廓线。接下来，我们将 pen 修改为绿色，5 像素宽（painter.setPen(QPen(Qt::green, 5))），又设置了画刷为蓝色。这时候再调用 draw 函数，则是具有绿色 5 像素宽轮廓线、蓝色填充的椭圆。

QPainter, QPen, QBrush的关系

      Qpainter类似与一个画家，QPen就是画笔，Qbrush就是彩笔。

可以通过设计画笔的粗细、样式和颜色来画线条，同理可以改变彩笔的不同颜色来画进行描色。

 

画笔

   //设置画笔

    QPen pen;

    pen.setWidth(10);

    pen.setColor(QColor(125,156,22));

    pen.setStyle(Qt::DashLine);

最重要的操作，画笔设定好了，就要把画笔交给画家，去绘画。

QPainter p;

p.setPen(pen);

 

画刷

    QBrush b;

    //b.setColor(QColor(50,50,50));

    b.setColor(Qt::red);

    b.setStyle(Qt::SolidPattern);

交出画刷

p.setBrush(b);

 

 

 

绘图

画背景图

   // p.drawPixmap(0,0,width(),height(),QPixmap("../图片/1.jpg"));

p.drawPixmap(rect(),QPixmap("../图片/1.jpg"));

void QPainter::drawPixmap(int x, int y, int width, int height, const QPixmap & pixmap)

参数解析：

x,y图片左上角在窗口的位置。

Width,height载入图片的大小。width(),height()原尺寸。可以随窗口变化

Pixmap带色彩的图片。"../图片/1.jpg"，..代表与源文件是同一级目录。

 

画线

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

//两个端点的坐标的x,y

椭圆

p.drawEllipse(QPoint(120,120),80,50);

//圆心坐标，和两个半径。若两个半径相等就是画圆。

矩形

p.drawRect(50,200,250,120);

//左上角和右下角的x，y

 

窗口重绘

绘图操作一般都是绘图事件中完成。paintEvent(QPaintEvent *pe)。每次小小的改动后都要进行一个重绘。因此绘图事件中的操作不可以太频繁和太多，容易卡顿。

使用update()后，自动响应绘图事件。

//整个窗口重绘

void QWidget::update()

//指定区域重绘

void QWidget::update(int x, int y, int w, int h)

void QWidget::update(const QRect & rect)

 

 

例子:移动的图片，在窗口上贴图，通过点击按钮，图片不断移动。

 

p.drawPixmap(x,300,50,50,QPixmap("../图片/9.jpg"));

 

void Widget::on_pushButton_clicked()

{

 

    if(x>=0&&x<width())

    {

        x+=20;

    }

    else

    {

        x=0;

    }

    update();

}