简介:
在上一篇文章,我们简单实现了将文字绘制在wigget上的舞动效果
接下来,我们要模仿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存在覆盖的原因,我们将绘制背景的代码放在绘制文字之前。
源码: