Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to draw "Draw Arc Ticks".



  • 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?



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

    Put this line before any translation.



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

    How do I calculate the position?



  •   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



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



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



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



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

    Put this line before any translation.



  • @mpergand

    drawArc To move to the center?

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

    This is the UI that I want to do.



  • 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();



  • @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?



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



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






Log in to reply