QT 画板的设计

一 界面效果

二源代码

1 mainw.h中代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QComboBox>
#include <QDebug>
#include <QtGui>
#include <QMouseEvent>
#include <QPaintEvent>
#include <QResizeEvent>
#include <QColor>
#include <QPixmap>
#include <QPoint>
#include <QPointer>
#include <QPalette>
#include <QWidget>
#include <QLabel>
#include <QSpinBox>
#include <QToolButton>
#include <QColorDialog>
#include <QColor>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void Create_MainWindow();
    void mousePressEvent(QMouseEvent *);
    void mouseMoveEvent(QMouseEvent *);
    void paintEvent(QPaintEvent *);
    void resizeEvent(QResizeEvent *);
public slots:
    void ShowStyle();
    void SetStyle(int);
    void SetWidth(int);
    void SetColor();
    void clear();

private:
    Ui::MainWindow *ui;
    QComboBox *styleComboBox;
    QSpinBox *line_width;
    QPixmap *pix;
    QPoint startPos;
    QPoint endPos;
    int style = Qt::SolidLine;
    int weight;
    QColor color;
    QLabel *label;
    QLabel *label_line;
    QToolButton *button_color;
    QToolButton *button_clear;

};

#endif // MAINWINDOW_H

2 main.cpp中如下

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

3mainwindow.cpp中如下

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->Create_MainWindow();
    connect(this->styleComboBox,SIGNAL(currentIndexChanged(int)),this,SLOT(ShowStyle()));
    connect(this->button_color,SIGNAL(clicked()),this,SLOT(SetColor()));
    connect(this->button_clear,SIGNAL(clicked()),this,SLOT(clear()));
}

MainWindow::~MainWindow()
{
    delete ui;
}



void MainWindow::Create_MainWindow()
{
    label = new QLabel;
    label->setText("线型风格:");
    ui->mainToolBar->addWidget(label);
    styleComboBox = new QComboBox;
    styleComboBox->addItem(tr("SolidLine"),static_cast<int>(Qt::SolidLine));
    styleComboBox->addItem(tr("DashLine"),static_cast<int>(Qt::DashLine));
    styleComboBox->addItem(tr("DotLine"),static_cast<int>(Qt::DotLine));
    styleComboBox->addItem(tr("DashDotLine"),static_cast<int>(Qt::DashDotLine));
    styleComboBox->addItem(tr("CustomDashLine"),static_cast<int>(Qt::CustomDashLine));
    ui->mainToolBar->addWidget(styleComboBox);
    label_line = new QLabel;
    label_line ->setText("线宽");
    ui->mainToolBar->addWidget(label_line);

    line_width = new QSpinBox;
    line_width->setRange(1,10);
    ui->mainToolBar->addWidget(line_width);

    button_color = new QToolButton;
    this->button_color->setText("color");
    ui->mainToolBar->addWidget(button_color);

    button_clear = new QToolButton;
    this->button_clear->setText("clear");
    ui->mainToolBar->addWidget(button_clear);

    pix = new QPixmap(size());
    pix->fill(Qt::white);
}

void MainWindow::ShowStyle()
{
    this->SetStyle(this->styleComboBox->itemData(this->styleComboBox->currentIndex(),Qt::UserRole).toInt());
}

void MainWindow::mousePressEvent(QMouseEvent *event)
{
    startPos = event->pos();
    qDebug("mousePressEvent_ok");
}
void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    QPainter *painter = new QPainter;
    QPen pen;  // creates a default pen

    pen.setStyle((Qt::PenStyle)style);
    //pen.setStyle(Qt::SolidLine);
    weight = this->line_width->value();
    pen.setWidth(weight);
    //pen.setBrush(Qt::green);
    pen.setColor(color);
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::RoundJoin);
    painter->begin(pix);
    painter->setPen(pen);
    painter->drawLine(startPos,event->pos());
    painter->end();
    startPos =event->pos();				//更新鼠标的当前位置，为下次绘制做准备
    update();
    //qDebug("mouseMoveEvent_ok2");
}
void MainWindow::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.drawPixmap(QPoint(0,0),*pix);
}
void MainWindow::resizeEvent(QResizeEvent *)
{

}

