Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Draw stretched radial gradient
Forum Updated to NodeBB v4.3 + New Features

Draw stretched radial gradient

Scheduled Pinned Locked Moved Unsolved General and Desktop
12 Posts 2 Posters 3.1k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • NiagarerN Offline
    NiagarerN Offline
    Niagarer
    wrote on last edited by
    #1

    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!

    1 Reply Last reply
    0
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #2

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

      NiagarerN 1 Reply Last reply
      0
      • mrjjM mrjj

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

        NiagarerN Offline
        NiagarerN Offline
        Niagarer
        wrote on last edited by Niagarer
        #3

        @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.

        mrjjM 1 Reply Last reply
        0
        • NiagarerN 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.

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by mrjj
          #4

          @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.

          NiagarerN 1 Reply Last reply
          0
          • mrjjM 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.

            NiagarerN Offline
            NiagarerN Offline
            Niagarer
            wrote on last edited by
            #5

            @mrjj
            Yes. Just like the right picture shows.

            mrjjM 1 Reply Last reply
            0
            • NiagarerN Niagarer

              @mrjj
              Yes. Just like the right picture shows.

              mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #6

              @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

              NiagarerN 1 Reply Last reply
              0
              • mrjjM 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

                NiagarerN Offline
                NiagarerN Offline
                Niagarer
                wrote on last edited by Niagarer
                #7

                @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...)

                mrjjM 1 Reply Last reply
                0
                • NiagarerN 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...)

                  mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

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

                  NiagarerN 2 Replies Last reply
                  0
                  • mrjjM mrjj

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

                    NiagarerN Offline
                    NiagarerN Offline
                    Niagarer
                    wrote on last edited by
                    #9
                    This post is deleted!
                    1 Reply Last reply
                    0
                    • mrjjM mrjj

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

                      NiagarerN Offline
                      NiagarerN Offline
                      Niagarer
                      wrote on last edited by Niagarer
                      #10

                      @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.

                      1 Reply Last reply
                      0
                      • mrjjM Offline
                        mrjjM Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on last edited by mrjj
                        #11

                        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.

                        1 Reply Last reply
                        0
                        • mrjjM Offline
                          mrjjM Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on last edited by mrjj
                          #12

                          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

                          1 Reply Last reply
                          0

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved