Qt自绘系列-画个锤子

电玩女神 2023-01-04 15:54 179阅读 0赞

> 最近在琢磨画什么好呢？没有好的思路，画个锤子啊。额，灵光一闪，锤子，锤子，锤子，那就画个锤子吧。

上手难度：⭐️⭐️⭐️  
![可360度的托马斯螺旋锤][360]

左边栏和底部栏的滑块可控制**锤子**和**锤垫**的上下左右移动，而右上角轮盘滑块可控制锤子的旋转角度(0-360)。此外，君君还在界面右上角添加一个**锤一锤**按钮，用于开启或关闭锤子的击打动画效果。当锤敲打到0度时，锤头会变成红色。

## 1. 实现概要 ##

1.  自绘锤子手柄，锤头和锤垫子。
2.  "锤一锤"动画部分采用定时器，定时设置旋转角度实现。
3.  使用四个QSlider设置锤子和垫子的x轴和y轴，从而实现水平和垂直的移动。

## 2. 动画实现 ##

通过右上角“锤一锤”按钮开启定时器，然后定时设置m\_hummerDial.setValue(为旋转角度)，然后刷新界面。

if (m_hummerDial.value() <= 0) { 
        /* 触发系统咚咚声,用于模拟敲击声。 */
        QApplication::beep();
        m_timer.stop();
    
        /* 当敲击角度小于0时，就暂停250毫秒再重新开始。 */
        QTimer::singleShot(250, [&](){ 
            m_hummerDial.setValue(60);
            if (m_startHummberBtn.isChecked())
                m_timer.start();
        });
    }
    else { 
        // 设置滑块的旋转角度 
        m_hummerDial.setValue(m_hummerDial.value()-1);
    }
    
    this->update(); // 刷新界面

## 3. 样式设置 ##

*  按钮样式：  
    ![按钮样式][20210116141405327.png]

QPushButton { 
        border: 0px;
        border-radius: 15px;
        margin: 0px;
        padding: 0px;
        font-size: 16px;
        height: 40px;
        width: 60px;
        background: lightgray;
        color: black;
        outline: none;
    }
    
    QPushButton:pressed{ 
        outline: none;
        background: #1ABC9C;
        color: white;
    }
    
    QPushButton:checked { 
        outline: none;
        background: #1ABC9C;
        color: white;
    }

*  滑块样式：  
    ![滑块样式][20210116141440895.png]

QSlider::groove:horizontal { 
        height: 10px;
        border: 0px solid;
        border-radius: 5px;
        background-color: #8fd4ff;
    }
    
    QSlider::handle:horizontal { 
        width: 16px;
        height: 20px;
        margin-top: -5px;
        margin-bottom: -5px;
        border-radius: 10px;
        border: 2px solid #8fd4ff;
        background-color: white;
    }
    
    QSlider::groove:vertical { 
        width: 10px;
        border: 0px solid;
        border-radius: 5px;
        background-color: #8fd4ff;
    }
    
    QSlider::handle:vertical { 
        width: 20px;
        height: 16px;
        margin-left: -5px;
        margin-right: -5px;
        border-radius: 10px;
        border: 2px solid #8fd4ff;
        background-color: white;
    }

## 4. 锤垫实现 ##

画两个矩形叠加而成：  
![锤垫][20210116141600699.png]

painter.drawRect(width*0.3/2, 0, width*0.70, height*0.55);
    painter.drawRect(0, height*0.55, width, height*0.45);

## 5. 获取更多 ##

已付费用户，如需源码或技术交流，请在评论区留言QQ号，拉你进群，可在群文件获取。

[360]: /images/20221119/16889298da32443882854f5c374a7004.png
[20210116141405327.png]: https://img-blog.csdnimg.cn/20210116141405327.png
[20210116141440895.png]: https://img-blog.csdnimg.cn/20210116141440895.png
[20210116141600699.png]: https://img-blog.csdnimg.cn/20210116141600699.png