void MainWindow::SetStyle(int s)
{
    style = s;
}
void MainWindow::SetWidth(int w)
{
    weight = w;
}
void MainWindow::SetColor()
{
    color = QColorDialog::getColor(static_cast<int>(Qt::black),this);
    if(color.isValid())
    {
        QPixmap p(20,20);
        p.fill(color);
        this->button_color->setIcon(p);
    }
}

void MainWindow::clear()
{
    QPixmap *clearPix = new QPixmap(size());
    clearPix->fill(Qt::white);
    pix = clearPix;
    update();
}

4采用默认空白窗体即可

三细节分析

1 在工具栏上添加部件

 label = new QLabel;
    label->setText("线型风格:");
    ui->mainToolBar->addWidget(label);
    styleComboBox = new QComboBox;
    styleComboBox->addItem(tr("SolidLine"),static_cast<int>(Qt::SolidLine));
    styleComboBox->addItem(tr("DashLine"),static_cast<int>(Qt::DashLine));
    styleComboBox->addItem(tr("DotLine"),static_cast<int>(Qt::DotLine));
    styleComboBox->addItem(tr("DashDotLine"),static_cast<int>(Qt::DashDotLine));
    styleComboBox->addItem(tr("CustomDashLine"),static_cast<int>(Qt::CustomDashLine));
    ui->mainToolBar->addWidget(styleComboBox);
    label_line = new QLabel;
    label_line ->setText("线宽");
    ui->mainToolBar->addWidget(label_line);

    line_width = new QSpinBox;
    line_width->setRange(1,10);
    ui->mainToolBar->addWidget(line_width);

    button_color = new QToolButton;
    this->button_color->setText("color");
    ui->mainToolBar->addWidget(button_color);

    button_clear = new QToolButton;
    this->button_clear->setText("clear");
    ui->mainToolBar->addWidget(button_clear);

先创建部件后添加到工具栏即可

void MainWindow::SetColor()
{
    color = QColorDialog::getColor(static_cast<int>(Qt::black),this);
    if(color.isValid())
    {
        QPixmap p(20,20);
        p.fill(color);
        this->button_color->setIcon(p);
    }
}

按键创建图标

2创建画布

    pix = new QPixmap(size());

    pix->fill(Qt::white);

3画笔的设置

void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    QPainter *painter = new QPainter;
    QPen pen;  // creates a default pen
    pen.setStyle((Qt::PenStyle)style);
    //pen.setStyle(Qt::SolidLine);
    weight = this->line_width->value();
    pen.setWidth(weight);
    //pen.setBrush(Qt::green);
    pen.setColor(color);
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::RoundJoin);
    painter->begin(pix);
    painter->setPen(pen);
    painter->drawLine(startPos,event->pos());
    painter->end();
    startPos =event->pos();				//更新鼠标的当前位置，为下次绘制做准备
    update();
    //qDebug("mouseMoveEvent_ok2");
}

    QPainter *painter = new QPainter;

    QPen pen;  // creates a default pen

    pen.setStyle((Qt::PenStyle)style);

    //pen.setStyle(Qt::SolidLine);

    weight = this->line_width->value();

    pen.setWidth(weight);

    //pen.setBrush(Qt::green);

    pen.setColor(color);

    pen.setCapStyle(Qt::RoundCap);

    pen.setJoinStyle(Qt::RoundJoin);

    painter->begin(pix);

    painter->setPen(pen);

4鼠标的动作

void MainWindow::mousePressEvent(QMouseEvent *event)
{
    startPos = event->pos();
    qDebug("mousePressEvent_ok");
}
void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    QPainter *painter = new QPainter;
    QPen pen;  // creates a default pen
    pen.setStyle((Qt::PenStyle)style);
    //pen.setStyle(Qt::SolidLine);
    weight = this->line_width->value();
    pen.setWidth(weight);
    //pen.setBrush(Qt::green);
    pen.setColor(color);
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::RoundJoin);
    painter->begin(pix);
    painter->setPen(pen);
    painter->drawLine(startPos,event->pos());
    painter->end();
    startPos =event->pos();				//更新鼠标的当前位置，为下次绘制做准备
    update();
    //qDebug("mouseMoveEvent_ok2");
}

鼠标的动作的函数当鼠标有相应动作时自动触发