利用PyQt5中QLabel组件实现亚克力磨砂效果利用PyQt5中QLabel组件实现亚克力

前言
实现方法

高斯模糊
亚克力纹理
亚克力标签

测试

前言 Windows10 在 UWP 应用中支持亚克力画刷，可以在部件的底部绘制亚克力效果的背景图。下面我们使用 QLabel 来模拟这个磨砂过程。

实现方法 MSDN 文档中介绍了亚克力材料的配方，包括：高斯模糊、亮度混合、色调混合和噪声纹理。

文章图片

高斯模糊
我们先来实现高斯模糊的效果，使用 scipy 可以很轻松的实现这个过程：

# coding:utf-8import numpy as npfrom PIL import Imagefrom PyQt5.QtGui import QPixmapfrom scipy.ndimage.filters import gaussian_filterdef gaussianBlur(imagePath: str, blurRadius=18, brightFactor=1, blurPicSize: tuple = None) -> np.ndarray:""" 对图片进行高斯模糊处理Parameters----------imagePath: str图片路径blurRadius: int模糊半径brightFactor：float亮度缩放因子blurPicSize: tuple高斯模糊前将图片缩放到指定大小，可以加快模糊速度Returns-------image: `~np.ndarray` of shape `(w, h, c)`高斯模糊后的图像"""if not imagePath.startswith(':'):image = Image.open(imagePath)else:image = Image.fromqpixmap(QPixmap(imagePath))if blurPicSize:# 调整图片尺寸，减小计算量，还能增加额外的模糊w, h = image.sizeratio = min(blurPicSize[0] / w, blurPicSize[1] / h)w_, h_ = w * ratio, h * ratioif w_ < w:image = image.resize((int(w_), int(h_)), Image.ANTIALIAS)image = np.array(image)# 处理图像是灰度图的情况if len(image.shape) == 2:image = np.stack([image, image, image], axis=-1)# 对每一个颜色通道分别磨砂for i in range(3):image[:, :, i] = gaussian_filter(image[:, :, i], blurRadius) * brightFactorreturn image

亚克力纹理
接下来在 QLabel 上面绘制出亮度混合、色调混合和噪声纹理，一般色调混合使用的颜色是图像的主题色，可以用 colorthief 库提取，这里就不赘述了：

class AcrylicTextureLabel(QLabel):""" 亚克力纹理标签 """def __init__(self, tintColor: QColor, luminosityColor: QColor, noiseOpacity=0.03, parent=None):"""Parameters----------tintColor: QColorRGB 主色调luminosityColor: QColor亮度层颜色noiseOpacity: float噪声层透明度parent:父级窗口"""super().__init__(parent=parent)self.tintColor = QColor(tintColor)self.luminosityColor = QColor(luminosityColor)self.noiseOpacity = noiseOpacityself.noiseImage = QImage('resource/noise.png')self.setAttribute(Qt.WA_TranslucentBackground)def setTintColor(self, color: QColor):""" 设置主色调 """self.tintColor = colorself.update()def paintEvent(self, e):""" 绘制亚克力纹理 """acrylicTexture = QImage(64, 64, QImage.Format_ARGB32_Premultiplied)# 绘制亮度层acrylicTexture.fill(self.luminosityColor)# 绘制主色调painter = QPainter(acrylicTexture)painter.fillRect(acrylicTexture.rect(), self.tintColor)# 绘制噪声painter.setOpacity(self.noiseOpacity)painter.drawImage(acrylicTexture.rect(), self.noiseImage)acrylicBrush = QBrush(acrylicTexture)painter = QPainter(self)painter.fillRect(self.rect(), acrylicBrush)

用到的噪声图像如下图所示：

文章图片

亚克力标签
最后在 QLabel 上叠加磨砂图像和亚克力纹理，可以通过 Image.toqpixmap() 将 Image 转换为 QPixmap：

class AcrylicLabel(QLabel):""" 亚克力标签 """def __init__(self, blurRadius: int, tintColor: QColor, luminosityColor=QColor(255, 255, 255, 0),maxBlurSize: tuple = None, parent=None):"""Parameters----------blurRadius: int磨砂半径tintColor: QColor主色调luminosityColor: QColor亮度层颜色maxBlurSize: tuple最大磨砂尺寸，越小磨砂速度越快parent:父级窗口"""super().__init__(parent=parent)self.imagePath = ''self.blurPixmap = QPixmap()self.blurRadius = blurRadiusself.maxBlurSize = maxBlurSizeself.acrylicTextureLabel = AcrylicTextureLabel(tintColor, luminosityColor, parent=self)def setImage(self, imagePath: str):""" 设置图片 """if imagePath == self.imagePath:returnself.imagePath = imagePathimage = Image.fromarray(gaussianBlur(imagePath, self.blurRadius, 0.85, self.maxBlurSize))self.blurPixmap = image.toqpixmap()# type:QPixmapself.setPixmap(self.blurPixmap)self.adjustSize()def setTintColor(self, color: QColor):""" 设置主色调 """self.acrylicTextureLabel.setTintColor(color)def resizeEvent(self, e):super().resizeEvent(e)self.acrylicTextureLabel.resize(self.size())self.setPixmap(self.blurPixmap.scaled(self.size(), Qt.KeepAspectRatioByExpanding, Qt.SmoothTransformation))

测试下面是测试用的埃罗芒阿老师：

文章图片

代码如下：

# coding:utf-8import sysfrom PyQt5.QtGui import QColorfrom PyQt5.QtWidgets import QApplicationfrom acrylic import AcrylicLabelapp = QApplication(sys.argv)w = AcrylicLabel(20, QColor(105, 114, 168, 102))w.setImage('resource/ClariS_ヒトリゴト (アニメ盤).jpg')w.show()app.exec_()

结果如下：