17.Qt使用QPainter绘图

Qt使用QPainter绘图

QPainter类可以绘制很多东西，如文字、线、矩形、圆、椭圆、扇形等。

1.绘制图形会调用paintEvent事件

protected:
    void paintEvent(QPaintEvent *event) override;

2.绘制一个文字

函数原型

void 
drawText(const QPointF &position, const QString &text)
void 
drawText(const QPoint &position, const QString &text)
void 
drawText(int x, int y, const QString &text)
void 
drawText(const QRectF &rectangle, int flags, const QString &text, QRectF *boundingRect = nullptr)
void 
drawText(const QRect &rectangle, int flags, const QString &text, QRect *boundingRect = nullptr)
void 
drawText(int x, int y, int width, int height, int flags, const QString &text, QRect *boundingRect = nullptr)
void 
drawText(const QRectF &rectangle, const QString &text, const QTextOption &option = QTextOption())

实现：

• QPainter：使能画家
• painter.setPen：设置画笔
• painter.setFont：设置文字的样式，如颜色字体
• painter.drawText：绘制文字
• rect()：以串口的长、宽的一半作为绘制的起点，不设置默认在串口的左上角为(0,0)
• Qt::AlignCenter：文字居中显示

 void SimpleExampleWidget::paintEvent(QPaintEvent *)
 {
     QPainter painter(this);
     painter.setPen(Qt::blue);
     painter.setFont(QFont("Arial", 30));
     painter.drawText(rect(), Qt::AlignCenter, "Qt");
 }

3、绘制一条线

所谓的线，就是两个点连起来为一条线，所以需要用到两个点

函数原型

void 
drawLine(const QLineF &line)
void 
drawLine(const QLine &line)
void 
drawLine(int x1, int y1, int x2, int y2)
void 
drawLine(const QPoint &p1, const QPoint &p2)
void 
drawLine(const QPointF &p1, const QPointF &p2)

实现：

• pointA：A点的坐标
• pointB：B点的坐标
• painter.drawLine(pointA,pointB);：绘制A点到B点的线

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setPen(Qt::blue);
    QPoint pointA(200,100);
    QPoint pointB(400,200);
    painter.drawLine(pointA,pointB);
}

4、绘制矩形

绘制矩形，需要知道一个点的坐标，还有长跟宽

函数原型：

void 
drawRect(const QRectF &rectangle)
void 
drawRect(int x, int y, int width, int height)
void 
drawRect(const QRect &rectangle)

实现：

• painter.setPen(Qt::blue);：是一个画笔，只画边框
• painter.setBrush(Qt::red);：是一个画刷，可以涂背景颜色

void Widget::paintEvent(QPaintEvent *event)
{
	QPainter painter(this);
    painter.setPen(Qt::blue);
    painter.setBrush(Qt::red);
    //第一种：一个点坐标，左上角的坐标
    painter.drawRect(100,0,100,200);

    //第二种：QRect
    QRect rect(400,100,100,200);
    painter.drawRect(rect);
}

5、画圆、椭圆

画圆跟椭圆是一样的，椭圆就是一个半径不相等的圆。需要知道圆心跟半径就可以绘制一个圆出来

函数原型：

void 
drawEllipse(const QRectF &rectangle)//在矩形里面画圆带小数
void 
drawEllipse(const QRect &rectangle)//在矩形里面画圆不带小数
void 
drawEllipse(int x, int y, int width, int height)//根据坐标确定
void 
drawEllipse(const QPointF &center, qreal rx, qreal ry)//根据一个点确定
void 
drawEllipse(const QPoint &center, int rx, int ry)

实现：

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setPen(Qt::blue);
    //在点100,100上画半径是50的圆
    painter.drawEllipse(QRect(100,100,50,50));
    painter.drawEllipse(200,100,50,50);
    painter.drawEllipse(QPoint(400,100),50,50);
}

6、画扇形

函数原型：

void 
drawPie(int x, int y, int width, int height, int startAngle, int spanAngle)
void 
drawPie(const QRect &rectangle, int startAngle, int spanAngle)

实现：

• 扇形的弧度需要16,90*16表示是90度，正数角度从逆时针画，负数角度表示顺时针画

void Widget::paintEvent(QPaintEvent *event)
{

    QPainter painter(this);
    painter.setPen(Qt::blue);
    //逆时针画90°
    painter.drawPie(QRect(100,100,100,100),0*16,90*16);
    //顺时针画90°
    painter.drawPie(QRect(100,100,100,100),0*16,-90*16);
}

7、画不规则图形

将所有的点连起来，组成一个不规则图形。

函数原型：

void 
drawPolygon(const QPointF *points, int pointCount, Qt::FillRule fillRule = Qt::OddEvenFill)
void 
drawPolygon(const QPolygonF &points, Qt::FillRule fillRule = Qt::OddEvenFill)
void 
drawPolygon(const QPoint *points, int pointCount, Qt::FillRule fillRule = Qt::OddEvenFill)
void 
drawPolygon(const QPolygon &points, Qt::FillRule fillRule = Qt::OddEvenFill)

实现：

• static const QPointF points[4]：此数组的大小表示点的多少

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    static const QPointF points[4] = {
            QPointF(100,90),
            QPointF(200.0, 100),
            QPointF(200.0, 100),
            QPointF(100, 15.0)
        };
        painter.setBrush(Qt::black);
        painter.setPen(Qt::NoPen);
        painter.drawPolygon(points, 4);
}

8、渐变色

使用QBrush类进行不同颜色的设置，放入QPainter中，绘制出来。

线性渐变QLinearGradient：

 void Widget::paintEvent(QPaintEvent *event)
{
 		QPainter painter(this);
        QLinearGradient lineGradient(0,0,width(),height());
        lineGradient.setColorAt(0.1,QColor(Qt::black));
        lineGradient.setColorAt(0.3,QColor(Qt::red));
        lineGradient.setColorAt(0.5,QColor(Qt::green));
        lineGradient.setColorAt(1,QColor(Qt::white));
        QBrush brush(lineGradient);
        painter.setBrush(brush);
        painter.drawRect(rect());
}

圆心渐变QRadialGradient：

void Widget::paintEvent(QPaintEvent *event)
{
  QPainter painter(this);
            QRadialGradient radialGradient(400,400,200);
            radialGradient.setColorAt(0.1,Qt::white);
            radialGradient.setColorAt(1,Qt::black);
            painter.setBrush(QBrush(radialGradient));
            painter.drawRect(200,300,400,200);
}

扇形渐变QConicalGradient：

void Widget::paintEvent(QPaintEvent *event)
{
	QPainter painter(this);
    QConicalGradient conicalGradient(400,400,0);
    conicalGradient.setColorAt(0.0,Qt::red);
    conicalGradient.setColorAt(0.5,Qt::blue);
    conicalGradient.setColorAt(1.0,Qt::red);
    painter.setPen(Qt::NoPen);
    painter.setBrush(QBrush(conicalGradient));
    painter.drawRect(200,300,400,200);
}