qt文字コロナ効果の実現
私のqtcnの文章を直接貼ってくれました.
現在は文字の外に単一の色の輪郭がある効果しか実現されておらず、そのグラデーションの効果はどのように実現するか分からない.
すべてのテキストを描画するために必要な寸法の計算
画像のエッジに空白を残す
addTextの前のパラメータはテキストベースラインの位置です
addTextは入れた文字を1行として改行を無視するので、1行1行入れるのも、前にQStringListを使った理由です.
まず文字の輪郭の中の領域を埋めて、それからこの領域の中で文字を描いて、そこでコロナのような効果がありました.
ここの光の色は文字の反色を除いて少し薄い色です
グローの描画の準備
テキストの描画
最後に効果図を見てみましょう.天気情報の表示に使いました.
現在は文字の外に単一の色の輪郭がある効果しか実現されておらず、そのグラデーションの効果はどのように実現するか分からない.
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は入れた文字を1行として改行を無視するので、1行1行入れるのも、前に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();
最後に効果図を見てみましょう.天気情報の表示に使いました.