QPainter基本绘图Demo【1】

文章目录

QPainter基本绘图Demo【1】

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

1、概述

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

2、绘制图案

绘制原点和坐标轴

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轴箭头

在这里插入图片描述

绘制线段

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

在这里插入图片描述

绘制散点

static const QPoint points[4] = {                        // 创建一个点数组，包含4个需要绘制的点坐标
        QPoint(100, 280),
        QPoint(120, 30),
        QPoint(280, 60),
        QPoint(290, 270)
    };
painter.drawPoints(points, 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个点组成的折线

在这里插入图片描述

多边形

多边形和折线的区别：
- 多边形是首位相连的封闭图形，折线绘制不会自动封闭线段首尾；
- 多边形可以设置笔刷填充，折线绘制不行。

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

在这里插入图片描述

矩形

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

在这里插入图片描述

圆角矩形

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

在这里插入图片描述

椭圆

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

在这里插入图片描述

弧线

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

在这里插入图片描述

弦

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

在这里插入图片描述

饼图（扇形）

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

在这里插入图片描述

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

在这里插入图片描述

文本

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

在这里插入图片描述

图片

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()));   // 设置画笔样式

NoPen：无画笔，填充但不绘制任何边界线。
SolidLine：简单的线条。
DashLine：由几个像素分隔的虚线。
DotLine：由几个像素分隔的点。
DashDotLine：交替的点和线段。
DashDotDotLine：交替的两个点和线段。
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()));

FlatCap：不覆盖直线端点的正方形直线端点。
SquareCap：一种覆盖端点并超出端点一半线宽的方形线端点。
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，笔的宽度的倍数。
}

MiterJoin：线的外边缘延伸成一定角度相交，并填充此区域。
BevelJoin：两条线之间的三角形缺口被填充。
RoundJoin：两条线之间的圆弧被填充。
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;
    }
    }
}