Qt绘图之画家QPainter

姆路

已于 2024-09-17 10:03:07 修改

阅读量557

点赞数 20

分类专栏： QT绘图文章标签： qt c++

于 2024-09-07 10:08:51 首次发布

本文链接：https://blog.csdn.net/sc_o_r_pio/article/details/141871538

版权

QT绘图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

QPainter在使用时需要使用构造函数，立马指定在哪个控件上进行绘制

[explicit] QPainter::QPainter(QPaintDevice *device)

画点

可以1次画1个点

//准备4个点
QPoint  points[4]{
  QPoint(10, 80),
  QPoint(20, 10),
  QPoint(80, 30),
  QPoint(90, 70) };

//一次画1个点
 painter.drawPoint(points[1]);

也可以一次性画多个点

            //准备4个点
            QPoint  points[4]{
                QPoint(10, 80),
                QPoint(20, 10),
                QPoint(80, 30),
                QPoint(90, 70) };

            //一次画多个点
            painter.drawPoints(points,4);

画线

两个点确定一条线

1次画1条

            //准备4个点
            QPoint  points[4]{
                QPoint(10, 80),
                QPoint(20, 10),
                QPoint(80, 30),
                QPoint(90, 70) };

            //画一条线
            painter.drawLine(points[0],points[2]);

1次画多条

            //准备4个点
            QPoint  points[4]{
                QPoint(10, 80),
                QPoint(20, 10),
                QPoint(80, 30),
                QPoint(90, 70) };

            //一次画多条线，直接使用初始化列表{}
            painter.drawLines({QLineF(points[0],points[1]),QLineF(points[2],points[3])});

画多线段（Polyline）

相关API

//带F为小数版本
// 参1：点的数组，参2：点的个数
void drawPolyline(const QPointF *points, int pointCount)
// 参数：多边形
void drawPolyline(const QPolygonF &points)

//整数版本
void drawPolyline(const QPoint *points, int pointCount)
void drawPolyline(const QPolygon &points)

             //准备4个点
            QPoint  points[4]{
                QPoint(10, 80),
                QPoint(20, 10),
                QPoint(80, 30),
                QPoint(90, 70) };

    painter.drawPolyline(points,4);
  //也可以这样
  //painter.drawPolyline(QPolygon({QPoint(100, 80),QPoint(110, 10),QPoint(220, 10)}));

画多边形（Polygon）

相关API

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);

            //准备4个点
            QPoint  points[4]{
                QPoint(10, 80),
                QPoint(20, 10),
                QPoint(80, 30),
                QPoint(90, 70) };

        painter.drawPolygon(points,4);
        //也可以这样
        painter.drawPolygon(QPolygon({QPoint(100, 80),QPoint(110, 10),QPoint(220, 10)}));

画矩形

相关API

//带 F 表示参数为浮点数，否则为整型数
void drawRect(const QRectF &rectangle)
void drawRect(const QRect &rectangle)

// 指定左上角的顶点，以及宽高
void drawRect(int x, int y, int width, int height)

 //在点（100，100）处画一个长为200，宽为100的矩形
painter.drawRect(100,100,200,100);

画圆角矩形

相关API

oid drawRoundedRect(const QRectF &rect,
                     qreal xRadius,
                     qreal yRadius,
                     Qt::SizeMode mode = Qt::AbsoluteSize)
void drawRoundedRect(const QRect &rect,
                     qreal xRadius,
                     qreal yRadius,
                     Qt::SizeMode mode = Qt::AbsoluteSize)

void drawRoundedRect(int x, int y, int w, int h,
                     qreal xRadius,
                     qreal yRadius,
                     Qt::SizeMode mode = Qt::AbsoluteSize)

xRadius：矩形顶边和底边两端的圆角值

yRadius：矩形左边和右边两端的圆角值

Qt::AbsoluteSize为枚举，取值：

Qt::AbsoluteSize

xRadius 和 yRadius 为圆角大小，比如为5，那么圆角就是以5px进行弯曲

Qt::RelativeSize

xRadius 和 yRadius 为圆角百分比，以所在边长度的百分比进行弯曲

