QPainter基本绘图【1】 原创
QPainter基本绘图Demo【1】
更多精彩内容 |
---|
👉个人内容分类汇总 👈 |
1、概述
-
Qt版本:V5.12.5
-
本文内容
- 绘制原点和坐标轴;
- 绘制线段、散点、多线段(折线)、多边形、矩形、圆角矩形、椭圆、弧线、弦形、扇形、绘制路径、文字、图片;
- 可设置画笔样式、笔帽样式、线条连接样式、笔刷样式、画笔粗细、颜色、抗锯齿;
- 可设置坐标原点水平、垂直偏移、旋转、缩放。
-
整体效果
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;
}
}
}
-
NoBrush
-
SolidPattern
-
Dense1Pattern
-
Dense2Pattern
-
Dense3Pattern
-
Dense4Pattern
-
Dense5Pattern
-
Dense6Pattern
-
Dense7Pattern
-
HorPattern
-
VerPattern
-
CrossPattern
-
BDiagPattern
-
FDiagPattern
-
DiagCrossPattern
-
LinearGradientPattern
-
RadialGradientPattern
-
ConicalGradientPattern
-
TexturePattern
7、源代码
💡💡💡💡💡💡💡💡💡💡💡💡💡💡