Qt 贴图实现方向控制盘

news2025/7/11 16:51:19

一、效果走一波

二、使用贴图进行不规则按钮的设计与开发

开发环境描述:QtCreator + Qt Desinger

(1)首先准备待贴的图片

​ 图片的切片大小必须一样,背景为透明的;将待贴的所有图片都切下来,文件标明名称与尺寸大小,便于管理与查询。

​ 【注意事项】
​ 1、当使用贴图时,说明软件那部分的UI界面基本完成了设计。在进行贴图素材切片时,一定要注意贴图区域功能的分离。

​ 2、所有的切片操作都必须在一个固定大小的区域内进行,即切片出来的所有图片的尺寸大小全都保持一致。由于这一点,在切片前需要考虑功能的完整性,和实际的贴图效果。

(2)在Qt Creator中创建待贴图的QPushButton创建5个待贴图的按钮(QPushButton)

(3)将所有的按钮移动到一个位置上,这一步非常关键,如果不移动到一个位置上,贴图会出现位置不一致的情况。

(4)使用setMask()函数进行贴图

    QPixmap btn_1(":/assets/images/bg_image_pink_4_03.png");
    ui->pushButton->setIconSize(btn_1.size());
    ui->pushButton->resize(btn_1.size());
    ui->pushButton->setMask(btn_1.mask());
    ui->pushButton->setStyleSheet("QPushButton{border:0px;border-image:url(:/assets/images/bg_image_pink_4_03.png)}"
                                  "QPushButton:pressed{border-image:url(:/icons/largeDisplayIcon_normal_128.png)};"
                                  "QPushButton:hover{border-image:url(:/icons/largeDisplayIcon_clieked_128.png)};");

​ 按照以上代码,逐一设置5个待贴图的按钮。在setStyleSheet()函数中可以设置按钮的样式表。

​ 通过以上步骤,就完成一个自定义按钮的贴图。但是最重要的一点:那就是Qt开发一个软件UI,如果使用到了贴图进行UI实现,不使用QPainter自绘制。最好将贴图部分都分离出来,做成单独的QWidget控件。这样,可以避免设计的关联性太强;当设计修改时,只用改动局部的设计即可。

(5)按钮的使用与QPushButton、QToolButton一样。

三、【核心代码】

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    setAttribute(Qt::WA_TranslucentBackground);

    //设置背景贴图
    QPixmap pixmap;
    pixmap.load(":/assets/bgimage.png");
    resize(pixmap.size());
    setMask(pixmap.mask());
	
    //顶部按钮
    QPixmap topBtn(":/assets/topBtn.png");
    ui->pushButton->setIconSize(topBtn.size());
    ui->pushButton->resize(topBtn.size());
    ui->pushButton->setMask(topBtn.mask());
    ui->pushButton->setStyleSheet("QPushButton{border:0px;border-image:url()}"
                                    "QPushButton:pressed{border-image:url(:/assets/topBtn.png)};");
	//左侧按钮
    QPixmap leftBtn(":/assets/leftBtn.png");
    ui->pushButton_2->setIconSize(leftBtn.size());
    ui->pushButton_2->resize(leftBtn.size());
    ui->pushButton_2->setMask(leftBtn.mask());
    ui->pushButton_2->setStyleSheet("QPushButton{border:0px;border-image:url()}"
                                    "QPushButton:pressed{border-image:url(:/assets/leftBtn.png)};");
	
    //底部按钮
    QPixmap bottomBtn(":/assets/bottomBtn.png");
    ui->pushButton_3->setIconSize(bottomBtn.size());
    ui->pushButton_3->resize(bottomBtn.size());
    ui->pushButton_3->setMask(bottomBtn.mask());
    ui->pushButton_3->setStyleSheet("QPushButton{border:0px;border-image:url()}"
                                    "QPushButton:pressed{border-image:url(:/assets/bottomBtn.png)};");
	//右侧按钮
    QPixmap rightBtn(":/assets/rightBtn.png");
    ui->pushButton_4->setIconSize(rightBtn.size());
    ui->pushButton_4->resize(rightBtn.size());
    ui->pushButton_4->setMask(rightBtn.mask());
    ui->pushButton_4->setStyleSheet("QPushButton{border:0px;border-image:url()}"
                                    "QPushButton:pressed{border-image:url(:/assets/rightBtn.png)};");
	//中间按钮
    QPixmap centerBtn(":/assets/centerBtnImage.png");
    ui->pushButton_5->setIconSize(centerBtn.size());
    ui->pushButton_5->resize(centerBtn.size());
    ui->pushButton_5->setMask(centerBtn.mask());
    ui->pushButton_5->setStyleSheet("QPushButton{border:0px;border-image:url()}"
                                    "QPushButton:pressed{border-image:url(:/assets/centerBtnImage.png)};");
}

