QT——自定义控件绘图

一.QPaintEvent绘图事件

QPaintEvent是QT中一个重要的类，专门用于绘图事件。当QT视图组件需要重绘制自己的一部分时，就会产生该事件，通常发生在以下几种情况。

窗口第一次显示时：当窗口或控件第一次出现在屏幕中，系统或窗口就会生成QPaintEvent事件，通知窗口进行自身的绘制
窗口大小改变时：当用户改变窗口的大小时，窗口中的内容通常需要重新绘制以适应新的尺寸
窗口部分被遮挡后又重新显示时：如果窗口被其他窗口遮挡，然后又重新露出来，被遮挡的部分通常需要重新绘制
手动请求重绘：通过调用QWidget的update()或repaint()方法，可以手动触发重绘事件。在Qt应用程序中，通常通过重写QWidget的paintEvent(QPaintEvent*)方法来处理绘制逻辑。

在Qt应用程序中，通常通过重写QWidget的paintEvent(QPaintEvent*)方法来处理绘制逻辑。

二.QPainter画家

2.1绘制基本图形

QPainter是Qt库中用于在屏幕上进行绘画的类。它提供了各种绘制功能，比如画线、画图形、画文本等。

1.初始化QPainter：首先，您需要一个QPaintDevice，比如一个QWidget或QPixmap，然后使用它来初始化QPainter对象。

QPainter painter(this); //假设在QWidget的子类中

2.设置画笔和画刷：您可以设置画笔（用于描边）和画刷（用于填充）的颜色、样式等。

/*QPen pen(Qt::green, 4);
painter.setPen(pen);*/painter.setPen(Qt::blue);                             //设置画笔颜色为蓝色
painter.setBrush(Qt::yellow);                         //设置画刷颜色为黄色(填充色)
painter.setRenderHint(QPainter::Antialiasing, true);  //启用抗锯齿

3.绘制图形：使用QPainter的方法来绘制线条、矩形、圆形、文本等。

painter.drawLine(10, 10, 100, 100);         //1.画线
painter.drawLine(QLine(10, 10, 100, 100));
painter.drawLine(QPoint(10, 10), QPoint(100, 100));painter.drawRect(10, 10, 100, 100);         //2.画矩形
painter.drawRect(QRect(10, 10, 100, 100));painter.drawText(10, 10, "Hello, Qt!");     //3.画文本
painter.drawText(QPoint(10,10), "Hello, Qt!");
//在屏幕正中央画文本
painter.drawText(rect().center(), "Hello, Qt!");painter.drawEllipse(QRect(10,10,100,100));  //4.在矩形区域内画圆形或椭圆
painter.drawEllipse(10,10,100,100);
painter.drawEllipse(QPoint(20,30), 80, 80);painter.drawRect(QRect(20,20,200,100));     //5.在矩形区域内画扇形
painter.drawPie(QRect(20,20,200,100), 45*16, 90*16);
painter.drawPie(QRect(20,20,200,100), -45*16, -90*16);
//第二个参数是起始角度，第三个参数是跨度

QT中是以1/16度为基本单位的，起始角度和跨度同时为正是逆时针绘制，同时为负是顺时针绘制

起始角度：0 跨度：180 起始角度：45 跨度：135 起始角度：0 跨度：360

2.2渐变色

1.线性渐变

QLinearGradient是Qt框架中用于创建线性渐变的类。线性渐变是一种从一个颜色平滑过渡到另一个颜色的效果，其变化沿着两个点之间的直线进行。这种渐变在图形用户界面设计中非常常见，用于添加深度、立体感或动态效果。

1. 创建 QLinearGradient 对象：指定渐变的起点和终点坐标。

从左上顶点到右下顶点进行渐变

QLinearGradient gradient(QPointF(10, 10), QPointF(50, 50));

从左边到右边进行渐变（图形的最左边的中间部分开始到最右边的中间部分结束）

QLinearGradient gradient(QPoint(100,110), QPoint(200, 110));

