Qt实现画板部件并和自定义button按钮结合实例

1.首先新建一个空项目，添加一个类，该类继承自QWidget， 然后使该窗口部件实现画板的功能，这个功能是比较简单的画线；

实现该功能的思路是：当鼠标按下的时候记录鼠标的位置(一个点ev->pos())并更新窗口部件，当鼠标移动的时候也记录鼠标的位置并更新窗口部件，当鼠标离开的时候也记录鼠标的位置并更新窗口部件；（一定要更新update()，否则不会显示刚刚的线，因为调用update()的时候，会调用paintEvent()函数，该函数会重画那些记录的画线）;

每次鼠标按下的时候就要新建一个Vector<QPoint>对象，因为每次鼠标按下的时候是一个新的线要画；

备注：什么时候窗口会调用void MyWidget::paintEvent(QPaintEvent *)?

(1):窗口初始化的时候；

(2):手动调用update()的时候；本例就用到了这个函数

(3):当窗口的大小发生了改变；

2：自定义一个button按钮，在该项目上添加一个类，该类也是继承自QWidget；

实现该功能的思路是：当鼠标点击该按钮的时候就将按钮的颜色变为黄色，当鼠标离开该按钮的时候，该按钮的颜色变为灰色；当鼠标按下和离开的时候，都要手动调用update()函数，这样才会重绘该部件；

还在该部件上面添加了clicked()信号，当鼠标按下该按钮，并且鼠标离开的位置在按钮上面，则发出该信号;

当按下按钮，会发出clicked()信号，则会调用MyWidget部件自定义的slotButtonClicked槽函数，打印This is button clicked；

mybutton.h

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QWidget>

class MyButton : public QWidget
{
Q_OBJECT
public:
explicit MyButton(QWidget *parent = 0);
MyButton(const QString &text, QWidget *parent = 0);

QRect _rect;//位置
QString _text;//按钮上的字体
bool mousePressed;//鼠标是否按下，按下则是true,否则是false
void paintEvent(QPaintEvent *);
void mousePressEvent(QMouseEvent *);
void mouseReleaseEvent(QMouseEvent *);
signals:
void clicked();//clicked()信号，当鼠标按下该按钮，并且鼠标离开的位置在按钮上面，则发出该信号
public slots:

};

#endif // MYBUTTON_H

mybutton.cpp

#include "mybutton.h"
#include <QPainter>
#include <QMouseEvent>

MyButton::MyButton(QWidget *parent) :
QWidget(parent), _rect(0, 0, 100, 30), _text("Button")
{
mousePressed = false;
this->setGeometry(_rect);
}

MyButton::MyButton(const QString &text, QWidget *parent):QWidget(parent), _text(text), _rect(0, 0, 100, 30)
{
mousePressed = false;
this->setGeometry(_rect);
}

void MyButton::paintEvent(QPaintEvent *)
{
QPainter p(this);
if(mousePressed)//如果按钮按下，则按钮变为黄色
p.setBrush(Qt::yellow);
else
p.setBrush(Qt::darkGray);//如果按钮没有按下，则按钮是灰色

p.drawRect(_rect);
p.drawText(_rect,_text, QTextOption(Qt::AlignCenter));
}

void MyButton::mousePressEvent(QMouseEvent *)
{
mousePressed = true;
update();
}

void MyButton::mouseReleaseEvent(QMouseEvent *ev)
{
mousePressed = false;
update();

if(_rect.contains(ev->pos()))//如果鼠标离开的位置在button按钮上面，则发出信号
emit clicked();
}

mywidget.h

#ifndef MYWIDGET_H
#define MYWIDGET_H

#include <QWidget>
#include "mybutton.h"

class MyWidget : public QWidget
{
Q_OBJECT
public:
explicit MyWidget(QWidget *parent = 0);
void paintEvent(QPaintEvent *);
void mousePressEvent(QMouseEvent *ev);
void mouseMoveEvent(QMouseEvent *ev);
void mouseReleaseEvent(QMouseEvent *ev);
//QVector<QPoint> _line;//记录鼠标经过的每一个点
QVector<QVector<QPoint> > _lines;
MyButton * button;
signals:

public slots:
void slotButtonClicked();
};

#endif // MYWIDGET_H

mywidget.cpp

#include "mywidget.h"
#include <QApplication>
#include <QPainter>
#include <QPushButton>
#include <QMouseEvent>
#include <QDebug>

MyWidget::MyWidget(QWidget *parent) :
QWidget(parent)
{
button = new MyButton(this);//调用第一个系统生成的构造函数
//button = new MyButton("MyButton", this);//调用第二个自定义的构造函数
button->setGeometry(150, 150, 100, 30);
connect(button, SIGNAL(clicked()), this, SLOT(slotButtonClicked()));//当按下按钮，会发出clicked()信号，则会调用slotButtonClicked槽函数，打印This is button clicked
}

/*这个函数什么时候会被调用？
*1.窗口初始化的时候
*2.手动调用update的时候
*3.窗口的大小发生改变的时候
*/
void MyWidget::paintEvent(QPaintEvent *)
{
QPainter p(this);
for(int i = 0; i < _lines.size(); ++i){
const QVector<QPoint> & line = _lines.at(i);
for (int j = 0; j < line.size()-1; ++j){
p.drawLine(line.at(j), line.at(j+1));
}
}

}
void MyWidget::mousePressEvent(QMouseEvent *ev)
{
QVector<QPoint> line;
_lines.append(line);
QVector<QPoint> & lastLine = _lines.last();//最后一条线

lastLine.append(ev->pos());
update();
}

void MyWidget::mouseMoveEvent(QMouseEvent *ev)
{
if(_lines.isEmpty()){  //为了防止点击button按钮然后移动到其它位置时出现异常，因为下面要对_lines操作
QVector<QPoint> line;
_lines.append(line);
}
QVector<QPoint> & lastLine = _lines.last();//最后一条线
lastLine.append(ev->pos());
update();
}

void MyWidget::mouseReleaseEvent(QMouseEvent *ev)
{
QVector<QPoint> & lastLine = _lines.last();//最后一条线
lastLine.append(ev->pos());
update();
}

void MyWidget::slotButtonClicked()
{
qDebug() << "This is button clicked";
}

int main(int argc, char **argv)
{

QApplication app(argc, argv);

MyWidget w;
w.setGeometry(400, 150, 400,400);
w.show();

app.exec();
}