Widget::~Widget()
{
    delete ui;
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    painter.drawPixmap(0,0,QPixmap(":/assets/bgimage.png"));
}

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

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

相关文章

移动App性能测试包含哪些内容?App性能测试工具有哪些?

随着互联网高科技的蓬勃发展,移动app的的需求量和供给量都较大。但一款好app的成功上线以及为用户带来高效体验,性能测试起着关键性的作用。性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试&#xff0…

【STM32存储器映射-寄存器基地址-偏移】

前言 在学习STM32的时候&#xff0c;我们看到很多的寄存器编程&#xff0c; 比方说LED灯&#xff1a; //GPIOB.5端口输出高电平GPIOB->ODR|1<<5; //PB.5 输出高GPIOE->ODR|1<<5; //PE.5输出高 //GPIOB端口全部输出高电平*(unsigned int*)(0x4001 …

从深分页查询到覆盖索引

最近看到一道面试题&#xff0c;如何优化深分页查询 最简单的例子是 select * from web_bill_main limit 30000,10;分页达到30000行&#xff0c;需要把前面29999行都过滤掉&#xff0c;才能找到这10条数据 所以整体时间花了80ms(工具显示时间) 我当时的第一反应是&#xff0…

python Django的admin后台建设

什么是admin管理后台 1、django提供了完善的后台管理数据库的接口&#xff0c;可供开发过程中调用和测试使用2、django 会搜集所有已注册的模型类&#xff0c;为这些模型类提供数据管理界面&#xff0c;供开发者使用admin配置步骤1、创建后台管理账号-该账号为管理后台最高权限…

193、【动态规划】AcWing —— 291. 蒙德里安的梦想:状压dp详细解析(C++版本)

题目描述 原题链接&#xff1a;291. 蒙德里安的梦想 解题思路 &#xff08;1&#xff09;状态压缩dp先导知识 状态压缩会用二进制位来存储状态信息&#xff0c;在状态计算时&#xff0c;将整数转化为二进制爹形式进行计算。 可表示的状态就是 2n2^n2n 个。 &#xff08;2&…

python 列表删除多个元素

文章目录一. 删除列表多个元素方法1 使用枚举&#xff1a;2. 使用python中List.pop()方法3. 使用python中List.remove()方法4. 注意二. 使用双指针法删除列表多个元素1. 问题描述&#xff1a;2. 解决方法&#xff1a;3. 代码如下&#xff1a;三. 总结四. 相关链接一. 删除列表多…

扩盘操作LVM扩容操作-Centos7

生产环境要扩容&#xff0c;太久没试过LVM&#xff0c;记录一下走过的坑 [rootarchive ~]# df -h #查看磁盘挂载&#xff0c;对/dev/mapper/vgnfs-lvdata进行扩容 文件系统 容量 已用 可用 已用% 挂载点 devtmpfs 909M 0 909M 0…

文件上传漏洞知识总结

直接使用别人的靶场总感觉不太好&#xff0c;那么就干脆自己写一个自己的文件上传靶场吧。正好博客之前也没有单独总结过文件上传的知识点&#xff0c;那么就顺便水一篇文章&#xff0c;岂不是一举两得。当然关于文件上传 upload-labs 总结的比较全面了&#xff0c;非强迫症患者…

HTTP协议详解(上)

目录 前言&#xff1a; 认识URL HTTP协议方法 通过Fiddler抓包 GET和POST之间典型区别 header详解 HTTP响应状态码 常见状态码解释 状态码分类 HTTP协议报文格式 小结&#xff1a; 前言&#xff1a; HTTP协议属于应用层协议&#xff0c;称为超文本传输协议&#xff…