2. 设置颜色停靠点：在渐变线上定义颜色和相应的位置。可以设置多个颜色停靠点来创建更复杂的渐变效果.

// 设置颜色停靠点：在渐变线上定义颜色和相应的位置
gradient.setColorAt(0.0, Qt::red);    // 起点颜色为红色
gradient.setColorAt(0.5, Qt::green);  // 中间颜色为绿色
gradient.setColorAt(1.0, Qt::blue);   // 终点颜色为蓝色

3. 使用渐变创建一个QPen（边框为渐变色）或QBrush（填充为渐变色），然后绘制图形

QPen pen;
pen.setBrush(gradient);
pen.setWidth(4); // 设置线条宽度
painter.setPen(pen);// 绘制渐变色边框的矩形
painter.drawRect(10, 10, 200, 200);

// 使用渐变创建 QPen
painter.setBrush(gradient);
painter.setPen(Qt::noPen());// 绘制渐变色边框的矩形
painter.drawRect(10, 10, 200, 200);

2.径向渐变

QRadialGradient是Qt框架中用于创建径向渐变的类。径向渐变是一种从中心点向外部辐射的颜色渐变，通常在中心点有一种颜色，而向外围渐渐变化为另一种颜色。这种渐变非常适合用于模拟光源、阴影或创建圆形的立体感。

1.创建QRadialGradient对象：指定渐变的中心点、半径以及焦点（可选）。

2.设置颜色停靠点：在径向渐变中定义颜色和对应的位置。

3.使用渐变创建QBrush：利用QRadialGradient对象创建一个QBrush，然后用它在QPainter中进行绘制。

QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true); // 启用抗锯齿// 创建对象，设置中心点、半径和焦点（可选）
QRadialGradient gradient(rect().center(), 100);// 设置颜色停靠点：在径向渐变中定义颜色和对应的位置
gradient.setColorAt(0.0, QColor(255, 206, 232));  // 中间颜色淡粉色
gradient.setColorAt(1.0, QColor(255, 155, 170));  // 边缘为深粉色// 使用渐变创建 QBrush
painter.setBrush(gradient);
painter.drawEllipse(rect().center(), 100, 100);  // 绘制圆形

3.圆锥形渐变

QConicalGradient是Qt框架中用于创建圆锥形渐变的类。圆锥渐变是一种渐变效果，其中颜色沿着圆锥的轮廓变化，类似于旋转颜色轮。这种渐变以其中心点为基点，颜色沿圆周分布，可以创建出富有动感的视觉效果。

在使用时，角度是按照顺时针方向测量的，起始点（0度）通常在三点钟方向。QConicalGradient非常适合用于创建旋转或动态效果的图形，例如加载指示器、进度条或任何需要圆周颜色变化的场景。

1. 创建 QConicalGradient 对象： 指定渐变的中心点和起始角度。

2. 设置颜色停靠点：为渐变添加不同的颜色和对应的位置（角度）。

3. 使用渐变创建 QBrush：使用这个渐变对象来创建一个 QBrush，然后应用到 QPainter 中进行绘图。

QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true); // 启用抗锯齿// 1. 创建 QConicalGradient 对象：指定渐变的中心点和起始角度。
QConicalGradient gradient(width() / 2, height() / 2, 0);// 2. 设置颜色停靠点：为渐变添加不同的颜色和对应的位置（角度）。
gradient.setColorAt(0.0, QColor(255, 182, 193));    // 中心颜色为浅粉色
gradient.setColorAt(0.5, QColor(255, 160, 122));    // 中间颜色为浅橙色
gradient.setColorAt(1.0, QColor(173, 216, 230));    // 边缘颜色为浅蓝色
// 3. 使用渐变创建 QBrush：使用这个渐变对象来创建一个 QBrush，然后应用到 QPainter 中进行绘图。
painter.setBrush(gradient);
painter.drawEllipse(rect());                        // 绘制圆形