前言

重点了解 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的描边方法,轻易可以创造出一些艺术字。

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