aws dynamodb 基础概念和理论

参考资料 https://amazon-dynamodb-labs.workshop.aws/https://docs.amazonaws.cn/amazondynamodb/latest/developerguide/Introduction.html dynamodb的工作原理 核心概念 table、item和attributes是dynamodb的核心组件&#xff0c;可以分别对应关系型数据库中的表&#x…

JavaScript新手学习手册-基础代码(三)

与上篇博客相接 一&#xff1a;Date对象 var date new Date();console.log(date); //全部时间console.log(date.getFullYear()); //年console.log(date.getMonth()); //月console.log(date.getDay()); //星期几console.log(date.getHours()) //时console.log(d…

java实现Hbase 增删改查

目录 一、新建一个maven工程 二、代码实现 2.1、配置hbase信息&#xff0c;连接hbase数据库 2.2、创建命名空间 2.3、创建表 2.4、删除表&#xff0c;删除之前要设置为禁用状态 2.5、添加数据 2.6、获取命令表空间 / tables列表 2.7、get方法查看表的内容 2.8、scan方法…

腾势D9改装来了,帮大家总结了一些需要改装的项目

最近腾势D9真的太火了&#xff0c;不仅外观霸气&#xff0c;内饰也是非常豪华。 1月份销量在MPV里已经排名第二了&#xff0c;性价比很高。 这边整理了一些改装项目供大家参考&#xff0c;有什么想法可以评论区一起讨论哦1. 电吸门 有车主吐槽车门难关&#xff0c;由于车内空间…

计算机网络:ICMP协议

网际控制报文协议ICMP ICMP协议支持主机或者路由器差错报告和网络探询 类型表明ICMP报文是哪类检验和&#xff1a;检验整个ICMP报文ICMP报文可分为ICMP差错报文和ICMP询问报文。 ICMP差错报告报文 终点不可达&#xff1a;当路由器或者主机不能交付数据报时&#xff0c;向源站…

Spring - Spring框架概述面试题总结

文章目录01. 什么是Spring&#xff1f;02. Spring框架的设计目标&#xff0c;设计理念&#xff0c;和核心是什么&#xff1f;03. Spring的优点是什么&#xff1f;04. Spring框架中都用到了哪些设计模式&#xff1f;05. Spring有哪些应用场景?06. Spring由哪些模块组成&#xf…

基于DDD的微服务落地

DDD四层架构对实时性要求高的强一致性业务场景&#xff0c;可采取分布式事务。分布式事务有性能代价&#xff0c;在设计时需要平衡考虑业务拆分、数据一致性、性能和实现的复杂度&#xff0c;尽量避免分布式事务的产生。领域事件驱动的异步方式是分布式架构常用的设计方式&…

【python】使用python将360个文件夹里的照片,全部复制到指定的文件夹中,并且按照顺序重新命名

最近要做一个图像生成的课题&#xff0c;在网上找了一个混合的数据集。这个数据集中一共有360个文件夹&#xff0c;然后文件夹中有6-9张不等的照片&#xff0c;我的目标就是编写python代码将所有的照片取出来&#xff0c;放到一个指定的文件夹里&#xff0c;并且从1开始按照顺序…

yolov8行人识别教程(2023年毕业设计+源码)

yolov8识别视频直接上YOLOv8的结构图吧&#xff0c;小伙伴们可以直接和YOLOv5进行对比&#xff0c;看看能找到或者猜到有什么不同的地方&#xff1f; Backbone&#xff1a;使用的依旧是CSP的思想&#xff0c;不过YOLOv5中的C3模块被替换成了C2f模块&#xff0c;实现了进一步的轻…

VMware虚拟机安装Ubuntu 2022最新版详细图文安装教程(VMware虚拟机安装+Ubuntu下载+VMware虚拟机配置运行)

名人说:君子生非异也,善假于物也。——荀子 Code_流苏(CSDN) o(‐^▽^‐)o很高兴你打开了这篇博客,跟着步骤一步步尝试安装吧。✧ 目录 一、简单介绍二、安装虚拟机VMware三、Ubuntu镜像下载四、虚拟机VMware配置及运行★如有疑问,欢迎评论,博主看到即回!当然,期待你的…

【基础算法】双指针---判断子序列

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…