【自定义磨砂动态背景】前端及pyqt6实现

news2025/2/8 23:02:21



如何实现一个自定义的磨砂动态背景呢?

这种效果看起来特别的高端,很新颖美观。

具体的效果可以看这里的演示:https://www.bilibili.com/video/BV1zj411H7wd/

其实原理就是底层有多个多彩多边形在移动,然后再盖上一层模糊滤镜。

前端的话css比较强大可以控制多边形的颜色同时变化,效果更好点。但是我用pyqt6实现的效果自我感觉也不赖。

我这里封装了两个类,给出了一个使用的demo,大家可以研究一下。如果有帮到你,希望给出一个免费的三连。

自定义磨砂动态背景代码

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QLabel, QVBoxLayout, QWidget,QGraphicsBlurEffect
from PyQt6.QtGui import QPainter, QBrush, QColor,QIcon,QPolygonF
from PyQt6.QtCore import Qt, QRectF, QPropertyAnimation, QEasingCurve,QRect,QPointF
class BlurredLabel(QLabel):
    def __init__(self, parent=None,items=[]):
        super().__init__(parent)
        self.setGeometry(0,0,parent.width(),parent.height())
        for item in items:
            type=item.get('type',11)
            color=item.get('color','red')
            last_time=item.get('last_time',3)
            shape=item.get('shape',1)
            # beisaier=item.get('beisaier',)
            MoveLabel(self,type=type,color=color,last_time=last_time,shape=shape)
        print(parent.size())
        print(self.size())

        blur_effect = QGraphicsBlurEffect()
        blur_effect.setBlurRadius(300)
        self.setGraphicsEffect(blur_effect)
