Qt 自定义控件(Qt绘图)

一、QPaintEvent绘图事件
1、QPaintEvent是Qt框架中一个重要的事件类，专门用于处理绘图事件。

2、当Qt视图组件需要重绘自己的一部分时，就会产生QPaintEvent事件。

3、Qt视图组件重绘自己，通常发生在以下情况:
(1)、窗口第一次显示时: 当窗口或控件第一次出现在屏幕上时，系统会生成一个QPaintEvent事件，通知窗口进行自身的绘制。
(2)、窗口大小改变时: 当用户改变窗口的大小时，窗口的内容通常需要重新绘制以适应新的尺寸。
(3)、窗口部分被遮挡后又重新显示时: 如果窗口被其他窗口遮挡，然后又重新露出来，被遮挡的部分通常需要重新绘制。
(4)、手动请求重绘: 通过调用QWidget的update()或repaint()方法，可以手动触发重绘事件。
(5)、还有很多其它情况，也会重绘自己。

4、QWidget的update()和repaint()的主要区别:
(1)、执行时机:
* update():将一个QPaintEvent添加到事件队列中，等待稍后执行，它不会立即执行paintEvent()。
   * repaint():会立即执行paintEvent()，不会等待事件队列的处理。
(2)、重绘区域:
* update():可以合并多个重绘请求，只在最后执行一次paintEvent()，可以减少不必要的重绘操作，提高性能。
   * repaint():每次调用都会触发一次paintEvent()，不进行任何合并操作。
(3)、同步性:
* update():是异步的。
   * repaint():是同步的。
(4)、使用场景:
* update():通常用于在不重要的时候触发重绘，如用户交互、动画等，它允许Qt进行优化，减少闪烁现象。
   * repaint():适用于需要立即反馈的场景，如在paintEvent中计算和显示一些重要的信息。

5、在Qt应用程序中，通常通过重写QWidget的paintEvent()方法来处理绘制逻辑。
(1)、重写paintEvent是在Qt中自定义绘制的标准做法。例如:

      class MyWidget : public QWidget {
      protected:
          void paintEvent(QPaintEvent * event) override {
              QPainter painter(this);
              //绘制逻辑
          }
      };

6、在paintEvent()中，可以创建一个QPainter对象并使用它来执行绘制操作。
(1)、QPainter可以绘制各种基本图形，如线条、矩形、椭圆等，还可以绘制文本和图像。

二、QPainter画家
1、概述
(1)、QPainter是Qt库中进行绘画的类，它提供了各种绘制功能，比如画文本、画线、画图形等。
   (2)、QPainter基本用法:
   * 初始化QPainter: 用一个QPaintDevice，比如QWidget、QPixmap、QImage等，初始化QPainter对象。
       QPainter painter(this); //假设在QWidget的子类中, this指向QWidget子类对象
       * 设置画笔和画刷: 可以设置画笔(用于描边)和画刷(用于填充)的颜色、样式等。
       painter.setPen(Qt::blue); //设置画笔颜色为蓝色
       painter.setBrush(Qt::yellow); //设置画刷颜色为黄色
       * 绘制图形: 使用QPainter的drawXXX()方法来绘制线条、矩形、圆形、文本等。
       painter.drawLine(10, 10, 100, 100); //画线
       painter.drawRect(10, 10, 100, 100); //画矩形
       painter.drawText(10, 10, "Hello Qt!"); //画文本
(3)、QPainter的使用依赖于Qt的事件循环，因此通常在QWidget的paintEvent()或类似的事件处理函数中使用它。

2、QPainter画文字
(1)、画文字API使用:

  void Widget::paintEvent(QPaintEvent * event)
  {
      QPainter painter(this);
      painter.setPen(Qt::blue);
      painter.setFont(QFont("Arial", 20));
             
      painter.drawRect(50, 50, 200, 100);
             
      //指定文字的左下角点。
      painter.drawText(50, 50, "Hello");
      painter.drawText(QPoint(50, 50), "Hello");
      //文字贴在矩形的左上角点，在矩形内显示。
      painter.drawText(QRect(50, 50, 200, 100), "Hello");
      //在矩形内，指定flags，显示文字
      painter.drawText(50, 50, 200, 100, Qt::AlignHCenter | Qt::AlignVCenter, "Hello");
      painter.drawText(QRect(50, 50, 200, 100), Qt::AlignHCenter | Qt::AlignVCenter, "Hello");
   }

3、QPainter画线、画矩形、画椭圆
(1)、画线API使用:

   void Widget::paintEvent(QPaintEvent * event)
   {
        QPainter painter(this);
        painter.setPen(Qt::blue);

        //两个点确定一条线
        painter.drawLine(100, 300, 300, 100);
        painter.drawLine(QPoint(100, 320), QPoint(300, 120));
        painter.drawLine(QLine(100, 340, 300, 140));
   }

(2)、画矩形API使用:

void Widget::paintEvent(QPaintEvent * event)
{
     QPainter painter(this);
     painter.setPen(Qt::blue);

     //左上角点、长、宽确定一个矩形
     painter.drawRect(30, 30, 200, 100);
     painter.drawRect(QRect(200, 200, 200, 100));
}

(3)、画椭圆API使用:

 void Widget::paintEvent(QPaintEvent * event)
 {
      QPainter painter(this);
      painter.setPen(Qt::blue);
              
      //在矩形里，贴着矩形的边，画椭圆。
      painter.drawEllipse(QRect(50, 50, 200, 100));
      //(50,50)是矩形左上角点，200是矩形的长，100是矩形的宽。
      painter.drawEllipse(50, 50, 200, 100);
      //指定椭圆的中心点center，椭圆的半径长rx，椭圆的半径宽ry，画椭圆。
      painter.drawEllipse(rect().center(), 100, 50);
 }

