【嵌入式——QT】QPainter基本绘图

QPainter与QPaintDevice

QPainter是用来进行绘图操作的类，QPaintDevice是一个可以使用QPainter进行绘图的抽象的二维界面，QPaintEngine给QPainter提供在不同设备上绘图的接口，QPaintEngine类由QPainter和QPaintDevice内部使用，应用程序一般无需和QPaintEngine打交道，除非要创建自己的设备类型。

paintEvent事件和绘图区

QWidget类及其子类是最常用的绘图设备，从QWidget类继承的类都有paintEvent事件，要在设备上绘图，只需重定义此事件并编写相应代码。

QPainter主要属性

• pen属性：是一个QPen对象，用于控制线条的颜色、宽度、线型等；
• brush属性：是一个QBrush对象，用于设置一个区域的填充特性，可以设置填充颜色、填充方式、渐变特性；
• font属性：是一个QFont对象，用于绘制文字时，设置文字的字体样式、大小等属性；

QPen主要功能

• setColor(const QColor &color)：设置画笔颜色，即线条颜色；
• setWidth(int width)：设置线条宽度；
• setStyle(Qt::PenStyle style)：设置线条样式；
• setCapStyle(Qt::PenCapStyle style)：设置线条端点样式；
• setJoinStyle(Qt::PenJoinStyle style)：设置连接方式；

QBrush主要功能

• setColor(const QColor &color)：设置画刷颜色；
• setStyle(Qt::BrushStyle style)：设置画刷样式；
• setTexture(const QPixmap &pixmap)：设置一个QPixmap类型的图片作为画刷的图片；
• setTextureImage(const QImage &image)：设置一个QImage类型的图片作为画刷的图片；

QPainter绘制基本图形方法

• drawArc()：画弧线；
• drawChord()：画一段弦；
• drawConvexPolygon()：画凸多边形；
• drawEllipse：画椭圆；
• drawImage()：绘制图片；
• drawLine(const QLineF &line)：画直线；
• drawLines(const QLineF *lines, int lineCount)：画一批直线；
• drawPath(const QPainterPath &path)：绘制由QPainterPath对象定义的路线；
• drawPie(const QRectF &rectangle, int startAngle, int spanAngle)：绘制扇形；
• drawPixmap(int x, int y, const QPixmap &pixmap)：绘制QPixmap类型图片；
• drawPoint(int x, int y)：绘制一个点；
• drawPoints：绘制一批点；
• drawPolygon：绘制多边形，最后一个点和第一个点闭合；
• drawPolyline：绘制多点连接的线，最后一个点不会和第一个点连接；
• drawRect(int x, int y, int width, int height)：画矩形；
• drawRoundedRect：绘制圆角矩形；
• drawText(int x, int y, const QString &text)：绘制文本，只能绘制单行文字；
• fillRect(int x, int y, int width, int height, const QBrush &brush)：填充一个矩形，无边框线；
• eraseRect：擦除某个矩形区域；
• fillPath：填充某个QPainterPath定义的绘图路径 但是轮廓线不显示；
• fillRect：填充一个矩形，无边框线；

图示

随便截了两张图片，代码中均有实现，不一一列举图片了。

代码示例

QPainterForm.h

#ifndef QPAINTERFORM_H
#define QPAINTERFORM_H

#include <QWidget>

namespace Ui
{
    class QPainterForm;
}

class QPainterForm : public QWidget
{
    Q_OBJECT

public:
    explicit QPainterForm(QWidget* parent = nullptr);
    ~QPainterForm();

    void paintEvent(QPaintEvent* event) Q_DECL_OVERRIDE;


    void drawArcDemo();
    void drawChordDemo();
    void drawConvexPolygonDemo();
    void drawEllipseDemo();
    void drawImageDemo();
    void drawLineDemo();
    void drawLinesDemo();
    void drawPathDemo();
    void drawPieDemo();
    void drawPixmapDemo();
    void drawPointDemo();
    void drawPointsDemo();
    void drawPolygonDemo();
    void drawPolylineDemo();
    void drawRectDemo();
    void drawRoundedRectDemo();
    void dratTextDemo();
    void eraseRectDemo();
    void fillPathDemo();
    void fillRectDemo();

    void fivePointedStar();

    void viewPortAndWindow();




private:
    Ui::QPainterForm* ui;
};

#endif // QPAINTERFORM_H

QPainterForm.cpp

#include "QPainterForm.h"
#include "ui_QPainterForm.h"
#include <QPainter>
QPainterForm::QPainterForm(QWidget* parent)
    : QWidget(parent)
    , ui(new Ui::QPainterForm)
{
    ui->setupUi(this);
    //设置窗口背景为白色
    setPalette(QPalette(Qt::white));
    setAutoFillBackground(true);
}

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

