【Qt学习笔记】11.自定义控件CustomizetheWidget
一、窗口绘制——基本方法
成都创新互联是一家专业提供常德企业网站建设,专注与成都做网站、网站设计、H5场景定制、小程序制作等业务。10年已为常德众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
自定义窗口：
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 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里面自己加的概念
小练习：
区域截图：加载一张图片，选中一个区域，当鼠标松开后，发射一个信号
做出下面的效果：
代码：
//////////////////////MyWidget.h///////////////////////////
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.cpp///////////////////////////////////
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;
}
class Test11_7a_12_12 : public QMainWindow
{
Q_OBJECT
public:
Test11_7a_12_12(QWidget *parent = Q_NULLPTR);
private:
Ui::Test11_7a_12_12Class ui;
private slots:
int OnSelected(QRect area);
};
Test11_7a_12_12::Test11_7a_12_12(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
//关联自定义的控件发出的信号
assert(
connect(
ui.frame,
SIGNAL(selected(QRect)),
this,
SLOT(OnSelected(QRect))
)
);
}
int Test11_7a_12_12::OnSelected(QRect area)
{
return 0;
}八、示例——正弦曲线
什么是曲线：
两种视角：
1、一个曲线是由无数个点组成的 ( 可以用drawPaint()方法 )
2、一个曲线是由无数个线段组成的。 ( 可以用drawLine()方法 )
这里采用第二种视角，也就是线段的画法，很多小线段首位连接在一起，形成一条“准”曲线
直角坐标系：
1、定义坐标原点
origin()
2、坐标转换
GUI: 左上角为原点，X向右增长，Y向下增长
数学坐标系：中心为原点，X向右增长，Y向上增长
代码：
github：https://github.com/HonestFox/Qt/tree/master/12_13MySin
（提示： QSpainBox）
九、示例——自定义进度条
由于Qt自带的QSlider有点简陋，这里自己实现一个MySlider，实现以下功能
高亮状态：
鼠标移入后，进入高亮状态
鼠标移出后，回到普通状态
触发事件： ：void focused(bool yes)
鼠标点击：
当鼠标点击后，设置新的位置，并触发事件：void clicked(int progress)
位置显示：
给出提示框，动态显示当前位置
void tracking(int progress, QPoint pos)
(要实现这个功能，需要单独新建一个类)
getter / setter ：
可以设置、获取当前值和范围
void setRange(int range);
void setProgress(int progress);
int range() const;
int progress() const;
效果：
代码：
github:https://github.com/HonestFox/Qt/tree/master/12_14MySlider
十、实战——屏幕截图工具
需求：
1、隐藏自身窗口
2、自由选区
3、保存为jpg文件
实现：
1、截图
Qt中的 QPixmap::grabWindow( QApplication::desktop()->winId() );方法
2、自由选区
以一个全屏的对话框来展示截图
用鼠标来选区一个区域：记录开始点、结束点
3、特效：快门声
QSound m_shutter("xxxx.wav");
m_shutter.play();
4、延时
QTimer::singleShot(300, this, SLOT(onDelayedCapture()));
为什么要延时呢，因为当我们点击截图按钮，按道理是界面隐藏，紧接着打开一个记录屏幕的窗口的，
但是，界面的隐藏是一个过程，因此需要延时。
5、保存图片
QPixmap picture = ui.frame->pixmap();
picture.save(filename);
效果：
代码：
github：
https://github.com/HonestFox/Qt/tree/master/12_14ScreenShot
————————————
尾巴
尽量少造轮子，多读文档。
像Qt这种庞大的框架，往往有大量现成的轮子
文章题目：【Qt学习笔记】11.自定义控件CustomizetheWidget
网页URL：http://mswzjz.cn/article/ihsoic.html