QPainter基本绘图【1】

QPainter基本绘图Demo【1】

文章目录

更多精彩内容
?个人内容分类汇总 ?

1、概述

  • Qt版本：V5.12.5

  • 本文内容

    1. 绘制原点和坐标轴；
    2. 绘制线段、散点、多线段（折线）、多边形、矩形、圆角矩形、椭圆、弧线、弦形、扇形、绘制路径、文字、图片；
    3. 可设置画笔样式、笔帽样式、线条连接样式、笔刷样式、画笔粗细、颜色、抗锯齿；
    4. 可设置坐标原点水平、垂直偏移、旋转、缩放。

  • 整体效果

    在这里插入图片描述

2、绘制图案

  1. 绘制原点和坐标轴

    painter.drawText(QRect(10, -30, 100, 25), Qt::AlignLeft, QString("当前角度：%1").arg(m_rotate));  // 显示当前旋转角度
// 画原点
painter.drawPoint(0, 0);                    
painter.drawEllipse(-5, -5, 10, 10);
painter.drawLine(QPoint(0, 0), QPoint(100, 0));   // 画X轴
painter.drawLine(QPoint(0, 0), QPoint(0, 100));   // 画Y轴
QPainterPath path;
path.moveTo(100, -3);
path.lineTo(106, 0);
path.lineTo(100, 3);
painter.drawPath(path);  // 画X轴箭头
painter.rotate(90);
painter.drawPath(path);  // 画Y轴箭头

    在这里插入图片描述

  2. 绘制线段

    QRect rect(10, 20, 280, 260);                             // 创建一个矩形
painter.drawLine(rect.bottomLeft(), rect.topRight());     // 使用矩形右下角、左上角两个点绘制线段
//painter.drawLine(QPoint(10,279), QPoint(289,20));       // 使用两个点绘制线段

    在这里插入图片描述

  3. 绘制散点

    static const QPoint points[4] = {                        // 创建一个点数组，包含4个需要绘制的点坐标
        QPoint(100, 280),
        QPoint(120, 30),
        QPoint(280, 60),
        QPoint(290, 270)
    };
painter.drawPoints(points, 4);                          // 同时绘制4个点

    在这里插入图片描述

  4. 多线段（折线）

    static const QPoint points[4] = {             // 创建一个点数组，包含4个点坐标
        QPoint(100, 280),
        QPoint(120, 30),
        QPoint(280, 60),
        QPoint(290, 270)
    };
painter.drawPolyline(points, 4);             // 绘制由传入的4个点组成的折线

    在这里插入图片描述

  5. 多边形

    • 多边形和折线的区别：
      • 多边形是首位相连的封闭图形，折线绘制不会自动封闭线段首尾；
      • 多边形可以设置笔刷填充，折线绘制不行。
    static const QPoint points[4] = {             // 创建一个点数组，包含4个点坐标
        QPoint(100, 280),
        QPoint(120, 30),
        QPoint(280, 60),
        QPoint(290, 270)
    };
painter.drawPolygon(points, 4);              // 由传入的4个点绘制一个多边形

    在这里插入图片描述

  6. 矩形

    QRect rect(10, 20, 280, 260);                             // 创建一个矩形
painter.drawRect(rect);                                   // 绘制一个矩形

    在这里插入图片描述

  7. 圆角矩形

    QRect rect(10, 20, 280, 260);                               // 创建一个矩形
painter.drawRoundedRect(rect, 25, 25, Qt::AbsoluteSize);    // 绘制一个圆角矩形，圆角半径为25

    在这里插入图片描述

  8. 椭圆

    QRect rect(10, 20, 280, 260);
painter.drawEllipse(rect);

    在这里插入图片描述

  9. 弧线

    QRect rect(10, 20, 280, 260);
int startAngle = 20 * 16;       // 开始角度 startAngle和arcLength必须以1/16度指定
int arcLength = 120 * 16;       // 弧线角度
painter.drawArc(rect, startAngle, arcLength);

    在这里插入图片描述

  10. 弦

    QRect rect(10, 20, 280, 260);
int startAngle = 20 * 16;       // 开始角度 startAngle和arcLength必须以1/16度指定
int arcLength = 120 * 16;       // 弧线角度
painter.drawChord(rect, startAngle, arcLength);

    在这里插入图片描述

  11. 饼图（扇形）

    QRect rect(10, 20, 280, 260);
int startAngle = 20 * 16;       // 开始角度 startAngle和arcLength必须以1/16度指定
int arcLength = 120 * 16;       // 弧线角度
painter.drawPie(rect, startAngle, arcLength);

    在这里插入图片描述

  12. QPainterPath路径

    // 创建一个绘制路径
QPainterPath path;
path.moveTo(20, 180);    // 移动开始点
path.lineTo(20, 30);    // 添加一条(80到30d)竖线
path.cubicTo(QPoint(180, 0), QPoint(80, 80), QPoint(180, 180)); // 添加一条曲线
painter.drawPath(path);

    在这里插入图片描述

  13. 文本

    QRect rect(10, 20, 280, 260);
painter.drawText(rect, Qt::AlignCenter, "Qt Text \n 绘制文本");

    在这里插入图片描述

  14. 图片

    QPixmap m_pixmap;
m_pixmap.load("://1.png");
painter.drawPixmap(10, 10, m_pixmap);

    在这里插入图片描述

3、画笔样式

// 画笔样式枚举
QMetaEnum metaEnum = QMetaEnum::fromType<Qt::PenStyle>();
for(int i=0; i < metaEnum.keyCount(); ++i)
{
    ui->com_penStyle->addItem(metaEnum.key(i), metaEnum.value(i));
}
QPen pen;
pen.setStyle(Qt::PenStyle(ui->com_penStyle->currentData().toInt()));   // 设置画笔样式

  1. NoPen：无画笔，填充但不绘制任何边界线。

    在这里插入图片描述

  2. SolidLine：简单的线条。

    在这里插入图片描述

  3. DashLine：由几个像素分隔的虚线。

    在这里插入图片描述

  4. DotLine：由几个像素分隔的点。

    在这里插入图片描述

  5. DashDotLine：交替的点和线段。

    在这里插入图片描述

  6. DashDotDotLine：交替的两个点和线段。

    在这里插入图片描述

  7. CustomDashLine：使用定义的自定义图案，如果没有自定义则默认为SolidLine。

    在这里插入图片描述

4、笔帽样式

需要在开放图案才有效果，如直线、弧线等，如果是封闭的图案如矩形、圆形等则没有效果。

// 画笔笔帽样式枚举
QMetaEnum metaEnum = QMetaEnum::fromType<Qt::PenCapStyle>();
for(int i=0; i < metaEnum.keyCount(); ++i)
{
	ui->com_penCapStyle->addItem(metaEnum.key(i), metaEnum.value(i));
}
QPen pen;
pen.setCapStyle(Qt::PenCapStyle(ui->com_penCapStyle->currentData().toInt()));

  1. FlatCap：不覆盖直线端点的正方形直线端点。

    在这里插入图片描述

  2. SquareCap：一种覆盖端点并超出端点一半线宽的方形线端点。

    在这里插入图片描述

  3. RoundCap：一个圆形的线端。

    在这里插入图片描述

5、线条连接样式

多段线条连接的图案才有效果，如矩形、多边形、折线等，如果是直线、弧线、圆形等图案则没有效果。

// 线段转角处连接样式枚举
metaEnum = QMetaEnum::fromType<Qt::PenJoinStyle>();
for(int i=0; i < metaEnum.keyCount(); ++i)
{
    ui->com_penJoinStyle->addItem(metaEnum.key(i), metaEnum.value(i));
}
QPen pen;
Qt::PenJoinStyle joinStyle = Qt::PenJoinStyle(ui->com_penJoinStyle->currentData().toInt());
pen.setJoinStyle(joinStyle);
if(Qt::MiterJoin == joinStyle)   // 笔样式设置为 Qt::MiterJoin 时才有效
{
    pen.setMiterLimit(0.2);   // 将此笔的斜接限制设置为0.2，笔的宽度的倍数。
}

  1. MiterJoin：线的外边缘延伸成一定角度相交，并填充此区域。

    在这里插入图片描述

  2. BevelJoin：两条线之间的三角形缺口被填充。

    在这里插入图片描述

  3. RoundJoin：两条线之间的圆弧被填充。

    在这里插入图片描述

  4. SvgMiterJoin：与SVG 1.2规范中的斜接定义相对应的斜接。

    在这里插入图片描述