4、QPainter画弧、画扇形
(1)、画圆弧:
   * 圆弧是椭圆的一部分，所以由绘制椭圆的参数，再加一个起始角、伸缩角，就可以定义圆弧。
       * 绘制圆弧由给定矩形、起始角startAngle、伸缩角spanAngle定义。
       * 起始角和伸缩角必须以1/16度指定，即一个完整的圆等于5760(16 * 360°)，最小单位是1/16度。
       * 角度的正值表示逆时针方向，负值表示顺时针方向。
       * 零度在3点钟方位。
       * 画圆弧API使用:

  void Widget::paintEvent(QPaintEvent * event)
  {
       QPainter painter(this);
       painter.setPen(Qt::blue);
       painter.setFont(QFont("Arial", 20));

       QRect rect(50, 50, 200, 100);
       painter.drawRect(rect);
       painter.drawArc(rect, 30*16, 120*16);
       painter.drawArc(50, 50, 200, 100, -30*16, -120*16);
 }

(2)、画扇形:
* 画扇形和画弧的参数是一样的，弧是扇形的最外层部分。
* 画扇形API使用:

  void Widget::paintEvent(QPaintEvent * event)
  {
      QPainter painter(this);
      painter.setPen(Qt::blue);

      QRect rect(50, 50, 200, 100);
      painter.drawPie(rect, 30 * 16, 120 * 16);
      painter.drawPie(200, 200, 200, 200, 45*16, 90*16);
  }

5、渐变色
(1)、线性渐变
   * QLinearGradient是Qt框架中用于创建线性渐变的类。
       * 线性渐变是一种从一个颜色平滑过渡到另一个颜色的效果，其变化沿着两个点之间的直线进行。
       * 这种渐变在图形用户界面设计中非常常见，用于添加深度、立体感或动态效果。
       * 基本用法:
       -> 创建QLinearGradient对象: 指定渐变的起点和终点坐标。
           -> 设置颜色停靠点: 在渐变线上定义颜色和相应的位置。
           -> 使用渐变创建QBrush: 用QLinearGradient对象来创建一个QBrush，然后用它在QPainter中进行绘制。
       * API示例:

 void Widget::paintEvent(QPaintEvent * event)
 {
      QPainter painter(this);

      QLinearGradient lineGradient(0, 0, width(), 0);
      lineGradient.setColorAt(0.0, Qt::white);
      lineGradient.setColorAt(1.0, Qt::black);

      QBrush brush(lineGradient);
      painter.setBrush(brush);

      painter.drawRect(rect());
 }

   (2)、径向渐变
   * QRadialGradient是Qt框架中用于创建径向渐变的类。
       * 径向渐变是一种从中心点向外部辐射的颜色渐变，通常在中心点有一种颜色，而向外围渐渐变化为另一种颜色。
       * 径向渐变非常适合用于模拟光源、阴影或创建圆形的立体感。
       * 基本用法:
       -> 创建QRadialGradient对象: 指定渐变的中心点，半径以及焦点(可选)。
           -> 设置颜色停靠点: 在径向渐变中定义颜色和对应的位置。
           -> 使用渐变创建QBrush: 利用QRadialGradient对象创建一个QBrush，然后用它在QPainter中进行绘制。
       * API示例:

void Widget::paintEvent(QPaintEvent * event)
{
     QPainter painter(this);

     QRadialGradient radialGradient(450, 400, 500);
     radialGradient.setColorAt(0.0, Qt::white);
     radialGradient.setColorAt(1.0, Qt::black);
                
     painter.setBrush(QBrush(radialGradient));
     painter.drawRect(300, 300, 300, 200);
}

   (3)、圆锥形渐变
   * QConicalGradient是Qt框架中用于创建圆锥形渐变的类。
       * 圆锥型渐变是一种渐变效果，其中颜色沿着圆锥的轮廓变化，类似于旋转颜色轮。
       * 这种渐变以其中心点为基点，颜色沿圆周分布，可以创建出富有动感的视觉效果。
       * QConicalGradient非常适合用于创建旋转或动态效果的图形，例如加载指示器、进度条或任何需要圆周颜色变化的场景。
       * 基本用法:
       -> 创建QConicalGradient对象: 指定渐变的中心点和起始角度(范围0-360度)。
           -> 设置颜色停靠点: 为渐变添加不同的颜色和对应的位置。
           -> 使用渐变创建QBrush: 使用这个渐变对象来创建一个QBrush，然后应用到QPainter中进行绘制。
       * API示例:

void Widget::paintEvent(QPaintEvent * event)
{
      QPainter painter(this);

      QConicalGradient conicalGradient(400, 300, 0);
      conicalGradient.setColorAt(0.0, Qt::red);
      conicalGradient.setColorAt(0.3, Qt::green);
      conicalGradient.setColorAt(0.6, Qt::blue);
      conicalGradient.setColorAt(0.9, Qt::yellow);
      conicalGradient.setColorAt(1.0, Qt::red);
      painter.setBrush(QBrush(conicalGradient));

      painter.drawRect(200, 200, 400, 200);
}

       * 注意:
       -> QConicalGradient的颜色是沿着圆周分布的，其中0.0和1.0在圆周上是相同的位置。
           -> QConicalGradient起始点(0度)是在三点钟方向。
           -> 为了达到最佳的渲染效果，可以启用QPainter的抗锯齿渲染提示(QPainter::Antialiasing)。