Qt 字体（02）：利用渐变生成多彩字体

---

前言

重点了解 Qt 如何绘制文本的笔画或者轮廓线，QPainter::strokePath() 方法。
另外需要了解 QFontMetrics 、2D绘图的变换、径向渐变  等知识，本文不暂开介绍。

---

一、如何绘制文本的笔画或者轮廓线？

Qt绘制笔画路径，包括字体的轮廓线（描边），有个统一的方式，使用 QPainter::strokePath() ，需要额外指定画笔。

• void QPainter::strokePath(const QPainterPath &path, const QPen &pen) // 描边函数

• 定义一个QPainterPath，这个类型相当于任意的几何图形。

• 加入需要显示的字符以及 字符对应的QFont

• 使用QFontMetrics 找到居中显示的尺寸

• 填充径向渐变效果

二、效果图

• 文字描边有两层，下面一层用黑色填充，充当阴影
• 上面一层作为显示的效果
• QRect boundingRect(const QRect &rect, int flags, const QString &text, int tabStops = 0, int *tabArray = nullptr) 这个函数比较方便，用起来很灵活。
• QPainter 进行适当的平移变换，方便作图。

三、主要部分代码如下：

#include "Widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    resize(800,400);
    setWindowTitle("Text Stroke");
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);

    QFont font = painter.font();
    font.setPixelSize(200);


    QRadialGradient g(width()/2,height()/2,100);
    g.setSpread(QGradient::ReflectSpread);
    double s = 6;
    g.setColorAt(0/s,Qt::yellow);
    g.setColorAt(1/s,Qt::green);
    g.setColorAt(2/s,Qt::blue);
    g.setColorAt(3/s,Qt::red);
    g.setColorAt(4/s,Qt::magenta);
    g.setColorAt(5/s,Qt::cyan);
    g.setColorAt(6/s,Qt::white);

    QString str = "hg麒麟2";
    QFontMetrics fm(font);
    QRect rect = fm.boundingRect(this->rect(),Qt::AlignCenter,str);

    QPainterPath path;
    path.addText(rect.x(),rect.y()+ fm.ascent() ,font,str);

    painter.setOpacity(0.5);
    painter.fillPath(path,Qt::black);
    painter.strokePath(path,QPen(Qt::black,6));

    painter.save();
    painter.setOpacity(1);
    painter.translate(-4,-3);
    painter.fillPath(path,g);
    painter.strokePath(path,QPen(Qt::darkMagenta,4));
    painter.restore();

    painter.setOpacity(0.1);
    painter.fillRect(rect,g);

}

void Widget::closeEvent(QCloseEvent *)
{
    this->grab().save("E:\\Users\\Desktop\\Qt字体渐变20200922.png");
}

---

总结

本文的重点就是Qt的描边方法，轻易可以创造出一些艺术字。