最近看到美图秀秀的一些功能,可以手动设置图片的透明度并显示在其它图片上,所以自己动手做了个小Demo,实际效果如下:
(图片仅供参考使用)
可以看到拖动下方进度条,可以控制左上角图片的透明度。
方法如下:
新建一个Qt项目,在UI界面上拖放一个QLabel和一个QSlider,设置QSlider的数值范围为0~255,简单布局下即可。
代码如下:
1 #ifndef WIDGET_H
2 #define WIDGET_H
3
4 #include <QWidget>
5 #include <QPixmap>
6 #include <QPainter>
7 #include <QLabel>
8
9 namespace Ui {
10 class Widget;
11 }
12
13 class Widget : public QWidget
14 {
15 Q_OBJECT
16
17 public:
18 explicit Widget(QWidget *parent = 0);
19 ~Widget();
20
21 private slots:
22 void on_horizontalSlider_sliderMoved(int position);
23
24 private:
25 Ui::Widget *ui;
26
27 QLabel *m_label; //设置透明度的图片的label
28 };
29
30 #endif // WIDGET_H
1 #include "widget.h"
2 #include "ui_widget.h"
3
4 #include <QDebug>
5 Widget::Widget(QWidget *parent) :
6 QWidget(parent),
7 ui(new Ui::Widget)
8 {
9 ui->setupUi(this);
10
11 //设置背景label的图片
12 QPixmap pix_("./test.jpg");
13 ui->label->setPixmap(pix_);
14
15 //设置新的lable位置
16 m_label = new QLabel(ui->label);
17 m_label->setScaledContents(true);
18 m_label->setGeometry(10,10,200,150);
19 m_label->raise();
20 m_label->show();
21 }
22
23 Widget::~Widget()
24 {
25 delete ui;
26 }
27
28 void Widget::on_horizontalSlider_sliderMoved(int position)
29 {
30 //设置新的图片的透明度
31 QPixmap pix1_("./test.jpg");
32
33 QPixmap temp(pix1_.size());
34 temp.fill(Qt::transparent);
35
36 QPainter p1(&temp);
37 p1.setCompositionMode(QPainter::CompositionMode_Source);
38 p1.drawPixmap(0, 0, pix1_);
39 p1.setCompositionMode(QPainter::CompositionMode_DestinationIn);
40
41 //根据QColor中第四个参数设置透明度,此处position的取值范围是0~255
42 p1.fillRect(temp.rect(), QColor(0, 0, 0, position));
43 p1.end();
44
45 pix1_ = temp;
46 m_label->setPixmap(pix1_);
47 }
1 <?xml version="1.0" encoding="UTF-8"?>
2 <ui version="4.0">
3 <class>Widget</class>
4 <widget class="QWidget" name="Widget">
5 <property name="geometry">
6 <rect>
7 <x>0</x>
8 <y>0</y>
9 <width>400</width>
10 <height>300</height>
11 </rect>
12 </property>
13 <property name="windowTitle">
14 <string>Widget</string>
15 </property>
16 <layout class="QGridLayout" name="gridLayout">
17 <item row="0" column="0">
18 <layout class="QVBoxLayout" name="verticalLayout">
19 <item>
20 <widget class="QLabel" name="label">
21 <property name="text">
22 <string/>
23 </property>
24 </widget>
25 </item>
26 <item>
27 <widget class="QSlider" name="horizontalSlider">
28 <property name="maximum">
29 <number>255</number>
30 </property>
31 <property name="orientation">
32 <enum>Qt::Horizontal</enum>
33 </property>
34 </widget>
35 </item>
36 </layout>
37 </item>
38 </layout>
39 </widget>
40 <layoutdefault spacing="6" margin="11"/>
41 <resources/>
42 <connections/>
43 </ui>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)