简介: 再进行空间的重绘时候,绘画进度条QProgressBar
,需要在中间显示(可以根据opt->)进度的百分比文字,且刻度为文字中间的时候,需要左右两侧有着不一样的颜色(左边白色,右边黑色),即:进度条到达的位置文字百分比为白色显示。根据给定(任意)的QString
文本, 获取其最小矩形。
[TOC]
本文初发于 “偕臧的小站“,同步转载于此。
需求背景:
绘画进度条,需要在中间显示进度的百分比文字,且刻度为文字中间的时候,需要左右两侧有着不一样的颜色(左边白色,右边黑色),即:进度条到达的位置文字百分比为白色显示。
希望达到的预期效果如下:
静态图:
动图注意中间文字和百分比的颜色变化(因为gif帧数,故实连续渐变色际参考上图):
源码没修改之前:
if (const QStyleOptionProgressBar *progBar = qstyleoption_cast<const QStyleOptionProgressBar *>(opt)) {
QRect rect = progBar->rect;
rect.setWidth(rect.width() * 0.28);
rect.setHeight(rect.height() * 0.57);
rect.moveCenter(progBar->rect.center());
double val = progBar->progress * 1.0 / (progBar->maximum - progBar->minimum);
p->setPen(getColor(opt, DPalette::HighlightedText));
QString str = "已经下载" + QString::number(val * 100, 'f', 2) + "%(点击暂停)";
p->drawText(rect, Qt::AlignCenter, str);
p->setPen(Qt::red);
p->setBrush(Qt::NoBrush);
p->drawRect(rect);
}
效果缺陷如图:
根据QString文本获取其矩形fontMetrics:
修改之后代码:
double val = progBar->progress * 1.0 / (progBar->maximum - progBar->minimum);
QString strPercent = QString::number(val * 100, 'f', 2) + "%";
QString str = "已下载" + strPercent + "(点击暂停)";
QSize size = progBar->fontMetrics.size(Qt::TextSingleLine, str);
QRect rect(progBar->rect.topLeft(), size);
rect.moveCenter(progBar->rect.center());
根据给定(任意)的QString, 获取其矩形大小,其效果如下:
设置画笔渐变色(文字渐变色):
文字有渐变的需求(画笔采用渐变色):
QPointF pointStart(rect.left(), rect.center().y());
QPointF pointEnd(rect.right(), rect.center().y());
QLinearGradient linear(pointStart, pointEnd);
linear.setColorAt(0, getColor(opt, DPalette::HighlightedText));
linear.setColorAt(division, getColor(opt, DPalette::HighlightedText));
linear.setColorAt(division + 0.01, getColor(opt, DPalette::ButtonText));
linear.setColorAt(1, getColor(opt, DPalette::ButtonText));
linear.setSpread(QGradient::PadSpread);
p->setPen(QPen(QBrush(linear), 1)); //设置画笔渐变 【重点】
设置画刷渐变色(图案渐变色):
图片有渐变的需求(画刷采用渐变色):
//顺变 此处贡献出, 渐变配色方案:
QPointF pointStart(rect.left(), rect.center().y());
QPointF pointEnd(rect.right(), rect.center().y());
QLinearGradient linear(pointStart, pointEnd);
linear.setColorAt(0, QColor("#ff6e7f"));
linear.setColorAt(1, QColor("#bfe9ff"));
linear.setSpread(QGradient::PadSpread);
p->setBrush(linear); //设置画刷渐变 【重点】
p->drawPath(inter);
QFontMetrics::boundingRect()获取文本的矩形位置:
相当于计算 (没修改的源码) 中的2-5行 的计算rect 的一种快捷方法:
//获取字符窜的最小矩形,和其在指定矩形的相对位置QFontMetrics::boundingRect()
const QStyleOptionProgressBar *progBar = qstyleoption_cast<const QStyleOptionProgressBar *>(opt);
double val = progBar->progress * 1.0 / (progBar->maximum - progBar->minimum);
int drawWidth = val * opt->rect.width();
//此rect矩形大小是通过文本得到最小的矩形; 其位置是相对于progBar->rect的
QRect rect = progBar->fontMetrics.boundingRect(progBar->rect, progBar->textAlignment, progBar->text);
效果如图: