QT自定义QLabel并用于显示图片

一、概述

为了实现在Label上显示图片以及获取相应的坐标,需要相应的鼠标事件。然而,默认情况下,QLabel是不支持鼠标事件功能的,如点击事件。要实现QLabel的点击事件,一般有两种方式:一种是生成动态库文件将其放置到D:\ProgramFiles\Qt\5.12.10\msvc2015_64\plugins\designer目录下,即可在designer中直接拖动该控件,另一种则是直接添加控件类,并将相应的控件提升为自定义控件。

二、新建项目并添加mylabel类

在需要使用该自定义控件的项目下添加mylabel类。

在这里插入图片描述
mylibel类所在的头文件和cpp文件如下:
myLabel.h

#pragma once

#include <QWidget>
#include <QLabel>
#include <QObject>
#include <QEvent>
#include <QMouseEvent>

extern int xlocation;
extern int ylocation;
class mylabel : public QLabel
{
	Q_OBJECT    // must include this if you use Qt signals/slots
public:
	explicit mylabel(QWidget *parent = 0);

signals:
	void myClicked();                    // 单击产生的信号
	void myDoubleClicked();              // 双击产生的信号

private:
	void enterEvent(QEvent* event);      // 鼠标进入事件
	void leaveEvent(QEvent *event);      //当鼠离开
	void mousePressEvent(QMouseEvent* event);  //鼠标按下
	void mouseReleaseEvent(QMouseEvent *event);//鼠标释放
	void mouseMoveEvent(QMouseEvent *event);   //鼠标移动
	void mouseDoubleClickEvent(QMouseEvent *event); // 鼠标双击事件
};

mylabel.cpp

#include "myLabel.h"
#include <QDebug>
#include <QMoveEvent>
int xlocation = 0;
int ylocation = 0;
mylabel::mylabel(QWidget *parent) :QLabel(parent)
{

}
//鼠标进入
void mylabel::enterEvent(QEvent *event)
{
	qDebug() << "tips:" << "move enter";
	emit myDoubleClicked();
}
//鼠离开
void mylabel::leaveEvent(QEvent *event)
{
	qDebug() << "tips:" << "mouse leave";
	emit myDoubleClicked();
}
//鼠标按下
void mylabel::mousePressEvent(QMouseEvent *event)
{
	QString  Str = QString("location: X=%1 Y=%2").arg(event->x()).arg(event->y());
	xlocation = event->x();
	ylocation = event->y();
	//判断鼠标是按下左键还是右键
	if (event->button() == Qt::LeftButton) {
		qDebug() << "tips:" << "mouse press the left button" + Str;
		emit myClicked();
	}
	else {
		qDebug() << "tips:" << "mouse press the right button" + Str;
	}
}
//鼠标释放
void mylabel::mouseReleaseEvent(QMouseEvent *event)
{
	//判断鼠标是按下左键还是右键
	if (event->button() == Qt::LeftButton) {
		qDebug() << "tips:" << "mouse release the left button";
	}
	else {
		qDebug() << "tips:" << "mouse release the right button";
	}
}
//鼠标移动
void mylabel::mouseMoveEvent(QMouseEvent *event)
{
	//持续状态 需要用buttons 用与操作符 进行判断
	if (event->buttons()&Qt::LeftButton) {
		QString  Str = QString("location:X=%1 Y=%2").arg(event->x()).arg(event->y());
		qDebug() << "tips:" << "mouse move" + Str;
	}
}
//当鼠标双击的时候
void mylabel::mouseDoubleClickEvent(QMouseEvent *event)
{
	qDebug() << "tips:" << "When the mouse double clicks, the double click signal is issued";
	emit myDoubleClicked();
}

三、提升Label控件

在qt designer的ui界面中,将Label控件拖至合适的位置,然后右击选择提升的窗口部件,将其提升为我们定义的mylabel类。
在这里插入图片描述

在这里插入图片描述

注意: 在将控件提升后,在我们的ui头文件中会自动包含我们定义的控件的头文件。从中可以看到,该头文件(myLabel.h)目录和ui_MyLabelTest2.h在同一目录下,因此需要将其复制到此目录下。

在这里插入图片描述

在这里插入图片描述

四、引用并连接信号

通过cnnect连接鼠标点击事件和执行函数,而鼠标按下事件(mousePressEvent)、鼠标移动事件等是protected属性的,因此不能通过信号槽直接连接。在此,我主要想通过鼠标按下事件获取label的坐标,因此使用了两个全局变量(xlocation和ylocation)来实现我的功能。
另外,还添加ImshowQImage()函数用以实现在Label控件上显示图像。