6、笔刷样式

只有封闭图案才生效，例如矩形、圆形等，开放图形无效，如直线，弧线。

抗锯齿效果对笔刷填充无效。

// 笔刷样式枚举
QMetaEnum metaEnum = QMetaEnum::fromType<Qt::BrushStyle>();
for(int i=0; i < metaEnum.keyCount(); ++i)
{
    ui->com_brushStyle->addItem(metaEnum.key(i), metaEnum.value(i));
}

/**
 * @brief        设置笔刷
 * @param index
 */
void Widget::on_com_brushStyle_activated(int index)
{
    Q_UNUSED(index)
    Qt::BrushStyle style = Qt::BrushStyle(ui->com_brushStyle->currentData().toInt());

    switch (style)
    {
    case Qt::LinearGradientPattern:    // 添加线性渐变图案
    {
        QLinearGradient linearGradient(0, 0, 200, 200);    // 从QPoint(0, 0)到QPoint(200, 200)的线性渐变色
        linearGradient.setColorAt(0.0, Qt::white);
        linearGradient.setColorAt(0.5, Qt::green);
        linearGradient.setColorAt(1.0, Qt::black);
        ui->widget->setBrush(linearGradient);
        break;
    }
    case Qt::RadialGradientPattern:   // 添加径向渐变图案
    {
        QRadialGradient radialGradient(QPointF(150, 150), 150, QPointF(100, 100));  // 中心点QPointF(150, 150)，圆形半径150，焦点QPointF(100, 100)
        radialGradient.setColorAt(0.0, Qt::white);
        radialGradient.setColorAt(0.3, Qt::green);
        radialGradient.setColorAt(1.0, Qt::black);
        ui->widget->setBrush(radialGradient);
        break;
    }
    case Qt::ConicalGradientPattern:   // 添加锥形渐变图案
    {
        QConicalGradient conicalGradient(150, 150, 90);    // 中心点QPointF(150, 150)，角度90（0度为3点钟方向）
        conicalGradient.setColorAt(0.0, Qt::white);
        conicalGradient.setColorAt(0.5, Qt::green);
        conicalGradient.setColorAt(1.0, Qt::black);
        ui->widget->setBrush(conicalGradient);
        break;
    }
    case Qt::TexturePattern:           // 添加图片纹理笔刷
    {
        ui->widget->setBrush(QBrush(QPixmap("C:/Users/mhf/Pictures/grid.PNG")));
        break;
    }
    default:
    {
        QBrush brush;
        brush.setStyle(style);
        brush.setColor(Qt::red);
        ui->widget->setBrush(brush);
        break;
    }
    }
}

  1. NoBrush

    在这里插入图片描述

  2. SolidPattern

    在这里插入图片描述

  3. Dense1Pattern

    在这里插入图片描述

  4. Dense2Pattern

    在这里插入图片描述

  5. Dense3Pattern

    在这里插入图片描述

  6. Dense4Pattern

    在这里插入图片描述

  7. Dense5Pattern

    在这里插入图片描述

  8. Dense6Pattern

    在这里插入图片描述

  9. Dense7Pattern

    在这里插入图片描述

  10. HorPattern

    在这里插入图片描述

  11. VerPattern

    在这里插入图片描述

  12. CrossPattern

    在这里插入图片描述

  13. BDiagPattern

    在这里插入图片描述

  14. FDiagPattern

    在这里插入图片描述

  15. DiagCrossPattern

    在这里插入图片描述

  16. LinearGradientPattern

    在这里插入图片描述

  17. RadialGradientPattern

    在这里插入图片描述

  18. ConicalGradientPattern

    在这里插入图片描述

  19. TexturePattern
    在这里插入图片描述

7、源代码

??????????????

版权声明：本文为qq_43627907原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。