Qt self-drawing realizes the sliding effect of Apple buttons

Insert picture description here


Classes used: QTimer, QPaintEvent, QPainter, QRectF

Insert picture description here

First, to rewrite the drawing event, you need to add the QPaintEvent header file to the header file and define several variables.

    bool ison=false;
    float currentValue;
    float widthSize,heightSize;

Then add the following code:

The idea is to click the mouse to trigger the paintEvent function

void MainWindow::mousePressEvent(QMouseEvent *event){
    
    
    Q_UNUSED(event)
    ison=!ison; //在头文件种定义:bool ison=false;
    //当鼠标点击,ison为true;
    timer->start(1);//定时器开始(ms级)
    this->update();//触发paintEvent函数
}

Rewrite of paintEvent function

void MainWindow::paintEvent(QPaintEvent *event){
    
    
    Q_UNUSED(event)
    QPainter painter(this);
    painter.setRenderHint(QPainter::SmoothPixmapTransform);
    //QPainter::SmoothPixmapTransform  使用平滑的pixmap变换算法(双线性插值算法),而不是近邻插值算。
    painter.setRenderHint(QPainter::Antialiasing); //使绘制时边缘平滑,qt反走样默认关闭
    painter.setPen(Qt::NoPen);//画笔样式,这里无
    if(ison){
    
    
        painter.save();//保存当前画笔的状态,与下面的restore();成对出现
        painter.setBrush(Qt::green);
        QRectF greenRect=QRectF(0,0,widthSize,heightSize);
        painter.drawRoundedRect(greenRect,0.5*heightSize,0.5*heightSize);
        painter.restore();
        painter.save();
        painter.setBrush(Qt::white);
        painter.drawEllipse(currentValue,0.05*heightSize,0.9*heightSize,0.9*heightSize);
        painter.restore();//恢复画笔
        //save() 用于保存 QPainter 的状态,restore() 用于恢复 QPainter 的状态,save() 和 restore() 一般都是成对使用的,
        //如果只调用了 save() 而不调用 restore(),那么保存就没有意义了,保存是为了能恢复被保存的状态而使用的。
    }else{
    
    
    	//边框
        painter.save();
        QColor grayColor(199,199,199);//灰色
        painter.setBrush(grayColor);//画笔颜色
        QRectF roundRect=QRectF(0,0,widthSize,heightSize);
        painter.drawRoundedRect(roundRect,0.5*heightSize,0.5*heightSize);
        //绘制椭圆边框
        painter.restore();
        //背景
        painter.save();
        painter.setBrush(Qt::red);
        QRectF redRect=QRectF(heightSize*0.05,heightSize*0.05,widthSize-heightSize*0.1,heightSize*0.9);
        painter.drawRoundedRect(redRect,0.45*heightSize,0.45*heightSize);
        //第1、2个参数制定矩形的左上角起点,第3个参数制定矩形的长度,第4个参数指定矩形的宽度
        //最后两个参数决定角的圆度。它可以为0到99之间的任意值(99代表最圆)。
        //绘制圆形矩形
        painter.restore();
        //按钮
        painter.save();
        painter.setBrush(Qt::white);
        painter.drawEllipse(currentValue,0.05*heightSize,0.9*heightSize,0.9*heightSize);
        //第1,2个参数表示圆/椭圆距屏幕左上角的像素数。第3,4个参数表示圆/椭圆的宽度和高度,两者相同时为圆。
        //绘制圆按钮
        painter.restore();
    }
}

Click the mouse to draw, the button should have a movement state when it slides from the left to the right. This is the timer.

Signal binding in the form constructor:

    timer=new QTimer(this);
    timer->setInterval(50);
    connect(timer,SIGNAL(timeout()),this,SLOT(begainAnimation()));
    //下面是绘制参数相关
    if(ison){
    
    
        currentValue=widthSize-0.95*heightSize;
    }else{
    
    
        currentValue=0.05*heightSize;
    }

Then write the begainAnimation function:

void MainWindow::begainAnimation(){
    
    
    int i=0.05*heightSize;
    int n=widthSize-0.95*heightSize;
    if(ison){
    
    
        currentValue+=1;
        if(currentValue>n-i){
    
    
            timer->stop();
        }
    }else{
    
    
        currentValue-=1;
        if(currentValue<i){
    
    
            timer->stop();
        }
    }
    update();
    //每1ms调用一次updata。
}

Draw a rectangle: paint->drawRect(20,20,160,160); The
first and second parameters specify the starting point of the upper left corner of the rectangle, the third parameter specifies the length of the rectangle, and the fourth parameter specifies the width of the rectangle

Draw circles and ellipses: paint->drawEllipse(20,20,210,160); The
first and second parameters indicate the number of pixels between the circle/ellipse and the upper left corner of the screen. The 3rd and 4th parameters represent the width and height of the circle/ellipse. If the two are the same, it is a circle.

Draw a rounded rectangle: paint->drawRoundRect(20,20,210,160,50,50); The
first four parameters are the same as those for drawing the rectangle, and the last two parameters determine the roundness of the corners. It can be any value between 0 and 99 (99 represents the roundest).


Guess you like

Origin blog.csdn.net/Fdog_/article/details/109259355