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();

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