Qt-模仿QQ歌词

简介：

在上一篇文章，我们简单实现了将文字绘制在wigget上的舞动效果

QBasicTimer

接下来，我们要模仿qq音乐的歌词效果，即将鼠标移动上去将会出现背景和设置，将鼠标移开背景将会消失。效果如下：

代码： 

和上一篇的代码差不多

为了实现无边框的效果，我们在Dialog的构造函数下使用

    setWindowFlags(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground, true);
    WigglyWidget *wigglyWidget = new WigglyWidget;
    QVBoxLayout *layout = new QVBoxLayout(this);
    layout->setContentsMargins(0,0,0,0);
    layout->addWidget(wigglyWidget);
    QString strSubTitle = "我现在在测试歌词界面的效果";
    wigglyWidget->setText(strSubTitle);
    setWindowTitle(tr("demo"));
    resize(700, 145);

setWindowFlags(Qt::FramelessWindowHint);   隐藏掉自带的标题栏 
setAttribute(Qt::WA_TranslucentBackground, true);  背景透明（主窗体透明但是子窗体不透明）
layout->setContentsMargins(0,0,0,0); 设置布局的四周的magin为0

简单的设置了主窗体之后，我们来看一看wigglywidget类中，我们做出了什么样的修改：

wigglywidget.h

class WigglyWidget : public QWidget
{
    Q_OBJECT

public:
    WigglyWidget(QWidget *parent = 0);

public slots:
    void setText(const QString &newText) { text = newText; }

protected:
    void paintEvent(QPaintEvent *event) override;
    void timerEvent(QTimerEvent *event) override;
    void enterEvent(QEvent *event)override;
    void leaveEvent(QEvent *event)override;
private:
    QBasicTimer timer;
    QString text;
    int step;

    bool hasMask;
};

我们新增了 enterEvent 与leaveEvent时间，用来铺货鼠标的移出和进入，这里用一个 bool变量 hasMask来标记

void WigglyWidget::enterEvent(QEvent *event)
{
    Q_UNUSED(event);
    hasMask = true;
}

void WigglyWidget::leaveEvent(QEvent *event)
{
    Q_UNUSED(event);
    hasMask = false;
}

根据hasMask的标记的值来判断是否绘制背景。

    if(hasMask)
        painter.fillRect(rect(),QColor(50,50,50,150));

    /*绘制文字*/
    for (int i = 0; i < text.size(); ++i)
    {
        int index = (step + i) % 16;
        color.setHsv((15 - index) * 16, 221, 191);
        painter.setPen(color);
        painter.drawText(x, y - sineTable[index], QString(text[i]));
        x += metrics.width(text[i]);
    }

由于Painter存在覆盖的原因，我们将绘制背景的代码放在绘制文字之前。

源码：

代码