QT鼠标事件与可拖动进度条

鼠标事件

鼠标事件分为四种：

AfSeekBar: 可拖动，可显示进度

鼠标事件分为四种：

(1)按下Press

(2)抬起Release

(3)移动Move

(4)双击Double Click

鼠标事件继承于QWidget

void mouseDoubleClickEvent ( QMouseEvent * event )

void mouseMoveEvent ( QMouseEvent * event )

void mousePressEvent ( QMouseEvent * event )

void mouseReleaseEvent ( QMouseEvent * event )
重写这四个函数，就能够让自定义控件支持鼠标操作。

QMouseEvent：

Qt中用QMouseEvent类来表达一个鼠标事件

x, y : 坐标

globalX, globalY： 全局坐标 （相对于整个屏幕）

button: 鼠标左键、右键、中键

事件与信号

自定义控件时，事件发生时，应该以信号的形式发送出去。
例：对于一个按钮，当它被按下时（press,release)，对外发射了一个clicked()信号

自定义signal

1
2
3
4
5
class ... 
{
signals:
    void Clicked(QPoint pos); 
};

当事件发生时， emit Clicked ( pos ); 通过emit操作将信号发射出去了。
注：emit并非C++语法，是Qt里面自己加的概念。

示例：自定义一个进度条SeekBar，当鼠标移入后，进入高亮状态；当鼠标移出后，回到普通状态

AfSeekBar

由于Qt自带的QSlider有点简陋，我们自定义一个SeekBar

注：QSlider部件提供了一个垂直或水平滑动条。滑块是一个用于控制有界值的典型部件。它允许用户沿水平或垂直方向移动滑块，并将滑块所在的位置转换成一个合法范围内的值

AfSeekBar: 可拖动，可显示进度

设定高亮/普通状态的触发事件为：void focused(bool yes);

当鼠标单击后，设置新的位置，并触发事件：void clicked(int progress);

设置当前进度条范围（min~max）

给出提示框，动态显示当前位置鼠标所指向的进度位置：void tracking(int progress, QPoint pos);

AfOverlay.h:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#ifndef AFOVERLAY_H
#define AFOVERLAY_H

#include <QtGui>

class AfOverlay : public QWidget
{
	Q_OBJECT

public:
	AfOverlay(QWidget *parent);
	~AfOverlay();

	void setText(const QString& text);

private:
	virtual void paintEvent(QPaintEvent *event);

private:
	QString m_text;
};

#endif // AFOVERLAY_H

AfOverlay.c:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#include "AfOverlay.h"

AfOverlay::AfOverlay(QWidget *parent)
	: QWidget(parent)
{
	//setWindowFlags(Qt::Window | Qt::FramelessWindowHint );
	setWindowFlags(Qt::ToolTip);
	setAttribute(Qt::WA_TranslucentBackground);

}

AfOverlay::~AfOverlay()
{

}

void AfOverlay::setText(const QString& text)
{
	m_text = text;
	update();
}


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

	// 背景透明
	int w = width(), h = height();
	painter.setPen(QColor(0,0,0,0));
	painter.setBrush(QColor(0xFF,0xFF,0xFF,0xAA));
	//painter.setBrush(QColor(0xFF,0xFF,0xFF));
	painter.drawRect(0,0,w,h);

	// 显示文本：所选区域的大小
	QFont font = painter.font();
	font.setPixelSize(14);
	painter.setFont(font);

	painter.setPen(QPen(QColor(0x33,0X33,0X33)));
	QRect textRect(0,0, w, h);
	painter.drawText(textRect, Qt::AlignCenter, m_text);

}

AfSeekBar.h:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#ifndef AFSEEKBAR_H
#define AFSEEKBAR_H

#include <QtGui>

