Qt QPainter绘图

旧城等待, 2022-11-04 08:03 102阅读 0赞

1.QPainter绘图系统

  • QPainter用来进行绘图操作的类。
  • QPaintDevice是一个可以使用QPainter进行绘图的抽象二维界面。
  • QPaintEngine给QPainter提供在不同设备上绘图的接口,QPaintEngine类由QPainter和QPaintDevice内部使用,应用程序一般无需使用QPaintEngine。
  • 绘图设备包括QWidget、QPixmap、QImage等。

2.paintEvent世界和绘图区

QWidget类及其子类是最常用的绘图设备,从QWidget类继承的类都有paintEvent()事件,只需要重定义此事件就行。

3.QWidget内部坐标系统

坐标系统

4.QPainter绘图主要属性

  • QPen:画笔,用于控制线条的颜色、宽度等。
  • QBrush:画刷,用于填充颜色、渐变特性等。
  • QFont:字体属性,用于绘制文字时,设置文字的样式、大小等。

QPen

1.设置线条样式setStyle(Qt::PenStyle style)

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70

2.设置线条端点样式setCapStyle(Qt::PenCapStyle style)

20210301213438375.PNG

3..设置线条连接样式setJoinStyle(Qt::PenJoinStyle style)

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 1

QBrush

设置画刷样式setStyle(Qt::BrushStyle style)

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 2

渐变填充需要使用专门的类。

20210301213857625.PNG

5.示例

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 3

  1. void Widget::paintEvent(QPaintEvent *event)
  2. {
  3. //创建QPainter对象,指明父对象,否则不能看见
  4. QPainter painter(this);
  5. //先画一条线
  6. QPen pen;
  7. //设置线宽
  8. pen.setWidth(2);
  9. //设置颜色
  10. pen.setColor(Qt::red);
  11. //设置线的样式 实线、虚线
  12. pen.setStyle(Qt::DashDotLine);
  13. //设置线端点样式
  14. pen.setCapStyle(Qt::RoundCap);
  15. //设置画笔
  16. painter.setPen(pen);
  17. //画线
  18. painter.drawLine(10,10,100,100);
  19. //设置画刷
  20. QBrush brush;
  21. //画刷设置颜色
  22. brush.setColor(Qt::yellow);
  23. //设置填充样式
  24. brush.setStyle(Qt::SolidPattern);
  25. //设置画刷
  26. painter.setBrush(brush);
  27. //画四边形
  28. painter.drawRect(QRect(300,300,50,50));
  29. //画多边形,三角形
  30. QPoint points[] = {
  31. QPoint(200,200),
  32. QPoint(200,260),
  33. QPoint(260,260),
  34. };
  35. painter.drawPolygon(points,3);
  36. //设置字体
  37. QFont font;
  38. //字体大小
  39. font.setPointSize(30);
  40. //粗体
  41. font.setBold(true);
  42. //设置字体
  43. painter.setFont(font);
  44. //画字
  45. painter.drawText(400,400,QString("Qt"));
  46. }

6.渐变填充

  • QLinearGradient:线性渐变。指定一个起点及其颜色,终点及其颜色,还可以指定中间的某个点的颜色,起点至终点之间的颜色会线性插值计算,得到线性渐变的填充颜色
  • QRadialGradient:有简单辐射渐变和扩展辐射渐变两种。简单辐射渐变是在一个圆内的一个焦点和一个端点之间生成的渐变颜色;扩展辐射渐变是在一个焦点圆和一个中心圆之间生成渐变色。
  • QConicalGradient:圆锥形渐变,围绕一个中心点逆时针生成渐变颜色。

设置延展方式void setSpread(Spread method)

  • QGradient::PadSpread:用结束点的颜色填充外部区域,这是缺省的方式。
  • QGradient::RepeatSpread:重复使用渐变方式填充外部区域。
  • QGradient::ReflectSpread:反射式重复使用渐变方式填充外部区域。

实例:辐射渐变

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 4

  1. //设置辐射填充中心点:width()/2,height()/2,
  2. //半径:width()/8
  3. //焦点坐标:width()/2,height()/2
  4. QRadialGradient radial(width()/2,height()/2,
  5. width()/8,width()/2,height()/2);
  6. //设置起始点颜色,0表示起始
  7. radial.setColorAt(0,Qt::green);
  8. //设置终点颜色 1表示终点
  9. radial.setColorAt(1,Qt::blue);
  10. //设置延展方式
  11. radial.setSpread(QGradient::ReflectSpread);
  12. //设置画刷
  13. painter.setBrush(radial);
  14. //画矩形
  15. painter.drawRect(this->rect());

实例:线性渐变

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 5

  1. QLinearGradient radial(this->rect().left(),this->rect().top(),
  2. this->rect().right(),this->rect().top());
  3. //设置起始点颜色,0表示起始
  4. radial.setColorAt(0,Qt::blue);
  5. //设置中间点颜色
  6. radial.setColorAt(0.5,Qt::green);
  7. //设置终点颜色 1表示终点
  8. radial.setColorAt(1,Qt::red);
  9. //设置延展方式
  10. radial.setSpread(QGradient::ReflectSpread);
  11. //设置画刷
  12. painter.setBrush(radial);
  13. //画矩形
  14. painter.drawRect(this->rect());

实例:圆锥形**渐变**

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 6

  1. QConicalGradient radial(width()/2,height()/2,45);
  2. //设置起始点颜色,0表示起始
  3. radial.setColorAt(0,Qt::yellow);
  4. //设置中间点颜色
  5. radial.setColorAt(0.5,Qt::blue);
  6. //设置终点颜色 1表示终点
  7. radial.setColorAt(1,Qt::green);
  8. //设置画刷
  9. painter.setBrush(radial);
  10. //画矩形
  11. painter.drawRect(this->rect());

7.自定义绘图界面

麦克风音量变化

圆形进度条实现

发表评论

表情:
评论列表 (有 0 条评论,102人围观)

还没有评论,来说两句吧...

相关阅读

    相关 QtQPainter的QPainterPath类

    QPainterPath类为绘制操作提供了一个容器,可以用来创建图形并且重复使用。一个绘图路径就是由多个矩形、椭圆、线条或者曲线等组成的对象,一个路径可以是封闭的,例如矩形和椭

    相关 QT QPainter

    QPainter类在小部件和其他绘制设备上执行低级绘制。 QPainter提供了高度优化的功能来完成大多数图形GUI程序所需的工作。它可以画从简单的线条到复杂的形状,如馅饼

    相关 Qt学习之路(24): QPainter

    多些大家对我的支持啊!有朋友也提出,前面的几节有关event的教程缺少例子。因为event比较难做例子,也就没有去写,只是把大概写了一下。今天带来的是新的部分,有关Qt的2D绘