Draw stretched radial gradient

Niagarer

Hey,
I want to draw a gradient like an ellipse with different width and height, like this:
https://bugreports.qt.io/secure/attachment/46945/expected.png
How can I do this with QGradients? I can't find something like rx and ry for a QRadialGradient object.
Thanks for answers!

mrjj

Hi
Im not sure gradient can do that if i understand correctly
alt text

Niagarer

@mrjj
Oh. Hmm.
Is there a similar and feasible solution for that? I just wanted to use a QGradient and then set the Brush of a painter to it.

mrjj

@Niagarer
The one you showed are sort of screwed .
you mean you want to have a elliptical instead of round, correct ?
if yes, please see this sample
http://doc.qt.io/qt-5/qtwidgets-painting-painterpaths-example.html

you can use a path for that i think.

Niagarer

@mrjj
Yes. Just like the right picture shows.

mrjj

@Niagarer
so u need it also screwed and ellipse at same time ?
You can try with
http://doc.qt.io/qt-5/qtwidgets-painting-painterpaths-example.html

Niagarer

@mrjj
But this example also shows only linear gradients, not like an ellipse:

void RenderArea::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
//! [8] //! [9]
    painter.scale(width() / 100.0, height() / 100.0);
    painter.translate(50.0, 50.0);
    painter.rotate(-rotationAngle);
    painter.translate(-50.0, -50.0);

//! [9] //! [10]
    painter.setPen(QPen(penColor, penWidth, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
    QLinearGradient gradient(0, 0, 0, 100);
    gradient.setColorAt(0.0, fillColor1);
    gradient.setColorAt(1.0, fillColor2);
    painter.setBrush(gradient);
    painter.drawPath(path);
}

Is it possible to use a temporary painter, set the brush, scale the painter and use the scaled brush for my actual painter (or anything like that...)

mrjj

@Niagarer
yes i wanted you to play with paths and the QRadialGradient to see
if it comes close enough to what you need.

Niagarer

This post is deleted!

Niagarer

@mrjj
Ok, the result should look A BIT like this:
0_1506767624545_Qt 14.png
If it is not possible to rotate it without huge effort, I don't need it, but I would appreciate it.

mrjj

Hi
It does look like the
alt text
from
http://doc.qt.io/qt-5/qtwidgets-painting-painterpaths-example.html
if you use a QRadialGradient instead.

But not sure it will looked stretched in same was the gfx but please try.

mrjj

Hi
I was wrong. You dont need to use paths or any extra. it will scale to the area
and no longer be circular.

background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(9, 41, 4, 255), stop:0.085 rgba(2, 79, 0, 255), stop:0.19 rgba(50, 147, 22, 255), stop:0.275 rgba(236, 191, 49, 255), stop:0.39 rgba(243, 61, 34, 255), stop:0.555 rgba(135, 81, 60, 255), stop:0.667 rgba(121, 75, 255, 255), stop:0.825 rgba(164, 255, 244, 255), stop:0.885 rgba(104, 222, 71, 255), stop:1 rgba(93, 128, 0, 255));

alt text