class AfSeekBar : public QWidget
{
	Q_OBJECT

	
public:
	AfSeekBar(QWidget *parent);
	~AfSeekBar();

signals:
	void clicked(int progress);
	void tracking(int progress, QPoint pos);
	void focused(bool yes);

public:
	void setRange(int range);
	void setProgress(int progress);
	int range() const;
	int progress() const;

private:
	virtual QSize	sizeHint () const;
	virtual void	enterEvent ( QEvent * event );
	virtual void	leaveEvent ( QEvent * event );

	//virtual void	mouseDoubleClickEvent ( QMouseEvent * event );
	virtual void	mouseMoveEvent ( QMouseEvent * event );
	virtual void	mousePressEvent ( QMouseEvent * event );
	virtual void	mouseReleaseEvent ( QMouseEvent * event );
	virtual void	paintEvent ( QPaintEvent * event );

private:
	int position2progress(int postion);
	int progress2position(int progress);

private:
	int m_range;
	int m_progress;
	bool m_focused;

	bool m_pressed;
	QRect m_validRegion;
};

#endif // AFSEEKBAR_H

AfSeekBar.c:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
#include "AfSeekBar.h"

AfSeekBar::AfSeekBar(QWidget *parent)
	: QWidget(parent)
{
	m_focused = false;
	m_pressed = false;

	m_range = 100;
	m_progress = 0;
	//setFocusPolicy(Qt::StrongFocus);
	setMouseTracking(true);
	setCursor(Qt::PointingHandCursor);

}

AfSeekBar::~AfSeekBar()
{

}

void AfSeekBar::setRange(int range)
{
	m_range = range;
	update();
}
void AfSeekBar::setProgress(int progress)
{
	m_progress = progress;
	update();
}

int AfSeekBar::range() const
{
	return m_range;
}
int AfSeekBar::progress() const
{
	return m_progress;
}

QSize	AfSeekBar::sizeHint () const
{
	return QSize(100,20);
}

void	AfSeekBar::paintEvent ( QPaintEvent * event )
{
	QWidget::paintEvent(event);

	//m_focused = true;
	//m_progress = 30;

	QPainter painter(this);
	painter.setRenderHint(QPainter::Antialiasing);

	int width = this->width()-20;
	int height = this->height();
	int vcenter = height/2;
	int xoff = 0;

	QColor colorLeft  = QColor(44, 143, 214);
	QColor colorRight = QColor(0x888888);
	QColor colorHandle = QColor(51, 153, 255); //QColor(246, 83, 39);; //QColor(0xDDDDDD); // 手柄颜色
	QColor colorHandleFrame = QColor(0xCCCCCC);

	int position = xoff + m_progress * width / m_range;
	if(!m_focused)
	{
		// 细线模式
		QPen pen;
		pen.setWidth(2); // 线宽

		// 左半段
		pen.setColor(colorLeft);
		painter.setPen(pen);
		painter.drawLine(QPoint(0, vcenter), QPoint(position, vcenter));

		// 右半段
		pen.setColor(colorRight);
		painter.setPen(pen);
		painter.drawLine(QPoint(position, vcenter),QPoint(width, vcenter));

		// 小圆球
		pen.setWidth(1);
		pen.setColor(colorHandleFrame);
		painter.setPen(pen);
		painter.setBrush(colorHandle);
		painter.drawEllipse(QPoint(position+5,vcenter),5,5);
	}
	else
	{
		// 粗线模式
		QPen pen;
		pen.setWidth(4); // 线宽
		//vcenter -= 4;

		// 左半段
		pen.setColor(colorLeft);
		painter.setPen(pen);
		painter.drawLine(QPoint(0, vcenter), QPoint(position, vcenter));

		// 右半段
		pen.setColor(colorRight);
		painter.setPen(pen);
		painter.drawLine(QPoint(position, vcenter),QPoint(width, vcenter));

		// 手柄
		pen.setWidth(1);
		pen.setColor(colorHandleFrame);
		painter.setPen(pen);
		painter.setBrush(colorHandle);

		int w = 20;
		int h = 10;
		QRect rectHandle(position, vcenter-h/2, w, h);
		painter.drawRoundedRect (rectHandle, 4,4);

	}
}

