android Paint画圆不平滑 painter怎么画圆

QPainter基本绘图Demo【1】

文章目录

• QPainter基本绘图Demo【1】

• 1、概述
• 2、绘制图案
• 3、画笔样式
• 4、笔帽样式
• 5、线条连接样式
• 6、笔刷样式
• 7、源代码

更多精彩内容

👉个人内容分类汇总 👈

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

1. 绘制线段

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

1. 绘制散点

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

1. 多线段（折线）

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

1. 多边形

• 多边形和折线的区别：

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

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

1. 矩形

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

1. 圆角矩形

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

1. 椭圆

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

1. 弧线

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

1. 弦

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

1. 饼图（扇形）

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

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

1. 文本

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

1. 图片

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