🚀 优质资源分享 🚀
学习路线指引(点击解锁) | 知识定位 | 人群定位 |
---|---|---|
🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。 |
💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
前言
酷狗、网抑云和 QQ 音乐都有桌面歌词功能,这篇博客也将使用 pyqt 实现桌面歌词功能,效果如下图所示:
代码实现
桌面歌词部件 LyricWidget
在 paintEvent
中绘制歌词。我们可以直接使用 QPainter.drawText
来绘制文本,但是通过这种方式无法对歌词进行描边。所以这里更换为 QPainterPath
来实现,使用 QPainterPath.addText
将歌词添加到绘制路径中,接着使用 Qainter.strokePath
进行描边,Qainter.fillPath
绘制歌词,这里的绘制顺序不能调换。
对于歌词的高亮部分需要特殊处理,假设当前高亮部分的宽度为 w
,我们需要对先前绘制歌词的 QPainterPath
进行裁剪,只留下宽度为 w
的部分,此处通过 QPainterPath.intersected
计算与宽度为 w
的矩形路径的交集来实现裁剪。
对于高亮部分的动画,我们既可以使用传统的 QTimer
,也可以使用封装地更加彻底的 QPropertyAnimation
来实现(本文使用后者)。这里需要进行动画展示的是高亮部分,也就是说我们只需改变“高亮宽度”这个属性即可。PyQt 为我们提供了 pyqtProperty
,类似于 python 自带的 property
,使用 pyqtProperty
可以给部件注册一个属性,该属性可以搭配动画来食用。
除了高亮动画外,我们还在 LyricWidget
中注册了滚动动画,用于处理歌词长度大于视口宽度的情况。
复制# coding:utf-8
from PyQt5.QtCore import QPointF, QPropertyAnimation, Qt, pyqtProperty
from PyQt5.QtGui import (QColor, QFont, QFontMetrics, QPainter, QPainterPath,
QPen)
from PyQt5.QtWidgets import QWidget
config = {
"lyric.font-color": [255, 255, 255],
"lyric.highlight-color": [0, 15