void	AfSeekBar::enterEvent ( QEvent * event )
{
 	qDebug() << "focus in!";

	m_focused = true;
	update();
	emit focused(true);
	QWidget::enterEvent(event);
}
void	AfSeekBar::leaveEvent ( QEvent * event )
{
	//setCursor(Qt::PointingHandCursor);
	m_focused = false;
	qDebug() << "focus out!";
	update();
	emit focused(false);

	QWidget::leaveEvent(event);
}


void	AfSeekBar::mouseMoveEvent ( QMouseEvent * event )
{
	int progress = position2progress(event->pos().x());
	emit tracking(progress, event->pos());

	QWidget::mouseMoveEvent(event);
}

void	AfSeekBar::mousePressEvent ( QMouseEvent * event )
{
	if(event->button() == Qt::LeftButton) 
	{
		m_pressed = true;
	}
}
void	AfSeekBar::mouseReleaseEvent ( QMouseEvent * event )
{
	if(m_pressed)
	{
		m_pressed = false;
		m_progress = position2progress(event->pos().x());
		update();
		emit clicked(m_progress);
	}
}

// position -> progress
int AfSeekBar::position2progress(int position)
{
	int width = this->width()-20;
	int xoff = 10;
	position -= xoff;
	if(position < 0) position = 0;
	else if(position > width) position = width;

	return position * m_range / width;
}

int AfSeekBar::progress2position(int progress)
{
	int width = this->width()-20;
	int xoff = 10;
	return xoff + width * progress / m_range;
}

test.h:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#ifndef TEST_H
#define TEST_H

#include <QtGui/QWidget>
#include "ui_test.h"

#include "AfOverlay.h" // 浮动提示窗

class Test : public QWidget
{
	Q_OBJECT

public:
	Test(QWidget *parent = 0, Qt::WFlags flags = 0);
	~Test();

private slots:
	int onSeekFocused(bool yes);
	int onSeekClicked(int progress);
	int onSeekTracking(int progress,  QPoint pos);

private:
	Ui::Test_Class ui;
	AfOverlay* m_tooltip;
};

#endif // TEST_H

test.c:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#include "test.h"

Test::Test(QWidget *parent, Qt::WFlags flags)
	: QWidget(parent, flags)
{
	ui.setupUi(this);

	// 初始化提示框
	m_tooltip = new AfOverlay(this);
	m_tooltip->setFixedSize(60,20);
	m_tooltip->hide();

	connect(ui.m_seekBar, SIGNAL(focused(bool)), 
		this, SLOT(onSeekFocused(bool)));
	connect(ui.m_seekBar, SIGNAL(clicked(int)),
		this, SLOT(onSeekClicked(int)));
	connect(ui.m_seekBar, SIGNAL(tracking(int, QPoint)),
		this, SLOT(onSeekTracking(int, QPoint)));
}

Test::~Test()
{

}

int Test::onSeekFocused(bool yes)
{
	// 拖动条高亮时，显示提示窗
	m_tooltip->setVisible(yes);
	return 0;
}

int Test::onSeekClicked(int progress)
{
	return 0;
}

int Test::onSeekTracking(int progress, QPoint pos)
{
	// 显示位置信息
	char buf[64];
	sprintf(buf, "%d",progress);
	m_tooltip->setText(buf);

	pos.setY(-25);
	pos.setX(pos.x()-30);
	pos = ui.m_seekBar->mapToGlobal(pos);
	m_tooltip->move(pos);
	return 0;
}

main.c:

1
2
3
4
5
6
7
8
9
10
#include "test.h"
#include <QtGui/QApplication>

int main(int argc, char *argv[])
{
	QApplication a(argc, argv);
	Test w;
	w.show();
	return a.exec();
}

实现情况：

赏

谢谢你请我吃糖果！

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家