class MoveLabel(QLabel):
    def __init__(self, parent=None,type=11,shape=0,color='blue',last_time=5,beisaier=None):
        super().__init__(parent)
        self.side_width = min(parent.width(), parent.height()) // 2  # 设置半径为父类宽高最小值的一半
        self.setGeometry(0,0,self.side_width,self.side_width)
        self.shape=shape
        self.last_time = last_time
        self.color = color
        if type==11:
            self.start_rect = QRectF(0, 0, self.width(), self.height())
            self.end_rect = QRectF(self.parent().width() - self.side_width, self.parent().height() -self.side_width,self.side_width, self.side_width)
        elif type==12:
            self.start_rect = QRectF(parent.width() - self.side_width, parent.height() - self.side_width,self.side_width, self.side_width)
            self.end_rect = QRectF(0, 0, self.width(), self.height())
        elif type==21:
            self.start_rect=QRectF((parent.width()-self.side_width)//2,0,self.side_width, self.side_width)
            self.end_rect=QRectF((parent.width()-self.side_width)//2,parent.height()-self.side_width,self.side_width, self.side_width)
        elif type==22:
            self.start_rect = QRectF((parent.width()-self.side_width)//2,parent.height()-self.side_width,self.side_width, self.side_width)
            self.end_rect = QRectF((parent.width()-self.side_width)//2,0,self.side_width, self.side_width)
        elif type==31:
            self.start_rect = QRectF(parent.width()-self.side_width,0,self.side_width, self.side_width)
            self.end_rect =  QRectF(0,parent.height()-self.side_width,self.side_width, self.side_width)
        elif type==32:
            self.start_rect = QRectF(0,parent.height()-self.side_width,self.side_width, self.side_width)
            self.end_rect = QRectF(parent.width()-self.side_width,0,self.side_width, self.side_width)
        elif type==41:
            self.start_rect = QRectF(parent.width()-self.side_width,(parent.height()-self.side_width)//2,self.side_width, self.side_width)
            self.end_rect = QRectF(0,(parent.height()-self.side_width)//2,self.side_width, self.side_width)
        elif type==42:
            self.start_rect = QRectF(0,(parent.height()-self.side_width)//2,self.side_width, self.side_width)
            self.end_rect = QRectF(parent.width()-self.side_width,(parent.height()-self.side_width)//2,self.side_width, self.side_width)
        self.animation = QPropertyAnimation(self, b'geometry')
        self.animation.finished.connect(self.toggleAnimation)
        self.startAnimation()
    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.RenderHint.Antialiasing)
        if self.shape==1:
            # 计算圆的位置
            rect = self.rect().adjusted(1, 1, -1, -1)
            # 设置刷子
            brush = QBrush(QColor(self.color))  # 刷子颜色为半透明红色
            painter.setBrush(brush)
            # 绘制圆
            painter.drawEllipse(rect)
        elif self.shape==2:
            painter.fillRect(0, 0, self.side_width, self.side_width, QColor(self.color))  # 使用红色填充正方形
        elif self.shape==3:
            # 计算三角形的顶点坐标
            p1 = QPointF(self.width() / 2, (self.height() - self.side_width * 0.866) / 2)  # 0.866 为 sqrt(3)/2,即等边三角形的高度
            p2 = QPointF((self.width() - self.side_width) / 2, (self.height() + self.side_width * 0.866) / 2)
            p3 = QPointF((self.width() + self.side_width) / 2, (self.height() + self.side_width * 0.866) / 2)

            triangle = QPolygonF([p1, p2, p3])

            painter.setBrush(QBrush(QColor(0, 0, 255)))  # 使用蓝色填充三角形
            painter.drawPolygon(triangle)
    def toggleAnimation(self):
        # 切换动画的起始值和结束值
        a,b=self.animation.startValue(),self.animation.endValue()
        a,b=b,a
        self.animation.setStartValue(a)
        self.animation.setEndValue(b)
        self.animation.start()
    def startAnimation(self):
        self.animation.setStartValue(self.start_rect)
        self.animation.setEndValue(self.end_rect)
        self.animation.setDuration(self.last_time*1000)
        self.animation.setEasingCurve(QEasingCurve.Type.InOutQuad)  # 设置缓动曲线
        self.animation.start()
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setGeometry(300,100,800,600)
        self.initUI()
    def initUI(self):
        self.setWindowIcon(QIcon('logo.png'))
        central_widget = QWidget(self)
        layout = QVBoxLayout(central_widget)
        # f, parent = None, type = 11, shape = 0, color = 'blue', last_time = 5, beisaier = None):
        shapes=[
            {'type':11,'shape':1,'color':'#FF416C','last_time':6},
            {'type':21,'shape':3,'color':'#12c2e9','last_time':5},
            {'type':31,'shape':1,'color':'#c471ed','last_time':7},
            {'type':41,'shape':2,'color':'#f64f59','last_time':8},
            {'type':12,'shape':1,'color':'#7303c0','last_time':9},
            {'type':22,'shape':1,'color':'#fdeff9','last_time':4},
            # {'type':32,'shape':1,'color':'pink','last_time':4},
            # {'type':42,'shape':1,'color':'pink','last_time':4},
        ]
        label = BlurredLabel(self,shapes)
        layout.addWidget(label)

        self.setCentralWidget(central_widget)
        self.setWindowTitle('磨砂动态背景')
        label_=QLabel('type参数两位数,第一位1,2,3,4表示直线,\n第二位1表示正向,2表示反向',self)
        label_.adjustSize()  # 调整标签大小以适应内容
        # label_.setWordWrap(True)
def main():
    app = QApplication(sys.argv)
    mainWindow = MainWindow()
    mainWindow.show()
    sys.exit(app.exec())
if __name__ == '__main__':
    main()

参数说明:

type参数说明:
image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1335982.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【DevOps 工具链】搭建 项目管理软件 禅道

文章目录 1、简介2、环境要求3、搭建部署环境3.1. 安装Apache服务3.2. 安装PHP环境(以php7.0为例 )3.3. 安装MySQL服务 4、搭建禅道4.1、下载解压4.2、 配置4.2.1、 启动4.2.2、自启动4.2.3、确认是否开机启动 5、成功安装 1、简介 禅道是国产开源项目管…

React Router有几种模式?实现原理?

面试官:说说React Router有几种模式?实现原理? 一、是什么 在单页应用中,一个web项目只有一个html页面,一旦页面加载完成之后,就不用因为用户的操作而进行页面的重新加载或者跳转,其特性如下&a…

C++设计模式 #7 工厂方法(Factory Method)

“对象创建”模式 通过“对象创建”模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持创建的稳定。它是接口抽象之后的第一步工作。 动机 在软件系统中,经常面临着创…

Flowable-升级为7.0.0.M2-第一节

目录 升级jdk升级springboot到3.1.3升级数据库连接池druid-spring-boot-3-starter到1.2.20升级mybatis-plus到3.5.3.2升级flowable到7.0.0.M2 最近有些读者一直问flowable如何升级到7.0.0.M2,接下来我就一步步的把flowable升级到7.0.0.M2 升级jdk flowable7.x采用的…

【数据结构】LRU缓存的简单模拟实现(leetcode力扣146LRU缓存)

文章目录 一、定义二、LRU模拟实现二、代码实现 一、定义 LRU是Least Recently Used的缩写,意思是最近最少使用,它是一种Cache替换算法。 Cache的容量有限,因此当Cache的容量用完后,而又有新的内容需要添加进来时, 就…

VScode远程连接服务器,Pycharm专业版下载及远程连接(深度学习远程篇)

Visual Code、PyCharm专业版,本地和远程交互。 远程连接需要用到SSH协议的技术,常用的代码编辑器vscode 和 pycharm都有此类功能。社区版的pycharm是免费的,但是社区版不支持ssh连接服务器,只有专业版才可以,需要破解…

ARM Cortex-A学习(1):GIC(通用中断控制器)详解

文章目录 1 Cortex-A核中断1.1 处理器模式1.2 IRQ模式 2 GIC的操作2.1 CPU Interface2.2 Distributor GIC(通用中断控制器, Generic Interrupt Controller)是一种用于处理中断的硬件组件,它的主要功能是协调和管理系统中的中断请求,确保它们被正确地传递…

前端项目重构的深度思考和复盘

摘要: 项目重构是每一家稳定发展的互联企业的必经之路, 就像一个产品的诞生, 会经历产品试错和产品迭代 一样, 随着业务或新技术的不断发展, 已有架构已无法满足更多业务扩展的需求, 所以只有通过重构来让产品“进化”, 才能跟上飞速发展的时代浪潮. 技术因素 早期…

【http】缓存协议

✨ 专栏介绍 在当今互联网时代,计算机网络已经成为了人们生活和工作中不可或缺的一部分。而要实现计算机之间的通信和数据传输,就需要依靠各种网络协议来进行规范和约束。无论是浏览网页、发送电子邮件还是进行在线交流,都离不开各种各样的网…

使用pytorch神经网络拟合计算模型

一. 内容简介 python调用百度翻译api,将中文论文翻译英文,并保留部分格式 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3数据文件 链接:https://pan.baidu.com/s/1csJOoErGyx77MW_FImVKjg?pwd1234 三.主要流程 3.…

@click 默认传递原生的事件对象

项目场景 [Day1] <template><div id"app"><h1>小黑记事本</h1><button click"handleClick">www</button><div class"head"><!-- 按键&#xff08;回车&#xff09;按下&#xff0c;出发add事件&…

MyBatis见解4

10.MyBatis的动态SQL 10.5.trim标签 trim标签可以代替where标签、set标签 mapper //修改public void updateByUser2(User user);<update id"updateByUser2" parameterType"User">update user<!-- 增加SET前缀&#xff0c;忽略&#xff0c;后缀…

uniapp创建/运行/发布项目

1、产生背景----跨平台应用框架 在移动端各大App盛行的时代&#xff0c;App之间的竞争也更加激烈&#xff0c;他们执着于让一个应用可以做多个事情 所以就应运而生了小程序&#xff0c;微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。 但是各大App他不可…

解决ELement-UI三级联动数据不回显

目录 一.处理数据时使用this.$set方法来动态地设置实例中的属性&#xff0c;以确保其响应式。 二.检查数据格式是否正确 三.绑定v-if 确保每次执行 四.完整代码 一.处理数据时使用this.$set方法来动态地设置实例中的属性&#xff0c;以确保其响应式。 二.检查数据格式是否正确…

通过three.js玩转车展项目

1.项目搭建 1.1 创建文件夹 mkdir 文件名1.2 初始化package.json npm init -y1.3 安装打包工具并配置相关依赖 npm i parcel -d在package.json中打包路径和指令 1.4 安装three.js npm i three -d2.项目搭建 2.1 新建index.html&#xff0c;并再index.html引入car.js,在…

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】 目录 分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCSO-…

MySQL递归公用表表达式

&#x1f607;作者介绍&#xff1a;一个有梦想、有理想、有目标的&#xff0c;且渴望能够学有所成的追梦人。 &#x1f386;学习格言&#xff1a;不读书的人,思想就会停止。——狄德罗 ⛪️个人主页&#xff1a;进入博主主页 &#x1f5fc;专栏系列&#xff1a;MySQL知识 &…

asp.net core 教程

asp.net core 教程 写在前面新建项目Get和PostGETPOST MVC-模型控制视图如何通俗理解MVC代码实例 API模型&#xff08;前后端分离&#xff09;前端代码后端代码 文件配置优先级优先级顺序 从数据库读取配置文件数据缓存 写在前面 学了快一年多的C#了&#xff01; 我最开始学的…

XxlJob 常见的报错

XxlJob 启动日志报错&#xff1a; 报错一&#xff1a; ERROR c.x.job.core.util.XxlJobRemotingUtil - Connection refused: connect java.net.ConnectException: Connection refused: connect 解决方法&#xff1a; 要启动的类是 XxlJobAdminApplication &#xff0c;而不是…

【论文阅读】MCANet: Medical Image Segmentation with Multi-Scale Cross-Axis Attention

文章目录 摘要创新点总结实现效果总结 摘要 链接&#xff1a;https://arxiv.org/abs/2312.08866 医学图像分割是医学图像处理和计算机视觉领域的关键挑战之一。由于病变区域或器官的大小和形状各异&#xff0c;有效地捕捉多尺度信息和建立像素间的长距离依赖性至关重要。本文提…