MyLabelTest2::MyLabelTest2(QWidget *parent)
    :QMainWindow(parent)
{
    ui.setupUi(this);
	//ui.label11->setText("hello word");
	ImshowQImage();
	QObject::connect(ui.label11, &mylabel::myClicked, this, &MyLabelTest2::myLabel_Clicked);
}
void MyLabelTest2::ImshowQImage()
{

	QString filename = "D:\\PyProject01\\images\\background.jpg";
	QImage image(filename);
	
	//图片自适应label大小
	image.scaled(ui.label11->size(), Qt::KeepAspectRatio);
	ui.label11->setScaledContents(true);
	//显示图片
	ui.label11->setPixmap(QPixmap::fromImage(image));
	//ui.label_processedImage->resize(ui.label_rawImage->pixmap()->size());
	ui.label11->show();
}
void MyLabelTest2::myLabel_Clicked()
{
	qDebug() << xlocation << " " << ylocation;
	ui.label2->setText(QString::asprintf("(%d,%d)", xlocation,ylocation));
}

五、效果测试

通过鼠标在Label上移动、按压、点击等操作来对我们的控件事件进行测试,测试结果如下:

在这里插入图片描述
最终的显示图片以及相应的坐标效果也得到实现。
在这里插入图片描述
壮哉,其乐无穷。如果觉得对您有帮助,就一键三连吧。

参考文献:
[1] https://blog.csdn.net/lizaijinsheng/article/details/125314092
[2] https://blog.csdn.net/qq_40541268/article/details/85211021
[3] https://blog.csdn.net/qq_33583069/article/details/109513284
[4] https://blog.csdn.net/augfun/article/details/101083946

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如果您想要在Qt中使用QLabel实现自定义的旋钮控件,可以通过以下步骤进行操作: 1. 创建一个QLabel控件,并设置它的大小和样式。 2. 重载QLabel的鼠标事件函数,响应鼠标按下、移动和释放事件。 3. 在鼠标事件函数中计算旋钮的位置和角度,并设置QLabel的旋转角度。 4. 可以使用QPropertyAnimation类来实现旋钮的动画效果。 下面是一个简单的示例代码,用于实现一个自定义的旋钮控件: ```cpp #include <QLabel> #include <QMouseEvent> #include <QPropertyAnimation> class Knob : public QLabel { Q_OBJECT public: Knob(QWidget *parent = nullptr) : QLabel(parent) { setFixedSize(50, 50); setStyleSheet("background-color: white; border-radius: 25px;"); m_animation = new QPropertyAnimation(this, "rotation"); m_animation->setDuration(500); m_animation->setEasingCurve(QEasingCurve::InOutCubic); } protected: void mousePressEvent(QMouseEvent *event) override { if (event->button() == Qt::LeftButton) { m_dragging = true; m_startPos = event->pos(); m_startAngle = rotation(); m_animation->stop(); } } void mouseMoveEvent(QMouseEvent *event) override { if (m_dragging) { QPoint delta = event->pos() - m_startPos; int angle = m_startAngle + delta.x(); setRotation(angle); emit valueChanged(angle); } } void mouseReleaseEvent(QMouseEvent *event) override { if (event->button() == Qt::LeftButton) { m_dragging = false; m_animation->setEndValue(rotation() / 360.0 * 100); m_animation->start(); } } signals: void valueChanged(int value); private: bool m_dragging = false; QPoint m_startPos; int m_startAngle = 0; QPropertyAnimation *m_animation = nullptr; Q_PROPERTY(int rotation READ rotation WRITE setRotation) int rotation() const { return property("rotation").toInt(); } void setRotation(int value) { setProperty("rotation", value); update(); } }; ``` 在这个示例代码中,我们继承了QLabel类,并添了一个valueChanged信号,用于在旋钮的值发生变化时发出信号。在鼠标事件函数中,我们计算出旋钮的角度,并通过setRotation函数来设置QLabel的旋转角度。在释放鼠标事件中,我们使用QPropertyAnimation类来实现旋钮归位的动画效果。 使用这个自定义的旋钮控件也非常简单,只需要在创建控件后连接valueChanged信号即可: ```cpp Knob *knob = new Knob(this); connect(knob, &Knob::valueChanged, this, [this](int angle) { qDebug() << "Knob angle:" << angle; }); ``` 这个示例代码只是一个简单的实现,如果您需要更复杂的旋钮控件,可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值