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".
Forum Updated to NodeBB v4.3 + New Features

How to draw "Draw Arc Ticks".

Scheduled Pinned Locked Moved Solved General and Desktop
14 Posts 2 Posters 1.3k 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