qt文字光晕效果的一种实现

    直接把我qtcn的文章贴过来了。

    目前只实现了文字外面有单一颜色轮廓的效果,那种渐变发光的效果还不知道如何实现。

QStringList text_lines = ......;
QString text = weather_lines.join("n");

    计算绘制所有文字所需的尺寸

    QFont f;
    f.setFamily(mFontName);
    f.setPixelSize(mFontSize);
    f.setWeight(QFont::Black);

    QFontMetrics fm(f);
    int textflags = Qt::AlignLeft | Qt::TextExpandTabs;
    QSize textsize = fm.size(textflags, text);

    图片边缘留空白

    int margin = 8;
    textsize.setWidth(textsize.width() + 2*margin);
    textsize.setHeight(textsize.height() + 2*margin);

    addText前面的参数是文字基线的位置
    addText会把加入的文字当成一行,无视换行符,所以要一行一行加入,这也是前面用QStringList的原因.

    QPainterPath pp(QPointF(margin, margin));
    qreal px = margin, py = margin + fm.ascent();
    foreach(const QString& line, text_lines) {
        pp.addText(px, py, f, line);
        py += fm.lineSpacing();
    }

    先填充文字轮廓里的区域,然后在此区域里绘制文字,于是就有了类似光晕的效果了.

    QPainterPathStroker pps;
    pps.setCapStyle(Qt::RoundCap);
    //pps.setJoinStyle(Qt::MiterJoin);
    pps.setWidth(3);
    QPainterPath path = pps.createStroke(pp).united(pp).simplified();

    这里光晕的颜色去文字的反色淡一点的颜色

    QColor glow_color = QColor(255-mFontColor.red(), 255-mFontColor.green(), 255-mFontColor.blue()).lighter(168);

    准备绘制光晕

    QPixmap textpixmap(textsize);
    textpixmap.fill(QColor(0, 0, 0, 0));
    
    QPainter p(&textpixmap);
    p.setFont(f);
    
    p.fillPath(path, glow_color);
    
    p.setPen(glow_color.lighter(88));
    p.drawPath(path);

    绘制里面的文字

    p.setPen(mFontColor);
    p.drawText(QRect(margin, margin, textpixmap.width(), textpixmap.height()), textflags, text);
    p.end();

最后来看下效果图,我在做天气信息显示时用到的


你可能感兴趣的:(Qt,C++,图形图像)