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. How to draw "Draw Arc Ticks".

How to draw "Draw Arc Ticks".

Scheduled Pinned Locked Moved Solved General and Desktop
14 Posts 2 Posters 1.5k 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.
  • I Offline
    I Offline
    IknowQT
    wrote on last edited by
    #1
    void wCtrl_Indicator::paintEvent(QPaintEvent* e)
    {
    
    	QPainter		painter(this);
    	
    	drawBackGround(&painter);
    	drawTicks(&painter);
    }
    
    void wCtrl_Indicator::drawTicks(QPainter* painter)
    {
    	QRect		drawingRect(this->rect());
    	//drawingRect.adjusted(15, 15, -20, -20);
    
    	QBrush		brushActive(Qt::red);
    	QPen		pen(QBrush(brushActive), 2);
    	pen.setCapStyle(Qt::FlatCap);
    
    	painter->setPen(pen);
    	painter->setBrush(brushActive);
    	painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
    	
    	qreal dStartAngle	= 225;
    	qreal dEndAngle		= -45;
    	painter->rotate(-dStartAngle);
    
    	qreal dAngleStep = (-dEndAngle + dStartAngle) / m_nStep;
    	for (int i = 0; i < m_nStep; i++)
    	{
    		//painter->drawLine((drawingRect.center().x(), drawingRect.center().y());
    		painter->drawLine(30, 0, 40, 0);
    		painter->rotate(dAngleStep);
    	}
    }
    
    void wCtrl_Indicator::drawBackGround(QPainter* painter)
    {
    	QRect		drawingRect(0, 0, this->size().height(), this->size().height());
    	QBrush		brushBackgnd(QColor(63, 67, 70));
    	QPen		pen(QBrush(brushBackgnd), 10);
    	pen.setCapStyle(Qt::FlatCap);
    
    	painter->setPen(pen);
    	painter->setBrush(brushBackgnd);
    	painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
    	painter->drawArc(drawingRect.adjusted(15, 15, -20, -20), 90 * 16, ConvertAngle(m_nMax) * 16);
    }
    

    5a70d44c-53f6-4ef0-ac5e-ffb46df9fa08-image.png
    I want to draw Tick, how can I approach it?

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mpergand
      wrote on last edited by
      #7

      painter.drawEllipse(rect().center(),20,20);

      Put this line before any translation.

      I 1 Reply Last reply
      0
      • I Offline
        I Offline
        IknowQT
        wrote on last edited by
        #2

        09ca9361-8863-4aa6-8bb3-941588ad2d09-image.png

        How do I calculate the position?

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mpergand
          wrote on last edited by mpergand
          #3
            QPoint c=rect().center();
                  painter.translate(c);
                  painter.rotate(-225);
                  float step=20;
                  
                  for(int s=0;s<=step;s++)
                      {
                      painter.drawLine(30,0,40,0);
                      painter.rotate(270/step);
                      }
                  
                  float val=50; 
                  float maxVal=100;    // range 0-100
                  painter.resetTransform();
                  painter.translate(c);
                  painter.rotate(-225);
                  painter.rotate(270*val/maxVal);
                  painter.drawLine(00,0,40,0);
          

          [EDIT] better code and adding current value position

          I 1 Reply Last reply
          0
          • M mpergand
              QPoint c=rect().center();
                    painter.translate(c);
                    painter.rotate(-225);
                    float step=20;
                    
                    for(int s=0;s<=step;s++)
                        {
                        painter.drawLine(30,0,40,0);
                        painter.rotate(270/step);
                        }
                    
                    float val=50; 
                    float maxVal=100;    // range 0-100
                    painter.resetTransform();
                    painter.translate(c);
                    painter.rotate(-225);
                    painter.rotate(270*val/maxVal);
                    painter.drawLine(00,0,40,0);
            

            [EDIT] better code and adding current value position

            I Offline
            I Offline
            IknowQT
            wrote on last edited by IknowQT
            #4

            @mpergand

            8a103451-842e-4022-bb52-6e2a3fcfb2e1-image.png

            When drawing an oval progress, it seems to be a problem due to increasing the pen thickness and changing the drawing right (adjusted), but can you automatically adjust the center even if the thickness is increased?

            405c2f6e-7cef-4ac1-bdde-427e490e2c60-image.png

            M 1 Reply Last reply
            0
            • I IknowQT

              @mpergand

              8a103451-842e-4022-bb52-6e2a3fcfb2e1-image.png

              When drawing an oval progress, it seems to be a problem due to increasing the pen thickness and changing the drawing right (adjusted), but can you automatically adjust the center even if the thickness is increased?

              405c2f6e-7cef-4ac1-bdde-427e490e2c60-image.png

              M Offline
              M Offline
              mpergand
              wrote on last edited by
              #5

              @IknowQT said in How to draw "Draw Arc Ticks".:

              When drawing an oval progress, it seems to be a problem due to increasing the pen thickness and changing the drawing right (adjusted), but can you automatically adjust the center even if the thickness is increased?

              Sorry I don't understand what you want to do.

              I 1 Reply Last reply
              0
              • M mpergand

                @IknowQT said in How to draw "Draw Arc Ticks".:

                When drawing an oval progress, it seems to be a problem due to increasing the pen thickness and changing the drawing right (adjusted), but can you automatically adjust the center even if the thickness is increased?

                Sorry I don't understand what you want to do.

                I Offline
                I Offline
                IknowQT
                wrote on last edited by IknowQT
                #6

                @mpergand

                I'm not good at English, so please understand

                I want to move the ellipse to the center

                ============================================

                Add
                The move to the center was successful, but why is the ellipse cut off to the sides?

                void wCtrl_Indicator::drawBackGround(QPainter* painter)
                {
                	//QRect		drawingRect(this->rect());
                	QPoint		p = this->rect().center();
                	QRect drawingRect(1, 1, this->size().width(), this->size().height());
                	QBrush		brushBackgnd(QColor(63, 67, 70));
                	QPen		pen(QBrush(brushBackgnd), 10);
                	pen.setCapStyle(Qt::FlatCap);
                
                	painter->setPen(pen);
                	painter->setBrush(brushBackgnd);
                	painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
                	painter->drawArc(drawingRect, 90 * 16, ConvertAngle(m_nMax) * 16);
                	/*painter->drawArc(drawingRect.center().x(), drawingRect.center().y(), this->size().width(), this->size().height(),
                		90 * 16, ConvertAngle(m_nMax) * 16);*/
                }
                

                I think there's a problem with drawing right.

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mpergand
                  wrote on last edited by
                  #7

                  painter.drawEllipse(rect().center(),20,20);

                  Put this line before any translation.

                  I 1 Reply Last reply
                  0
                  • M mpergand

                    painter.drawEllipse(rect().center(),20,20);

                    Put this line before any translation.

                    I Offline
                    I Offline
                    IknowQT
                    wrote on last edited by IknowQT
                    #8

                    @mpergand

                    drawArc To move to the center?

                    78248a09-faf5-497d-af6b-3f2302678e86-image.png

                    This is the UI that I want to do.

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      mpergand
                      wrote on last edited by
                      #9

                      but why is the ellipse cut off to the sides?

                      You need to define a border, ex:
                      QRect innerRect=rect().adjusted(5,5,-5,-5);

                      or use QWidget::setContentsMargins(int left, int top, int right, int bottom)
                      and in paintEvent:
                      QRect innerRect=contentsRect();

                      I 1 Reply Last reply
                      0
                      • M mpergand

                        but why is the ellipse cut off to the sides?

                        You need to define a border, ex:
                        QRect innerRect=rect().adjusted(5,5,-5,-5);

                        or use QWidget::setContentsMargins(int left, int top, int right, int bottom)
                        and in paintEvent:
                        QRect innerRect=contentsRect();

                        I Offline
                        I Offline
                        IknowQT
                        wrote on last edited by
                        #10

                        @mpergand

                        38ffd0fc-e1d9-41c7-abdf-1561d19c8d97-image.png

                        As you advised, I set the boundaries for now. But I have to adjust the location of Ticks, but I can adjust this to Margins' value, right?

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          mpergand
                          wrote on last edited by
                          #11

                          painter.drawEllipse(contentsRect().center(),20,20);

                          I 2 Replies Last reply
                          0
                          • M mpergand

                            painter.drawEllipse(contentsRect().center(),20,20);

                            I Offline
                            I Offline
                            IknowQT
                            wrote on last edited by IknowQT
                            #12

                            @mpergand

                            f14f837d-32c7-4f64-a51d-ca85d0cee79f-image.png
                            This is not what I want, but the circle is in the center

                            =================================
                            add

                            Out of the many, do you recommend 20 as the rect argument? At 20, you get the center, but if you put another number, you lose the center again.

                            1 Reply Last reply
                            0
                            • M mpergand

                              painter.drawEllipse(contentsRect().center(),20,20);

                              I Offline
                              I Offline
                              IknowQT
                              wrote on last edited by
                              #13

                              @mpergand

                              Can you take a look at this issue?
                              https://forum.qt.io/topic/132609/how-to-change-the-position-of-drawline-according-to-the-size-of-the-widget/1

                              M 1 Reply Last reply
                              0
                              • I IknowQT

                                @mpergand

                                Can you take a look at this issue?
                                https://forum.qt.io/topic/132609/how-to-change-the-position-of-drawline-according-to-the-size-of-the-widget/1

                                M Offline
                                M Offline
                                mpergand
                                wrote on last edited by
                                #14

                                @IknowQT
                                see HERE

                                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