Qt学习笔记11.自定义控件 Customize the Widget

Posted 2020-08-23

一、窗口绘制——基本方法

自定义窗口：

Qt里允许自定义窗口控件，使之满足特殊的要求：

1、可以修改其显示，自行绘制

2、可以呈现动态效果

3、可以添加事件，支持鼠标和键盘操作

自定义的控件可以直接在Qt Designer 中使用，可以直接加到父窗口里。

步骤：

1、新建一个类，继承于QWidget和QFrame，最好是继承于QFrame
2、重写以下函数 void CellMonitor::paintEvent( QPaintEvent* event )

3、使用这个类

CircleWidget::CircleWidget(QWidget *parent)
	: QFrame(parent)
{
}

CircleWidget::~CircleWidget()
{
}

void CircleWidget::paintEvent(QPaintEvent * event)
{
	QPainter painter(this);
	painter.setBrush(QBrush(QColor(0x00, 0xff, 0x00)));
	painter.drawEllipse(QPoint(100, 100), 100, 100);
}

在Qt Designer里使用：

自定义的Widget可以和原生控件一样，直接在Qt Designer里拖放布局。

1、拖放一个父类控件，如QFrame

2、Promote to ...具体化为子类控件，即可完成

二、窗口的绘制——几何图形的绘制

常用:

Line:直线

Rect:长方形（含正方形）

Ellipse:椭圆（含圆形）

其他：

Arc:圆弧

Chord:封闭圆弧

polygon:多边形

RGB颜色：

在绘图时经常要指定颜色，Qt里使用RGB颜色，即由Red、Green、Blue分量定义的颜色值。每个分量0 ~ 255

如：

QColor green(0, 0xFF, 0);

QColor white(0xFF, 0xFF, 0xFF);

QColor black(0, 0, 0);

QPen与QBrush：

在Qt中，有两种绘制参数

QPen:负责线条的颜色和风格

QBrush:负责填充的颜色和风格

比如说，当画一个圆时，由当前QPen来决定线条，由QBrush来决定填充（所围区域）

注意：

1、对于非闭合形状，如Line，是不填充的

2、要先设置好色彩 然后再画，不然画完才设置颜色显然是无意义的

常用的几个类型：

QPoint:描述了一个点的坐标

QSize:描述了宽度和高度

QRect:描述了一个矩形的坐标和大小

另外，QPointF、QRectF是对应的float版本

一般情况下，后绘制的窗口会覆盖先前绘制的窗口

三、窗口的绘制——动画的实现

图画的运动：

每秒钟重绘n次，对人眼来说，它看起来就是运动的

步骤：

1、创建一个定时器

2、调用QWidget::update()，通知界面重绘

注意：

update()函数只是通知界面重新绘制，会在事件循环中产生一个“绘制事件(paint event)”，在适合的时候才会重新绘制 （简单的说，就是生成了一个重绘信号，等待响应处理，而并不是立刻重绘）

四、窗口的绘制——文字的绘制

1、颜色:QPen

2、字体:QFont

字体包含以下参数：

family(字体):如 "Times" "宋体"

size(大小):如 10  16

weight(样式): 如 QFont:Normal, QFont::Bold QFont::Light 等......

italic(斜体):true false

3、位置与对齐

painter.drawText(0, 0, width, 40 ,//指定位置

        Qt::AlignHCenter | Qt::AlignVCenter,    //指定对齐等属性

        "hello world")

);

示例代码：

	QPainter painter(this);
	QFont font("Times", 20, QFont::Light, true);
	
	painter.setPen(QColor(0xFF, 0, 0));
	painter.setFont(font);
	painter.drawText(0, 0, width(), height(), Qt::AlignLeft | Qt::AlignTop, "Change World");

五、窗口的绘制——图片的绘制

Qt中使用QPixmap表示图片

图片的来源：

Qt里的图片有两种加载方式：

1、文件系统中的文件

使用绝对路径或相对路径来指定

2、资源中的文件

:/xxx/Resources/XX.jpg   (使用冒号开头)

绘制参数：

1、源矩形

可以绘制图像的全部，也可以只绘制其中一部分

QRect source(0, 0, img_width, img_height);    //源矩形

2、目标矩形

可以填充到全部窗口，也可以只填充到一部分

QRect target(0, 0, width/2, height/2);        //目标矩形

painter.drawPixmap(target, m_picture, source);    //绘制

注意事项：

QPixmap应该作为成员变量，只加载一次，这是因为：

1、加载成本很高（开销大）

2、也没有必要反复加载

六、鼠标的支持——基本概念

Qt中鼠标事件分为四种：

1、按下    Press

2、抬起    Release

3、移动    Move

4、双击    Double Click

用QMouseEventl类表示一个鼠标事件

x,y: 坐标

globalX, globalY: 全局坐标

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

鼠标事件继承与 QWidget，因此重写这4个事件的处理方法，就可以自定义控件支持鼠标操作

void mouseDoubleClickEvent( QMouseEvent* event );
void mouseMoveEvent( QMouseEvent* event );
void mousePressEvent( QMouseEvent* event );
void mouseReleaseEvent( QMouseEvent* event );

小练习：

写一个程序，当鼠标按下时，画出鼠标移动的轨迹，直到松开为止

按下时： m_pressedFlag = true;

移动时： 记录轨迹

松开时： m_pressedFlag = false;

效果如下：

实现代码：

class MyWidget : public QFrame
{
	Q_OBJECT

public:
	MyWidget(QWidget *parent);
	~MyWidget();
private:
	void paintEvent( QPaintEvent* event );

	//鼠标事件
	void mouseDoubleClickEvent(QMouseEvent *event);
	void mouseMoveEvent(QMouseEvent *event);
	void mousePressEvent(QMouseEvent *event);
	void mouseReleaseEvent(QMouseEvent *event);

private:
	bool m_pressedFlag;
	QVector<QPoint> m_points;		//存放轨迹的集合
};





MyWidget::MyWidget(QWidget *parent)
	: QFrame(parent)
	, m_pressedFlag(false)
{
	m_points.resize(1024);
}

MyWidget::~MyWidget()
{
}

void MyWidget::paintEvent(QPaintEvent* event)
{
	QPainter painter(this);
	int width = this->width();
	int height = this->height();

	//背景
	painter.setBrush(QColor(0, 0, 0));		//黑色
	painter.drawRect(0, 0, width, height);

	painter.setPen(QColor(255, 255, 255));

	for (size_t i = 0; i < m_points.size() - 1; ++i)	//遍历
	{
		QPoint& p1 = m_points[i];
		QPoint& p2 = m_points[i + 1];
		painter.drawLine(p1, p2);
	}
}

//忽略双击事件
void MyWidget::mouseDoubleClickEvent(QMouseEvent *event)
{
	QWidget::mouseDoubleClickEvent(event);
}

void MyWidget::mouseMoveEvent(QMouseEvent *event)
{
	if (m_pressedFlag == true)
	{
		QPoint pos = event->pos();
		//显示轨迹
		m_points.push_back(pos);
		update();	//重绘
	}
}

//鼠标按下
void MyWidget::mousePressEvent(QMouseEvent *event)
{
	m_pressedFlag = true;
	m_points.clear();
}

//鼠标抬起
void MyWidget::mouseReleaseEvent(QMouseEvent *event)
{
	m_pressedFlag = false;
}

七、鼠标的支持——发射信号

事件与信号：

自定义控件的事件发生时，应该以信号的形式发送出去。

例如：对于一个按钮，当它被按下时(press, release)，对外发射了一个clicked()信号

自定义信号的方式如下：

class XXX
{
signals:
    void SignalName( QPoint pos );
}

当事件发生时，

emit SignalName( pos );

通过emit操作将信号发射出去。

注意：emit并非C++的语法，是Qt里面自己加的概念

小练习：

区域截图：加载一张图片，选中一个区域，当鼠标松开后，发射一个信号

做出下面的效果：

代码：

class MyWidget : public QFrame
{
	Q_OBJECT

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

private:
	void paintEvent( QPaintEvent* event );

	//鼠标支持
	void mouseMoveEvent(QMouseEvent *event);
	void mousePressEvent(QMouseEvent *event);
	void mouseReleaseEvent(QMouseEvent *event);

private:
	bool m_pressedFlag;
	QPixmap m_picture;
	QPoint m_curPos;	//鼠标当前位置
	QPoint m_begin;
	QPoint m_end;
};






MyWidget::MyWidget(QWidget *parent)
	: QFrame(parent)
	,m_pressedFlag(false)
	,m_begin(QPoint(0, 0))
	,m_end(QPoint(0, 0))
{
	m_picture.load("./Resources/MyPic.jpg");		//开销大，写在构造函数中，只加载一次，而不是写在paintEvent中，每次显示
}

MyWidget::~MyWidget()
{
}

void MyWidget::paintEvent(QPaintEvent* event)
{
	QPainter painter(this);
	int width = this->width();
	int height = this->height();

	//显示背景图片
	painter.drawPixmap(0, 0, width, height, m_picture);

	//画出区域
	if (m_pressedFlag == true)
	{
		//画一个十字交叉线
		painter.setPen(QColor(255, 0, 0));	//红色的区域为十字交叉线
		painter.drawLine(QPoint(0, m_curPos.y()), QPoint(width, m_curPos.y()));	//水平
		painter.drawLine(QPoint(m_curPos.x(), 0), QPoint(m_curPos.x(), height));
		
		//画出选中的区域
		QRect selected(m_begin, m_end);
		painter.setPen(QColor(0, 0, 0));	
		//painter.setBrush(QColor(100, 100, 100));
		painter.drawRect(selected);
	}
}


//鼠标移动
void MyWidget::mouseMoveEvent(QMouseEvent *event)
{
	if (m_pressedFlag = true)
	{
		m_curPos = event->pos();
		m_end = m_curPos;
		update();
	}
}

//鼠标按下
void MyWidget::mousePressEvent(QMouseEvent *event)
{
	m_pressedFlag = true;
	m_begin = event->pos();
	m_end = m_begin;

}

//鼠标抬起
void MyWidget::mouseReleaseEvent(QMouseEvent *event)
{
	m_pressedFlag = false;
}

————————————

尾巴

这一次东西蛮多的