void QPainterForm::paintEvent(QPaintEvent* event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);
    //宽
    int w = this->width();
    //高
    int h = this->height();
    #if 0
    //中间区域矩形块
    QRect rect(w/4, h/4, w/2, h/2);
    //画笔
    QPen pen;
    pen.setWidth(3);//线宽
    pen.setColor(Qt::red);//线条红色
    pen.setStyle(Qt::DashLine);//线的样式，实线、虚线
    pen.setCapStyle(Qt::FlatCap);//线的断点样式
    pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
    painter.setPen(pen);
    //画刷
    QBrush brush;
    brush.setColor(Qt::yellow);//画刷颜色
    //Qt::BrushStyle
    brush.setStyle(Qt::CrossPattern);//画刷填充样式
    painter.setBrush(brush);
    //绘图
    painter.drawRect(rect);
    #endif
    #if 0
    QPainter painter2(this);
    /**
    QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);
    cx xy 辐射填充的中心点，radius 是辐射填充区的半径，fx fy是焦点坐标
    **/
    QRadialGradient radialGrad(w/2, h/2, qMax(w/8, h/8), w/2, h/2);
    //0表示起点
    radialGrad.setColorAt(0, Qt::green);
    //1表示终点
    radialGrad.setColorAt(1, Qt::blue);
    radialGrad.setSpread(QGradient::ReflectSpread);
    painter2.setBrush(radialGrad);
    painter2.drawRect(this->rect());
    #endif
    // drawArcDemo();
    // drawChordDemo();
    // drawConvexPolygonDemo();
    // drawEllipseDemo();
    // drawImageDemo();
    // drawLineDemo();
    // drawLinesDemo();
    // drawPathDemo();
    // drawPieDemo();
    // drawPixmapDemo();
    // drawPointDemo();
    // drawPointsDemo();
    // drawPolygonDemo();
    // drawPolylineDemo();
    // drawRectDemo();
    // drawRoundedRectDemo();
    // dratTextDemo();
    // eraseRectDemo();
    // fillPathDemo();
    // fillRectDemo();
    // fivePointedStar();
    viewPortAndWindow();
}

void QPainterForm::drawArcDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    int startAngle = 90 * 16;
    int spanAngle = 90*16;
    QPainter painter(this);
    //画弧线
    painter.drawArc(rect, startAngle, spanAngle);
}

void QPainterForm::drawChordDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    int startAngle = 90 * 16;
    int spanAngle = 90*16;
    QPainter painter(this);
    //画一段弦
    painter.drawChord(rect, startAngle, spanAngle);
}

void QPainterForm::drawConvexPolygonDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QPoint points[4] = {QPoint(5*w/12, h/4), QPoint(3*w/4, 5*h/12), QPoint(5*w/12, 3*h/4), QPoint(w/4, 5*h/12)};
    QPainter painter(this);
    //根据给定的点画凸多边形
    painter.drawConvexPolygon(points, 4);
}

void QPainterForm::drawEllipseDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainter painter(this);
    //画椭圆
    painter.drawEllipse(rect);
}

void QPainterForm::drawImageDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QImage image("图片地址");
    QPainter painter(this);
    //在指定区域内绘制图片
    painter.drawImage(rect, image);
}

void QPainterForm::drawLineDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QLine line(w/4, h/4, w/2, h/2);
    QPainter painter(this);
    //画直线
    painter.drawLine(line);
}

void QPainterForm::drawLinesDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QVector<QLine> lines;
    lines.append(QLine(rect.topLeft(), rect.bottomRight()));
    lines.append(QLine(rect.topRight(), rect.bottomLeft()));
    lines.append(QLine(rect.topLeft(), rect.bottomLeft()));
    lines.append(QLine(rect.topRight(), rect.bottomRight()));
    QPainter painter(this);
    //画一批直线
    painter.drawLines(lines);
}

void QPainterForm::drawPathDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainterPath path;
    path.addEllipse(rect);
    path.addRect(rect);
    QPainter painter(this);
    //绘制由QPainterPath定义的路线
    painter.drawPath(path);
}

void QPainterForm::drawPieDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    int startAngle = 40*16;
    int spanAngle = 120*16;
    QPainter painter(this);
    //绘制扇形
    painter.drawPie(rect, startAngle, spanAngle);
}

void QPainterForm::drawPixmapDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPixmap pixmap("图片地址");
    QPainter painter(this);
    //绘制QPixmap类型的图片
    painter.drawPixmap(rect, pixmap);
}

void QPainterForm::drawPointDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QPainter painter(this);
    //绘制一个点
    painter.drawPoint(QPoint(w/2, h/2));
}

void QPainterForm::drawPointsDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QPoint points[] = {QPoint(5*w/12, h/4), QPoint(3*w/4, 5*h/12), QPoint(2*w/4, 5*h/12)};
    QPainter painter(this);
    //绘制一批点
    painter.drawPoints(points, 3);
}

void QPainterForm::drawPolygonDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QPoint points[] = {QPoint(5*w/12, h/4), QPoint(3*w/4, 5*h/12), QPoint(5*w/12, 3*h/4), QPoint(2*w/4, 5*h/12)};
    QPainter painter(this);
    //绘制多边形，最后一个点和第一个点闭合
    painter.drawPolygon(points, 4);
}

