Qt聚光灯效果 仿彩色弹幕字体

    昨天在B站时发现一个介绍使用CSS聚光灯的视频（链接：https://www.bilibili.com/video/av97382171）。趁着明天不用上班，晚上来实现一下。虽说我不确定这叫不叫做聚光灯效果Σ( ° △ °|||)。

    废话少说，先上图。

    简单介绍下原理。绘画过程分3层

1. 绘制灰度文字

   //1绘制灰色文字
   void Spotlight::drawGrayText(QPainter *painter)
   {
       painter->save();
   
       int width = painter->fontMetrics().width(strText);
       int height = painter->fontMetrics().height();
       painter->setPen(QColor(100, 100, 100));
   
       QRectF textRect(-width/2.0f, -height/2.0, width, height);
       painter->drawText(textRect, Qt::AlignCenter, strText);
   
       painter->restore();
   }

2. 绘制光圈

   void Spotlight::drawLightCircular(QPainter *painter)
   {
       painter->save();
       qDebug() << spotlightPoint;
   
       QPainterPath coverCircle;
       coverCircle.addEllipse(spotlightPoint, fLightRadius, fLightRadius);
   
       QRadialGradient gradient(spotlightPoint, fLightRadius);
       gradient.setColorAt(0, QColor(255, 255, 255));
       gradient.setColorAt(0.5, QColor(255, 255, 255, 150));
       gradient.setColorAt(1, QColor(255, 255, 255, 0));
   
       painter->setBrush(QBrush(gradient));
   
       painter->setPen(Qt::NoPen);
   
       painter->drawPath(coverCircle);
   
   
       painter->restore();
   }

    

3. 在区域内绘制彩色文字

   void Spotlight::drawColorText(QPainter *painter)
   {
       painter->save();
   
       QPainterPath coverCircle;
       coverCircle.addEllipse(spotlightPoint, fLightRadius, fLightRadius);
       painter->setClipPath(coverCircle);
   
       int width = painter->fontMetrics().width(strText);
       int height = painter->fontMetrics().height();
   
       QLinearGradient  gradient(-width/2.0f, 0.0f, width/2.0f, 0.0f);
       gradient.setColorAt(0, QColor(255, 0, 0));
       gradient.setColorAt(1.0/4, QColor(200, 0, 55));
       gradient.setColorAt(1/2, QColor(123, 0, 123));
       gradient.setColorAt(3.0/4, QColor(50, 0, 123));
       gradient.setColorAt(1, QColor(0, 0, 255));
   
       QBrush brush(gradient);
       painter->setPen(QPen(brush, 2));
   
       QRectF textRect(-width/2.0f, -height/2.0, width, height);
       painter->drawText(textRect, Qt::AlignCenter, strText);
   
       painter->restore();
   }

   demo链接https://download.youkuaiyun.com/download/wojiaoanchao/12301089