Qt 贴图实现方向控制盘
创始人
2024-05-30 16:03:10
0

一、效果走一波

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

开发环境描述: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"));
}

相关内容

热门资讯

新还珠格格,欣荣和永琪有个孩子... 新还珠格格,欣荣和永琪有个孩子?不是说永琪从来都没碰过她吗?绵忆到底是他和小燕子的还是欣荣的啊求正解...
中级会计怎么备考?今年几月考试... 中级会计怎么备考?今年几月考试?您好,很高兴为您解答中级会计师考试,教材是根本和基础,所有的题目都是...
继兴业、招商、中信后,邮储银行... (来源:现代商业银行杂志)金融资产投资公司(AIC)队伍再添新员。邮储银行近日发布公告称,该行拟以自...
中央巡视组对陕西开展两个半月常... 转自:北京日报客户端日前,中央第十五巡视组进驻陕西省,将开展为期两个半月左右的常规巡视,并会同陕西省...
柳州幻境空间在哪里 柳州幻境空间在哪里柳州幻境空间是位于广西柳州市城中区华联商闷郑城4楼的室内主题乐园,提供了各种游戏和...
中央巡视组进驻山东 联动巡视济... 转自:央视新闻客户端经党中央批准,二十届中央第六轮巡视将对16个省(自治区、直辖市)开展常规巡视,并...
继续发布暴雨蓝色预警!北京等地... 转自:央视新闻客户端中央气象台19日早6时继续发布暴雨蓝色预警。预计,19日早8时至20日早8时,青...
降妖伏魔篇演员有哪些 降妖伏魔篇演员有哪些文章舒淇程小东黄勃
晚上十一点在河边抓鱼听到有人叫... 晚上十一点在河边抓鱼听到有人叫我小名声音跟我一个朋友一样,电筒照却没有发现有人而且我女朋友也听见了不...
属猴的为什么吸引属狗的人 属猴的为什么吸引属狗的人属相狗虽不善甜言蜜语,为人多有情感之被捉,然其铅轮内心却多有向往甜蜜幸福之生...