IOT example, circular progress bar: Use a pen instead of a brush

That way we don't have to draw two circles, and we can in addition
use a conical gradient.
This commit is contained in:
Peter Hartmann 2021-08-09 16:30:06 +02:00
parent 279ec9537c
commit f3874c71fa
2 changed files with 8 additions and 25 deletions

View File

@ -71,22 +71,7 @@ void CircularProgressBar::paint( QPainter* painter )
painter->setRenderHint( QPainter::Antialiasing, true );
#if 1
QRectF outerRect( {0, 0}, size );
painter->setBrush( m_ringGradient );
painter->setPen( m_backgroundColor );
painter->drawEllipse( outerRect );
painter->setBrush( m_gradient );
painter->drawPie( outerRect, startAngle, endAngle );
painter->setBrush( m_backgroundColor );
painter->setPen( m_backgroundColor );
QRectF innerRect( width() / 2, width() / 2, size.width() - width(), size.height() - width() );
painter->drawEllipse( innerRect );
#else
const qreal w = 10;
const qreal w = 8.53;
const QRectF r( 0.5 * w, 0.5 * w, size.width() - w, size.height() - w );
@ -100,12 +85,9 @@ void CircularProgressBar::paint( QPainter* painter )
painter->setPen( QPen( g1, w, Qt::SolidLine, Qt::FlatCap ) );
painter->drawArc( r, startAngle, 16 * 360 );
QConicalGradient g2( r.center(), 0 );
g2.setColorAt( 0.0, Qt::red );
g2.setColorAt( 0.5, Qt::blue );
g2.setColorAt( 1.0, Qt::red );
QConicalGradient g2( r.center(), 90 );
g2.setStops( m_gradient.stops() );
painter->setPen( QPen( g2, w, Qt::SolidLine, Qt::FlatCap ) );
painter->drawArc( r, startAngle, endAngle );
#endif
}

View File

@ -104,10 +104,11 @@ void Skin::initHints( const Palette& palette )
ed.setColor( TopBarItem::Item3 | QskAspect::TextColor, "#f99055" );
ed.setColor( TopBarItem::Item4 | QskAspect::TextColor, "#6776ff" );
ed.setGradient( TopBarItem::Item1, { Qt::Horizontal, "#FF5C00", "#FF3122" } );
ed.setGradient( TopBarItem::Item2, { Qt::Horizontal, "#6776FF", "#6100FF" } );
ed.setGradient( TopBarItem::Item3, { Qt::Horizontal, "#FFCE50", "#FF3122" } );
ed.setGradient( TopBarItem::Item4, { Qt::Horizontal, "#6776FF", "#6100FF" } );
// conical gradients are counterclockwise, so specify the 2nd color first:
ed.setGradient( TopBarItem::Item1, { Qt::Horizontal, "#FF3122", "#FF5C00" } );
ed.setGradient( TopBarItem::Item2, { Qt::Horizontal, "#6100FF", "#6776FF" } );
ed.setGradient( TopBarItem::Item3, { Qt::Horizontal, "#FF3122", "#FFCE50" } );
ed.setGradient( TopBarItem::Item4, { Qt::Horizontal, "#6100FF", "#6776FF" } );
ed.setFontRole( TimeTitleLabel::Text, Skin::TitleFont );