QPainter绘制时【数据类型】和【抗锯齿】对效果的影响【2】 原创

QPainter绘制时【数据类型】和【抗锯齿】对绘制效果的影响【2】

文章目录

• QPainter绘制时【数据类型】和【抗锯齿】对绘制效果的影响【2】
• • 1、概述
  • 2、关键代码
  • 3、源代码

更多精彩内容

👉个人内容分类汇总 👈

1、概述

• Qt版本：V5.12.5

• 本文内容

  1. 使用【浮点数】进行绘制，绘制的圆会更加均匀；
  2. 使用【整形】进行绘制，比浮点数计算快，适用于频繁、大量的重绘，但绘制效果较差；
  3. 开启【抗锯齿】后线条会更加平滑;
  4. 将布局改为使用设计器布局，减少使用代码布局，使关注点更多在绘制图形上；
  5. 将使用定时器更新绘制改为使用滑动条更新，增加可控性，便于观察绘制细节。

• 整体效果

  

2、关键代码

• circlewidget.h

  #ifndef CIRCLEWIDGET_H
  #define CIRCLEWIDGET_H
  
  #include <QObject>
  #include <QWidget>
  
  class CircleWidget : public QWidget
  {
      Q_OBJECT
  public:
      explicit CircleWidget(QWidget *parent = nullptr);
  
      void setFloatBased(bool flag);           // 设置是否使用浮点型数据类型来保存绘制图案的数据
      void setAntialiased(bool flag);          // 是否使用抗锯齿渲染
      void setFrame(int value);
  
  signals:
  
  public slots:
  
  protected:
      void paintEvent(QPaintEvent *event) override;
  
  private:
      bool floatBased = false;         // 是否使用浮点类型数绘制
      bool antialiased = false;        // 是否开启抗锯齿
      int frameNo = 0;
  };
  
  #endif // CIRCLEWIDGET_H
  
  

• circlewidget.cpp

  #include "circlewidget.h"
  
  #include <qdebug.h>
  #include <qpainter.h>
  
  CircleWidget::CircleWidget(QWidget *parent) : QWidget(parent)
  {
  
  }
  
  /**
   * @brief       设置是否使用浮点型数据类型来保存绘制图案的数据
   * @param flag  true：使用 false：不使用
   */
  void CircleWidget::setFloatBased(bool flag)
  {
      this->floatBased = flag;
      this->update();
  }
  
  /**
   * @brief      是否使用抗锯齿渲染
   * @param flag true：使用  false：不使用
   */
  void CircleWidget::setAntialiased(bool flag)
  {
      this->antialiased = flag;
      this->update();
  }
  
  /**
   * @brief        设置绘制的参数
   * @param value
   */
  void CircleWidget::setFrame(int value)
  {
      this->frameNo = value;
      this->update();
  }
  
  void CircleWidget::paintEvent(QPaintEvent *event)
  {
      QWidget::paintEvent(event);
      QPainter painter(this);
      painter.setRenderHint(QPainter::Antialiasing, antialiased);           // 设置抗锯齿（开启后线条会更加平滑）
      painter.drawRect(QRect(0, 0, this->width() - 1, this->height() - 1)); // 画一个边框
      painter.translate(this->rect().center());                             // 将坐标轴原点移动到中心位置
  
      for(int diameter = 0; diameter < 256; diameter += 9)                  // 由于QColor透明度通道最大值为255，这里为了方便也设置最大255
      {
          int delta = (diameter / 2) - frameNo;
          int alpha = 255 - (delta * delta) / 4 - diameter;                 // 计算透明度
  
          if(alpha <= 0) continue;                                          // 如果颜色透明度不为正值则不进行绘制
  
          painter.setPen(QPen(QColor(0, 127, 127, alpha), 3));              // 设置画笔，颜色透明度渐变
          if(floatBased)
          {
              painter.drawEllipse(QRectF(-diameter / 2.0, -diameter / 2.0, diameter, diameter));   // 使用浮点数进行绘制，绘制的圆会更加均匀
          }
          else
          {
              painter.drawEllipse(QRect(-diameter / 2, -diameter / 2, diameter, diameter));        // 使用整形进行绘制，比浮点数计算快，适用于频繁、大量的重绘，但绘制效果较差
          }
      }
  }
  
  

• widget.cpp

  #include "widget.h"
  #include "ui_widget.h"
  
  Widget::Widget(QWidget *parent)
      : QWidget(parent)
      , ui(new Ui::Widget)
  {
      ui->setupUi(this);
  
      this->setWindowTitle("QPainter绘制时【数据类型】和【抗锯齿】对效果的影响");
  
      ui->widget_2->setAntialiased(true);   // 开启抗锯齿
      ui->widget_4->setAntialiased(true);
      ui->widget_3->setFloatBased(true);    // 使用浮点数据类型进行绘制
      ui->widget_4->setFloatBased(true);
  }
  
  Widget::~Widget()
  {
      delete ui;
  }
  
  /**
   * @brief         因为Qt的Demo使用定时器更新参数会一直刷新，不便于观察细节，这里改为通过滑动条设置绘制的参数
   * @param value
   */
  void Widget::on_horizontalSlider_valueChanged(int value)
  {
      ui->widget->setFrame(value);
      ui->widget_2->setFrame(value);
      ui->widget_3->setFrame(value);
      ui->widget_4->setFrame(value);
  }
  
  

3、源代码

• gitee
• github

💡💡💡💡💡💡💡💡💡💡💡💡💡💡