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)。