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. Drawing custom button using QPolygon
Forum Updated to NodeBB v4.3 + New Features

Drawing custom button using QPolygon

Scheduled Pinned Locked Moved Solved General and Desktop
12 Posts 4 Posters 972 Views 4 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.
  • MecanikM Offline
    MecanikM Offline
    Mecanik
    wrote on last edited by
    #1

    For a long time I have been keen to switch to QT from plain old WinApi and build cross-platform apps. Currently I`m still stuck with the "basics" of trying to create my own design.

    In the current layout I am working on everything is being drawn (title, system menu) from scratch. On the system menu part so far so good as I am able to draw a nice minimize/close button with hover states.

    However when I am trying to create a question mark button (?) or similar which will serve as the "About" button, no success.

    My current code will draw something similar to an envelope (lol):

    QPolygon border;
    
    border << QPoint(0, 0)
    	<< QPoint(width() - 5, 0)
    	<< QPoint(width() - 1, 4)
    	<< QPoint(width() - 1, height() - 1)
    	<< QPoint(0, height() - 1);
    
    QPolygon symbol1, symbol2;
    
    symbol1 << QPoint(4, 4)
    	<< QPoint(width() - 4, 4)
    	<< QPoint(width() - 4, 8)
    	<< QPoint(4, 8);
    
    symbol2 << QPoint(4, 8)
    	<< QPoint(width() - 4, 8)
    	<< QPoint(width() - 4, height() - 4)
    	<< QPoint(4, height() - 4);
    
    QColor gradientStart(0, 0, 0, 0);
    QColor gradientEnd(0, 0, 0, 220);
    
    QLinearGradient linearGrad(QPointF(0, 0), QPointF(0, height()));
    linearGrad.setColorAt(0, gradientStart);
    linearGrad.setColorAt(1, gradientEnd);
    
    QLinearGradient invertlinearGrad(QPointF(0, 0), QPointF(0, height()));
    invertlinearGrad.setColorAt(0, gradientEnd);
    invertlinearGrad.setColorAt(1, gradientStart);
    
    QPainter painter;
    painter.begin(m_Normal);
    
    painter.setPen(QPen(QColor(100, 100, 100)));
    painter.setBrush(QBrush(linearGrad));
    
    painter.setPen(QPen(Qt::white));
    painter.setBrush(QBrush(QColor(100, 100, 100)));
    
    painter.drawPolygon(symbol1);
    
    painter.setPen(QPen(QColor(100, 100, 100)));
    painter.setBrush(Qt::NoBrush);
    
    painter.drawPolygon(symbol2);
    
    painter.end();
    
    painter.begin(m_Hovered);
    
    painter.setPen(QPen(QColor(100,100,100)));
    painter.setBrush(QBrush(linearGrad));
    
    painter.setPen(QPen(Qt::red));
    painter.setBrush(QBrush(Qt::red));
    
    painter.drawPolygon(symbol1);
    
    painter.setPen(QPen(Qt::red));
    painter.setBrush(Qt::NoBrush);
    
    painter.drawPolygon(symbol2);
    
    painter.end();
    
    painter.begin(m_Clicked);
    
    painter.setPen(QPen(QColor(100, 100, 100)));
    painter.setBrush(QBrush(invertlinearGrad));
    
    painter.setPen(QPen(Qt::red));
    painter.setBrush(QBrush(Qt::red));
    
    painter.drawPolygon(symbol1);
    
    painter.setPen(QPen(Qt::red));
    painter.setBrush(Qt::NoBrush);
    
    painter.drawPolygon(symbol2);
    
    painter.end();
    

    If someone could provide a bit of feedback/suggestions/help it would be very much appreciated.

    Pl45m4P artwawA 2 Replies Last reply
    0
    • MecanikM Mecanik

      For a long time I have been keen to switch to QT from plain old WinApi and build cross-platform apps. Currently I`m still stuck with the "basics" of trying to create my own design.

      In the current layout I am working on everything is being drawn (title, system menu) from scratch. On the system menu part so far so good as I am able to draw a nice minimize/close button with hover states.

      However when I am trying to create a question mark button (?) or similar which will serve as the "About" button, no success.

      My current code will draw something similar to an envelope (lol):

      QPolygon border;
      
      border << QPoint(0, 0)
      	<< QPoint(width() - 5, 0)
      	<< QPoint(width() - 1, 4)
      	<< QPoint(width() - 1, height() - 1)
      	<< QPoint(0, height() - 1);
      
      QPolygon symbol1, symbol2;
      
      symbol1 << QPoint(4, 4)
      	<< QPoint(width() - 4, 4)
      	<< QPoint(width() - 4, 8)
      	<< QPoint(4, 8);
      
      symbol2 << QPoint(4, 8)
      	<< QPoint(width() - 4, 8)
      	<< QPoint(width() - 4, height() - 4)
      	<< QPoint(4, height() - 4);
      
      QColor gradientStart(0, 0, 0, 0);
      QColor gradientEnd(0, 0, 0, 220);
      
      QLinearGradient linearGrad(QPointF(0, 0), QPointF(0, height()));
      linearGrad.setColorAt(0, gradientStart);
      linearGrad.setColorAt(1, gradientEnd);
      
      QLinearGradient invertlinearGrad(QPointF(0, 0), QPointF(0, height()));
      invertlinearGrad.setColorAt(0, gradientEnd);
      invertlinearGrad.setColorAt(1, gradientStart);
      
      QPainter painter;
      painter.begin(m_Normal);
      
      painter.setPen(QPen(QColor(100, 100, 100)));
      painter.setBrush(QBrush(linearGrad));
      
      painter.setPen(QPen(Qt::white));
      painter.setBrush(QBrush(QColor(100, 100, 100)));
      
      painter.drawPolygon(symbol1);
      
      painter.setPen(QPen(QColor(100, 100, 100)));
      painter.setBrush(Qt::NoBrush);
      
      painter.drawPolygon(symbol2);
      
      painter.end();
      
      painter.begin(m_Hovered);
      
      painter.setPen(QPen(QColor(100,100,100)));
      painter.setBrush(QBrush(linearGrad));
      
      painter.setPen(QPen(Qt::red));
      painter.setBrush(QBrush(Qt::red));
      
      painter.drawPolygon(symbol1);
      
      painter.setPen(QPen(Qt::red));
      painter.setBrush(Qt::NoBrush);
      
      painter.drawPolygon(symbol2);
      
      painter.end();
      
      painter.begin(m_Clicked);
      
      painter.setPen(QPen(QColor(100, 100, 100)));
      painter.setBrush(QBrush(invertlinearGrad));
      
      painter.setPen(QPen(Qt::red));
      painter.setBrush(QBrush(Qt::red));
      
      painter.drawPolygon(symbol1);
      
      painter.setPen(QPen(Qt::red));
      painter.setBrush(Qt::NoBrush);
      
      painter.drawPolygon(symbol2);
      
      painter.end();
      

      If someone could provide a bit of feedback/suggestions/help it would be very much appreciated.

      Pl45m4P Offline
      Pl45m4P Offline
      Pl45m4
      wrote on last edited by
      #2

      @Mecanik

      What exactly is your question? If you get the wrong result, think about the points you chose.


      If debugging is the process of removing software bugs, then programming must be the process of putting them in.

      ~E. W. Dijkstra

      MecanikM 1 Reply Last reply
      1
      • Pl45m4P Pl45m4

        @Mecanik

        What exactly is your question? If you get the wrong result, think about the points you chose.

        MecanikM Offline
        MecanikM Offline
        Mecanik
        wrote on last edited by
        #3

        @Pl45m4 said in Drawing custom button using QPolygon:

        @Mecanik

        What exactly is your question? If you get the wrong result, think about the points you chose.

        My question is what points to draw to achieve a question mark? Or something similar that represents an "about" button.

        mrjjM 1 Reply Last reply
        0
        • MecanikM Mecanik

          @Pl45m4 said in Drawing custom button using QPolygon:

          @Mecanik

          What exactly is your question? If you get the wrong result, think about the points you chose.

          My question is what points to draw to achieve a question mark? Or something similar that represents an "about" button.

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

          @Mecanik
          Hi
          Why do you want it as a QPolygon ?

          Would be much easier just to use a SVG of a ?

          MecanikM 1 Reply Last reply
          0
          • mrjjM mrjj

            @Mecanik
            Hi
            Why do you want it as a QPolygon ?

            Would be much easier just to use a SVG of a ?

            MecanikM Offline
            MecanikM Offline
            Mecanik
            wrote on last edited by
            #5

            @mrjj said in Drawing custom button using QPolygon:

            @Mecanik
            Hi
            Why do you want it as a QPolygon ?

            Would be much easier just to use a SVG of a ?

            Well I already have the other icons (minimize, close) drawn like this, and frankly I already have a ton of SVG's for other items in the app. I would be happy if I could simply draw it... if possible.

            If not, I guess I will change it. Been googling around a lot but cannot find anything even close to what I need.

            mrjjM 1 Reply Last reply
            0
            • MecanikM Mecanik

              @mrjj said in Drawing custom button using QPolygon:

              @Mecanik
              Hi
              Why do you want it as a QPolygon ?

              Would be much easier just to use a SVG of a ?

              Well I already have the other icons (minimize, close) drawn like this, and frankly I already have a ton of SVG's for other items in the app. I would be happy if I could simply draw it... if possible.

              If not, I guess I will change it. Been googling around a lot but cannot find anything even close to what I need.

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

              @Mecanik

              Ok. well im not sure you can find a sample of points that makes up a `question mark.
              However, you could make a small tool that would show a ? image and the plot with mouse, storing the points and then reuse these.

              MecanikM 1 Reply Last reply
              0
              • mrjjM mrjj

                @Mecanik

                Ok. well im not sure you can find a sample of points that makes up a `question mark.
                However, you could make a small tool that would show a ? image and the plot with mouse, storing the points and then reuse these.

                MecanikM Offline
                MecanikM Offline
                Mecanik
                wrote on last edited by
                #7

                @mrjj said in Drawing custom button using QPolygon:

                small tool that would show a ? i

                To be honest, I have no idea how to make such a tool. If this is too complicated, I better let go of this idea and maybe create a simple box for maximize instead of about. lol.

                mrjjM 1 Reply Last reply
                0
                • MecanikM Mecanik

                  @mrjj said in Drawing custom button using QPolygon:

                  small tool that would show a ? i

                  To be honest, I have no idea how to make such a tool. If this is too complicated, I better let go of this idea and maybe create a simple box for maximize instead of about. lol.

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

                  @Mecanik

                  Hi
                  Well reuse this
                  https://wiki.qt.io/Clickable_QLabel

                  its a label that can be clicked.

                  On mousePressEvent the event has the pos of where its clicked.
                  so you could just qDebug() the x,y
                  then use QLables setpixmap to load a an image of a question mark
                  and then click around its outline

                  Then after you can get the x,y from the debug console and make them into code.
                  Should not take long to make.

                  1 Reply Last reply
                  1
                  • MecanikM Mecanik

                    For a long time I have been keen to switch to QT from plain old WinApi and build cross-platform apps. Currently I`m still stuck with the "basics" of trying to create my own design.

                    In the current layout I am working on everything is being drawn (title, system menu) from scratch. On the system menu part so far so good as I am able to draw a nice minimize/close button with hover states.

                    However when I am trying to create a question mark button (?) or similar which will serve as the "About" button, no success.

                    My current code will draw something similar to an envelope (lol):

                    QPolygon border;
                    
                    border << QPoint(0, 0)
                    	<< QPoint(width() - 5, 0)
                    	<< QPoint(width() - 1, 4)
                    	<< QPoint(width() - 1, height() - 1)
                    	<< QPoint(0, height() - 1);
                    
                    QPolygon symbol1, symbol2;
                    
                    symbol1 << QPoint(4, 4)
                    	<< QPoint(width() - 4, 4)
                    	<< QPoint(width() - 4, 8)
                    	<< QPoint(4, 8);
                    
                    symbol2 << QPoint(4, 8)
                    	<< QPoint(width() - 4, 8)
                    	<< QPoint(width() - 4, height() - 4)
                    	<< QPoint(4, height() - 4);
                    
                    QColor gradientStart(0, 0, 0, 0);
                    QColor gradientEnd(0, 0, 0, 220);
                    
                    QLinearGradient linearGrad(QPointF(0, 0), QPointF(0, height()));
                    linearGrad.setColorAt(0, gradientStart);
                    linearGrad.setColorAt(1, gradientEnd);
                    
                    QLinearGradient invertlinearGrad(QPointF(0, 0), QPointF(0, height()));
                    invertlinearGrad.setColorAt(0, gradientEnd);
                    invertlinearGrad.setColorAt(1, gradientStart);
                    
                    QPainter painter;
                    painter.begin(m_Normal);
                    
                    painter.setPen(QPen(QColor(100, 100, 100)));
                    painter.setBrush(QBrush(linearGrad));
                    
                    painter.setPen(QPen(Qt::white));
                    painter.setBrush(QBrush(QColor(100, 100, 100)));
                    
                    painter.drawPolygon(symbol1);
                    
                    painter.setPen(QPen(QColor(100, 100, 100)));
                    painter.setBrush(Qt::NoBrush);
                    
                    painter.drawPolygon(symbol2);
                    
                    painter.end();
                    
                    painter.begin(m_Hovered);
                    
                    painter.setPen(QPen(QColor(100,100,100)));
                    painter.setBrush(QBrush(linearGrad));
                    
                    painter.setPen(QPen(Qt::red));
                    painter.setBrush(QBrush(Qt::red));
                    
                    painter.drawPolygon(symbol1);
                    
                    painter.setPen(QPen(Qt::red));
                    painter.setBrush(Qt::NoBrush);
                    
                    painter.drawPolygon(symbol2);
                    
                    painter.end();
                    
                    painter.begin(m_Clicked);
                    
                    painter.setPen(QPen(QColor(100, 100, 100)));
                    painter.setBrush(QBrush(invertlinearGrad));
                    
                    painter.setPen(QPen(Qt::red));
                    painter.setBrush(QBrush(Qt::red));
                    
                    painter.drawPolygon(symbol1);
                    
                    painter.setPen(QPen(Qt::red));
                    painter.setBrush(Qt::NoBrush);
                    
                    painter.drawPolygon(symbol2);
                    
                    painter.end();
                    

                    If someone could provide a bit of feedback/suggestions/help it would be very much appreciated.

                    artwawA Offline
                    artwawA Offline
                    artwaw
                    wrote on last edited by
                    #9

                    @Mecanik Apart from what others said - and I agree with them - should you decide to keep your approach please take a look at QRawFont, you can obtain painter path for selected glyph, no need to reinvent the wheel for already defined symbols.

                    https://doc.qt.io/qt-5/qrawfont.html

                    For more information please re-read.

                    Kind Regards,
                    Artur

                    mrjjM 1 Reply Last reply
                    2
                    • artwawA artwaw

                      @Mecanik Apart from what others said - and I agree with them - should you decide to keep your approach please take a look at QRawFont, you can obtain painter path for selected glyph, no need to reinvent the wheel for already defined symbols.

                      https://doc.qt.io/qt-5/qrawfont.html

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

                      @artwaw
                      That is actually a much faster idea and more straight :)

                      artwawA 1 Reply Last reply
                      0
                      • mrjjM mrjj

                        @artwaw
                        That is actually a much faster idea and more straight :)

                        artwawA Offline
                        artwawA Offline
                        artwaw
                        wrote on last edited by
                        #11

                        @mrjj Not necessarily best one though. It depends on the fonts installed in the system removing that convenient layer of abstraction Qt provides. It is probably not portable between the platforms as by the rule of thumb you have to assume that the font you load is present - so to make it portable you have to ship the font with the program (can be resource) but that introduces potential licensing problems...
                        I would not go that way myself unless I know for certain that it is safe.

                        For more information please re-read.

                        Kind Regards,
                        Artur

                        1 Reply Last reply
                        0
                        • MecanikM Offline
                          MecanikM Offline
                          Mecanik
                          wrote on last edited by
                          #12

                          Well, it's been quite a while. Whilst you guys gave me the ideas here, especially @artwaw with the QRawFont; someone else helped me achieve this goal.

                          Even more, there is a nice little tool to help you generate the code points and draw whatever!

                          https://stackoverflow.com/a/73035353/6583298

                          Problem solved :)

                          1 Reply Last reply
                          1

                          • Login

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