QRect rect(QPoint(100,100),QSize(200,100));
//圆角的半径为10px
painter.drawRoundedRect(rect,10,10,Qt::AbsoluteSize);

QRect rect(QPoint(100,100),QSize(200,100));
//圆角的半径为所在边的25%
painter.drawRoundedRect(rect,25,25,Qt::RelativeSize);

画椭圆

有多个重载方法可以画椭圆

直接指定一个矩形，在这个矩形内部画内切椭圆

void drawEllipse(const QRectF &rectangle);
void drawEllipse(const QRect &rectangle);

通过左上角的顶点和宽高来指定一个矩形

void drawEllipse(int x, int y, int width, int height);

通过指定圆心和椭圆的X轴半径和Y轴半径

void drawEllipse(const QPointF &center, qreal rx, qreal ry);
void drawEllipse(const QPoint &center, int rx, int ry);

当指定的矩形为正方形，或者rx和ry相等时，画的就是一个圆

painter.drawText(10,10,"指定矩形：");
QRect rect(QPoint(10,20),QSize(100,50));
painter.drawEllipse(rect);

painter.drawText(10,130,"通过左上顶点和宽高指定矩形：");
painter.drawEllipse(10,140,100,50);

painter.drawText(10,240,"指定圆心和半径：");
painter.drawEllipse(QPoint(110,300),100,50);

painter.drawText(10,380,"画圆：");
painter.drawEllipse(QPoint(110,490),100,100);

画圆弧

相关API

画圆弧时，需要指定一个矩形，以及开始角度startAngle、跨角角度spanAngle

角度起始零点为时钟3点钟的位置，逆时针增加。一圈的跨度为360×16，半圈为180×16，注意指定角度时别忘了×16

如果spanAngle为正数，那么就是逆时针画圆弧

如果spanAngle为负数，那么就是顺时针画圆弧

直接指定一个矩形

void drawArc(const QRectF &rectangle, int startAngle, int spanAngle);
void drawArc(const QRect &rectangle, int startAngle, int spanAngle);

通过指定左上角的顶点和宽高来指定一个矩形

void drawArc(int x, int y, int width, int height, int startAngle, int spanAngle);

QRect rect(QPoint(20,20),QSize(200,100));
//起始角度为30度，跨度为120度
painter.drawArc(rect,30*16,120*16);

画饼图

和画圆弧是一样的，就是圆弧的两个端点会和矩形的中点连接起来

相关API

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

QRect rect(QPoint(20,20),QSize(200,100));
//起始角度为30度，跨度为120度
painter.drawPie(rect,30*16,120*16);

画弦图

和画圆弧是一样的，就是圆弧的两个端点直接连接起来

相关API

void drawChord(const QRectF &rectangle, int startAngle, int spanAngle);
void drawChord(const QRect &rectangle, int startAngle, int spanAngle);
void drawChord(int x, int y, int width, int height, int startAngle, int spanAngle);

QRect rect(QPoint(20,20),QSize(200,100));
//起始角度为30度，跨度为120度
painter.drawChord(rect,30*16,120*16);

画路径

相关API

// 直接指定一个 QPainterPath 对象
void drawPath(const QPainterPath &path)

需要一个QPainterPath的参数

该类的常用API有：

// 移动到某个起点，开始制定路径
void moveTo(const QPointF &point);
void moveTo(qreal x, qreal y);

// 以直线的方式，路径指向到指定的点
void lineTo(const QPointF &endPoint);
void lineTo(qreal x, qreal y);

// 以贝瑟尔曲线的方式，路径到指定的点
// 具体来说：使用控制点c1和c2，在当前点和结束点之间，绘制一条贝瑟尔曲线
void cubicTo(const QPointF &c1, const QPointF &c2, const QPointF &endPoint);
void cubicTo(qreal c1X, qreal c1Y, qreal c2X, qreal c2Y, qreal endPointX, qreal endPointY);

QPainterPath path;
//路径起点
path.moveTo(200,300);
//以直线的方式从起点到(200,100)
path.lineTo(200,100);
//再以贝塞尔曲线的方式到(400,300)
//前面两个参数是控制点（控制曲线的弯曲），第三个参数是路径要到达的点
path.cubicTo(QPoint(300,80),QPoint(200,200),QPoint(400,300));

painter.drawPath(path);

画文本

相关API

指定一个点，在这个点这里绘制文本

void drawText(int x,
              int y,
              const QString &text);

void drawText(const QPointF &position,
              const QString &text);

void drawText(const QPoint &position,
              const QString &text);

//绘制文本的大小不受画笔QPen的setWidth的控制
//而是要给QPainter设置字体
QFont font;
//设置字体的大小
font.setPointSize(16);
//.....QFont还有其他set方法

painter.setFont(font);
//在指定位置处绘制文本
painter.drawText(QPoint(100,100),"你好世界");

指定1个矩形，在矩形框内绘制文本

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);

//QTextOption可以控制文本在绘制时的一些行为
void drawText(const QRectF &rectangle,
              const QString &text,
              const QTextOption &option = QTextOption());

//指定一个矩形进行绘制，可以指定文本在这个矩形内的对齐方式
QRect rect(QPoint(100,100),QSize(200,100));
painter.drawRect(rect);//把这个矩形也画出来看效果
painter.drawText(rect,Qt::AlignCenter,"你好世界");

QRect rect(QPoint(100,100),QSize(200,100));
painter.drawRect(rect);//把这个矩形也画出来看效果
//文本过长，使用QTextOption在绘制时进形自动换行
QTextOption op;
op.setAlignment(Qt::AlignLeft|Qt::AlignVCenter);
op.setWrapMode(QTextOption::WordWrap);//自动换行

painter.drawText(rect,"你好世界hihihis都会死的海四达黑丝到哪上帝和实地花洒",op);

//指定一个矩形进行绘制，可以指定文本在这个矩形内的对齐方式
QRect rect(QPoint(100,100),QSize(200,100));
painter.drawRect(rect);//把这个矩形也画出来看效果

//文本过长，使用QFontMetrics在文字超过某一个长度时显示省略号
QFontMetrics me=painter.fontMetrics();//通过QPainter的fontMetrics方法来获取QFontMetrics

//先处理文本：文字长度超过150px时，文本右边变为省略号
auto str_text=me.elidedText("你好世界hihihis都会死的海四达黑丝到哪上帝和实地花洒",
                             Qt::ElideRight,150,Qt::TextShowMnemonic);

painter.drawText(rect,Qt::AlignCenter,str_text);

绘制图片

跟绘制文本差不多，也是可以在某个点处画图片，也可以在某个矩形内画图片

相关API

指定矩形，绘制图片

void drawPixmap(const QRectF &target,
                const QPixmap &pixmap,
                const QRectF &source);
void drawPixmap(const QRect &target,
                const QPixmap &pixmap,
                const QRect &source);
void drawPixmap(int x,
                int y,
                int w,
                int h,
                const QPixmap &pixmap,
                int sx,
                int sy,
                int sw,
                int sh);
void drawPixmap(const QRect &rectangle,
                const QPixmap &pixmap);
void drawPixmap(int x,
                int y,
                int width,
                int height,
                const QPixmap &pixmap);

指定点，绘制图片

void drawPixmap(const QPointF &point,
                const QPixmap &pixmap,
                const QRectF &source);
void drawPixmap(const QPoint &point,
                const QPixmap &pixmap,
                const QRect &source);
void drawPixmap(const QPointF &point,
                const QPixmap &pixmap);
void drawPixmap(const QPoint &point,
                const QPixmap &pixmap);
void drawPixmap(int x,
                int y,
                const QPixmap &pixmap);
void drawPixmap(int x,
                int y,
                const QPixmap &pixmap,
                int sx,
                int sy,
                int sw,
                int sh);

需要添加资源文件

QRect rect(10,10,200,100);
painter.drawRect(rect);

//指定矩形的话，绘制的图片会自动缩放，填满矩形
painter.drawPixmap(rect,QPixmap(":/Qing.png"));
            
//指定某个位置绘制，则不会
painter.drawPixmap(QPoint(300,300),QPixmap(":/Qing.png"));