void QPainterForm::drawPolylineDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QPoint points[] = {QPoint(5*w/12, h/4), QPoint(3*w/4, 5*h/12), QPoint(5*w/12, 3*h/4), QPoint(2*w/4, 5*h/12)};
    QPainter painter(this);
    //绘制多点连接的线，最后一个点不会和第一个点连接
    painter.drawPolyline(points, 4);
}

void QPainterForm::drawRectDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainter painter(this);
    //绘制矩形
    painter.drawRect(rect);
}

void QPainterForm::drawRoundedRectDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainter painter(this);
    //绘制圆角矩形
    painter.drawRoundedRect(rect, 20, 20);
}

void QPainterForm::dratTextDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QFont font;
    font.setPointSize(30);
    font.setBold(true);
    QPainter painter(this);
    painter.setFont(font);
    //绘制文本
    painter.drawText(rect, "Hello Qt");
}

void QPainterForm::eraseRectDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainter painter(this);
    //擦除某个矩形区域
    painter.eraseRect(rect);
}

void QPainterForm::fillPathDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainterPath path;
    path.addEllipse(rect);
    path.addRect(rect);
    QPainter painter(this);
    //填充某个QPainterPath定义的绘图路径 但是轮廓线不显示
    painter.fillPath(path, Qt::red);
}

void QPainterForm::fillRectDemo()
{
    //宽
    int w = this->width();
    //高
    int h = this->height();
    QRect rect(w/4, h/4, w/2, h/2);
    QPainter painter(this);
    //填充一个矩形，无边框线
    painter.fillRect(rect, Qt::green);
}
//坐标变换 五角星
void QPainterForm::fivePointedStar()
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);
    qreal r = 100;
    const qreal pi = 3.14159;
    qreal deg = pi*72/180;
    QPoint points[5]= {
        QPoint(r, 0),
        QPoint(r*std::cos(deg), -r*std::sin(deg)),
        QPoint(r*std::cos(2*deg), -r*std::sin(2*deg)),
        QPoint(r*std::cos(3*deg), -r*std::sin(3*deg)),
        QPoint(r*std::cos(4*deg), -r*std::sin(4*deg))
    };
    //设置字体
    QFont font;
    font.setPointSize(12);
    font.setBold(true);
    painter.setFont(font);
    //设置画笔
    QPen penLine;
    penLine.setWidth(2);//线宽
    penLine.setColor(Qt::blue); //线颜色
    penLine.setStyle(Qt::SolidLine); //线的类型
    penLine.setCapStyle(Qt::FlatCap);//线端点样式
    penLine.setJoinStyle(Qt::BevelJoin);//线连接点样式
    painter.setPen(penLine);
    //设置画刷
    QBrush brush;
    brush.setColor(Qt::yellow);
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);
    QPainterPath starPath;
    starPath.moveTo(points[0]);
    starPath.lineTo(points[2]);
    starPath.lineTo(points[4]);
    starPath.lineTo(points[1]);
    starPath.lineTo(points[3]);
    starPath.closeSubpath();//闭合路径，最后一个点与第一个点相连
    starPath.addText(points[0], font, "0");
    starPath.addText(points[1], font, "1");
    starPath.addText(points[2], font, "2");
    starPath.addText(points[3], font, "3");
    starPath.addText(points[4], font, "4");
    //绘图
    painter.save();//保存坐标状态
    painter.translate(100, 120); //平移
    painter.drawPath(starPath);//画星星
    painter.drawText(0, 0, "S1");
    painter.restore();//恢复坐标状态
    painter.translate(300, 120); //平移
    painter.scale(0.8, 0.8); //缩放
    painter.rotate(90);//顺时针旋转90度
    painter.drawPath(starPath);
    painter.drawText(0, 0, "S2");
    painter.resetTransform();//复位所有坐标变换
    painter.translate(500, 120); //平移
    painter.rotate(-145);//逆时针旋转145度
    painter.drawPath(starPath);
    painter.drawText(0, 0, "S3");
}

//视口 窗口
void QPainterForm::viewPortAndWindow()
{
    QPainter painter(this);
    //宽
    int w = this->width();
    //高
    int h = this->height();
    int side =qMin(w, h);
    QRect rect((w-side)/2, (h-side)/2, side, side);
    painter.drawRect(rect);
    painter.setViewport(rect);//设置viewport 图案就在这个矩形框之内
    painter.setWindow(-100, -100, 200, 200);
    painter.setRenderHint(QPainter::Antialiasing);
    QPen pen;
    pen.setWidth(1);
    pen.setColor(Qt::red);
    pen.setStyle(Qt::SolidLine);
    painter.setPen(pen);
    for(int i=0; i<36; i++) {
        //画椭圆
        painter.drawEllipse(QPoint(50, 0), 50, 50);
        //顺时针旋转10度
        painter.rotate(10);
    }
}