【Qt项目】Qt制作画板

本文转载自查看原文 2012-03-21 22:17 4051 【Qt学习之路】

　　Qt学习时间已经接近两个月的时间了

　　在这一月的学习收获比较大

　　从学习中个人感觉只有项目能让你的成长加速

　　　　下面是我个人写了一天的项目的成果

　　　　在这个项目中得到了旁边同学的指点才得以将一些困难解决

　　　　在这个程序中我也深深体会到DEBUG（）这个函数的重要性

　　　　程序虽简单但要调试出还是有点麻烦的，有很多细节都需要考虑

 1 #ifndef MAINWINDOW_H
 2 #define MAINWINDOW_H
 3 
 4 #include <QMainWindow>
 5 #include <QtGui>
 6 
 7 
 8 namespace Ui {
 9     class MainWindow;
10 }
11 
12 class MainWindow : public QMainWindow
13 {
14     Q_OBJECT
15 
16 public:
17     explicit MainWindow(QWidget *parent = 0);
18     ~MainWindow();
19 
20 
21     enum DrawType{None, Line, Rect, Ellipse};
22 
23 protected:
24     void paintEvent(QPaintEvent *);
25     void mousePressEvent(QMouseEvent *);
26     void mouseReleaseEvent(QMouseEvent *);
27     void mouseMoveEvent(QMouseEvent *);
28     void paint(QPixmap &thePixmap);
29 
30 
31 private slots:
32     void on_horizontalSlider_valueChanged(int value);
33 
34 private:
35     Ui::MainWindow *ui;
36     QPainter *painter;
37     QPixmap pixmap;
38     QPixmap tempPixmap;
39     QPoint firstPoint;
40     QPoint secondPoint;
41     QPen pen;
42     QBrush brush;
43     QColor backColor;
44     QColor penColor;
45     QColor brushColor;
46     Qt::PenStyle penStyle;
47     int penWidth;
48 
49     int x;
50     int y;
51     int w;
52     int h;
53 
54     DrawType drawType;
55     bool isDrawing;
56 
57     QAction *openFileAction;
58 
59 private slots:
60     void on_comboBoxPen_currentIndexChanged(int index);
61     void on_comboBoxBrush_currentIndexChanged(int index);
62     void on_solidlineAction_triggered();
63     void on_openFileAction_triggered();
64     void on_saveAction_triggered();
65     void on_dottedAction_triggered();
66     void on_colorAction_triggered();
67     void on_rectAction_triggered();
68     void on_clearAction_triggered();
69     void on_ellipseAction_triggered();
70     void on_lineAction_triggered();
71     void on_comboBox_currentIndexChanged(int index);
72 };
73 
74 #endif // MAINWINDOW_H

这个是头文件的编写，没什么好说的

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

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    setWindowTitle(tr("Qt画板"));
    QPixmap pix(16,16);
    QPainter painter(&pix);

    painter.fillRect(0,0,16,16,Qt::black);   //先绘制一个16*16的小图片，然后给其涂色
    ui->comboBoxPen->addItem(QIcon(pix),tr("黑色"),Qt::black); //再用该图片作为组合框条目的图标
    ui->comboBoxBrush->addItem(QIcon(pix),tr("黑色"),Qt::black);
    painter.fillRect(0,0,16,16,Qt::white);
    ui->comboBoxPen->addItem(QIcon(pix),tr("白色"),Qt::white);
    ui->comboBoxBrush->addItem(QIcon(pix),tr("白色"),Qt::white);
    painter.fillRect(0,0,16,16,Qt::red);
    ui->comboBoxPen->addItem(QIcon(pix),tr("红色"),Qt::red);
    ui->comboBoxBrush->addItem(QIcon(pix),tr("红色"),Qt::red);
    painter.fillRect(0,0,16,16,Qt::green);
    ui->comboBoxPen->addItem(QIcon(pix),tr("绿色"),Qt::green);
    ui->comboBoxBrush->addItem(QIcon(pix),tr("绿色"),Qt::green);
    painter.fillRect(0,0,16,16,Qt::blue);
    ui->comboBoxPen->addItem(QIcon(pix),tr("蓝色"),Qt::blue);
    ui->comboBoxBrush->addItem(QIcon(pix),tr("蓝色"),Qt::blue);
    painter.fillRect(0,0,16,16,Qt::yellow);
    ui->comboBoxPen->addItem(QIcon(pix),tr("黄色"),Qt::yellow);
    ui->comboBoxBrush->addItem(QIcon(pix),tr("黄色"),Qt::yellow);

    ui->comboBoxPen->addItem(tr("无颜色"),Qt::transparent);  //即透明
    ui->comboBoxBrush->addItem(tr("无颜色"),Qt::transparent);

    ui->openFileAction->setIcon(QIcon(":/png/open.png"));
    ui->openFileAction->setStatusTip(tr("openFile"));
    ui->mainToolBar->addAction(ui->openFileAction);

    ui->saveAction->setIcon(QIcon(":/png/save.png"));
    ui->saveAction->setStatusTip(tr("save"));
    ui->mainToolBar->addAction(ui->saveAction);

    ui->exitAction->setIcon(QIcon(":/png/exit.png"));
    ui->exitAction->setStatusTip(tr("exit"));
    ui->mainToolBar->addAction(ui->exitAction);

    ui->colorAction->setIcon(QIcon(":/png/color.png"));
    ui->colorAction->setStatusTip(tr("Pixmap Color"));
    ui->mainToolBar->addAction(ui->colorAction);

    ui->clearAction->setIcon(QIcon(":/png/clear.png"));
    ui->clearAction->setStatusTip(tr("clear"));
    ui->mainToolBar->addAction(ui->clearAction);

    ui->lineAction->setIcon(QIcon(":/png/line.png"));
    ui->lineAction->setStatusTip(tr("line"));
    ui->mainToolBar->addAction(ui->lineAction);

    ui->rectAction->setIcon(QIcon(":/png/rect.png"));
    ui->rectAction->setStatusTip(tr("rect"));
    ui->mainToolBar->addAction(ui->rectAction);

    ui->ellipseAction->setIcon(QIcon(":/png/ellipse.png"));
    ui->ellipseAction->setStatusTip(tr("ellipse"));
    ui->mainToolBar->addAction(ui->ellipseAction);

    ui->dottedAction->setIcon(QIcon(":/png/dotted.png"));
    ui->dottedAction->setStatusTip(tr("dotted"));
    ui->mainToolBar->addAction(ui->dottedAction);

    ui->solidlineAction->setIcon(QIcon(":/png/solidline.png"));
    ui->solidlineAction->setStatusTip(tr("solidline"));
    ui->mainToolBar->addAction(ui->solidlineAction);

    pixmap = QPixmap(500,400);
    pixmap.fill(Qt::white);
    backColor = QColor(Qt::white);
    firstPoint = QPoint(0,0);
    secondPoint = QPoint(0,0);
    brushColor = Qt::red;
    tempPixmap.fill(backColor);
    penWidth = 1;
    isDrawing = false;
}

构造函数中对控件的控制

其中下面的的这段代码是，我第一次用的方式，就是各一个COMBOBOX潜入颜色的选择

 1 QPixmap pix(16,16);
 2     QPainter painter(&pix);
 3 
 4     painter.fillRect(0,0,16,16,Qt::black);   //先绘制一个16*16的小图片，然后给其涂色
 5     ui->comboBoxPen->addItem(QIcon(pix),tr("黑色"),Qt::black); //再用该图片作为组合框条目的图标
 6     ui->comboBoxBrush->addItem(QIcon(pix),tr("黑色"),Qt::black);
 7     painter.fillRect(0,0,16,16,Qt::white);
 8     ui->comboBoxPen->addItem(QIcon(pix),tr("白色"),Qt::white);
 9     ui->comboBoxBrush->addItem(QIcon(pix),tr("白色"),Qt::white);
10     painter.fillRect(0,0,16,16,Qt::red);
11     ui->comboBoxPen->addItem(QIcon(pix),tr("红色"),Qt::red);
12     ui->comboBoxBrush->addItem(QIcon(pix),tr("红色"),Qt::red);
13     painter.fillRect(0,0,16,16,Qt::green);
14     ui->comboBoxPen->addItem(QIcon(pix),tr("绿色"),Qt::green);
15     ui->comboBoxBrush->addItem(QIcon(pix),tr("绿色"),Qt::green);
16     painter.fillRect(0,0,16,16,Qt::blue);
17     ui->comboBoxPen->addItem(QIcon(pix),tr("蓝色"),Qt::blue);
18     ui->comboBoxBrush->addItem(QIcon(pix),tr("蓝色"),Qt::blue);
19     painter.fillRect(0,0,16,16,Qt::yellow);
20     ui->comboBoxPen->addItem(QIcon(pix),tr("黄色"),Qt::yellow);
21     ui->comboBoxBrush->addItem(QIcon(pix),tr("黄色"),Qt::yellow);
22 
23     ui->comboBoxPen->addItem(tr("无颜色"),Qt::transparent);  //即透明
24     ui->comboBoxBrush->addItem(tr("无颜色"),Qt::transparent);

如果要在COMBOBOX中选择颜色，这里有个技巧QColorcolor=ui->comboBoxBrush->itemData(index,Qt::UserRole).value<QColor>();读取颜色

1 void MainWindow::on_comboBoxBrush_currentIndexChanged(int index)
2 {
3     QColor color = ui->comboBoxBrush->itemData(index,Qt::UserRole).value<QColor>();
4     brushColor = color;
5     brush.setColor(brushColor);
6     qDebug()<<brush.color();
7 }

事件的实现

 1 void MainWindow::paintEvent(QPaintEvent *event)
 2 {
 3     painter = new QPainter(this);
 4 
 5     //QPainter draw(&pixmap);
 6 //pen.setCapStyle(Qt::RoundCap);
 7 //painter->setBrush(brushColor);
 8     if(isDrawing)
 9     {
10         painter->drawPixmap(0,60,tempPixmap);
11     }
12     else
13     {
14         painter->drawPixmap(0,60,pixmap);
15     }
16 
17 }

鼠标的状态读取

 1 void MainWindow::mousePressEvent(QMouseEvent *event)
 2 {
 3     if(event->button() == Qt::LeftButton)
 4     {
 5         qDebug()<<"left press";
 6         firstPoint = event->pos();
 7         isDrawing = true;
 8     }
 9     update();
10 }
11 
12 void MainWindow::mouseReleaseEvent(QMouseEvent *event)
13 {
14     if(event->button() == Qt::LeftButton)
15     {
16         secondPoint = event->pos();
17         paint(pixmap);
18         isDrawing = false;
19     }
20     update();
21 }
22 void MainWindow::mouseMoveEvent(QMouseEvent *event)
23 {
24     qDebug()<<event->button();
25     //if(event->button()==Qt::LeftButton)
26     {
27         secondPoint = event->pos();
28 
29         //paint(pixmap);
30         if(drawType == None)
31         {
32             paint(pixmap);
33             isDrawing = false;
34         }
35         else
36         {
37 
38             tempPixmap = pixmap;
39             paint(tempPixmap);
40         }
41     }
42     update();
43 }

几个控件的槽机制的实现

 1 void MainWindow::on_horizontalSlider_valueChanged(int value)
 2 {
 3     penWidth = value;
 4     pen.setWidth(penWidth);
 5 
 6 }
 7 
 8 void MainWindow::on_comboBoxPen_currentIndexChanged(int index)
 9 {
10     QColor color = ui->comboBoxPen->itemData(index,Qt::UserRole).value<QColor>();
11     penColor = color;
12     pen.setColor(penColor);
13 
14 }
15 
16 
17 
18 void MainWindow::on_comboBoxBrush_currentIndexChanged(int index)
19 {
20     QColor color = ui->comboBoxBrush->itemData(index,Qt::UserRole).value<QColor>();
21     brushColor = color;
22     brush.setColor(brushColor);
23     qDebug()<<brush.color();
24 }
25 
26 void MainWindow::on_solidlineAction_triggered()
27 {
28     penStyle = Qt::SolidLine;
29     pen.setStyle(penStyle);
30 
31 }

 1 void MainWindow::on_dottedAction_triggered()
 2 {
 3     penStyle = Qt::DotLine;
 4     pen.setStyle(penStyle);
 5 
 6 }
 7 
 8 void MainWindow::on_colorAction_triggered()
 9 {
10     QColor color = QColorDialog::getColor(Qt::yellow,this);
11 
12 
13     if(color.isValid())
14     {
15         pixmap.fill(color);
16         backColor = color;
17     }
18 }
19 
20 void MainWindow::on_rectAction_triggered()
21 {
22    drawType = Rect;
23 }
24 
25 void MainWindow::on_clearAction_triggered()
26 {
27     pixmap.fill(backColor);
28     update();
29 }
30 
31 void MainWindow::on_ellipseAction_triggered()
32 {
33    drawType = Ellipse;
34 }

 1 void MainWindow::on_openFileAction_triggered()
 2 {
 3     QFileDialog *file= new QFileDialog(this,"Open");
 4 
 5     file->setFilter("PNG(*.png);JPG(*.jpg)");
 6     file->setDirectory("d:/learn/");
 7     file->setFileMode(QFileDialog::ExistingFiles);
 8     file->setViewMode(QFileDialog::List);
 9     file->resize(320,240);
10     if(file->exec()==QFileDialog::Accepted)
11     {
12         QString fileName = (file->selectedFiles().at(0));
13         if(!fileName.isEmpty())
14         {
15             pixmap.load(fileName);
16             //painter->translate(50,70);
17             painter->drawPixmap(0,60,pixmap.width(),pixmap.height(),pixmap);
18         }
19     }
20 }
21 
22 void MainWindow::on_saveAction_triggered()
23 {
24     QFileDialog *file = new QFileDialog(this,"Save As");
25     file->setAcceptMode(QFileDialog::AcceptSave);//系统默认保存的界面是打开，这句将其改为保存按钮
26     file->setFilter("JPG(.jpg)");
27     file->setFileMode(QFileDialog::AnyFile);
28 
29     file->resize(320,240);
30 
31     if(file->exec() == QFileDialog::Accepted)
32     {
33         QString fileName = file->selectedFiles().at(0);
34 
35         qDebug()<<fileName;
36 
37         if(pixmap.save(fileName))
38         {
39             qDebug()<<"save success";
40         }
41         else
42         {
43             qDebug()<<"save error";
44         }
45     }

1 void MainWindow::on_lineAction_triggered()
2 {
3     drawType = Line;
4 }
5 
6 void MainWindow::on_comboBox_currentIndexChanged(int index)
7 {
8     ui->horizontalSlider->setValue(index);
9 }

 1 void MainWindow::paint(QPixmap &thePixmap)
 2 {
 3     QPainter draw(&thePixmap);
 4     draw.setPen(pen);
 5     draw.setBrush(brushColor);
 6     x = firstPoint.x();
 7     y = firstPoint.y();
 8     w = secondPoint.x()-x;
 9     h = secondPoint.y()-y;
10 
11     switch(drawType)
12     {
13     case None:
14         draw.drawLine(x,y-60,secondPoint.x(),secondPoint.y()-60);
15         firstPoint = secondPoint;
16         break;
17     case Line:
18         draw.drawLine(x,y-60,secondPoint.x(),secondPoint.y()-60);
19         break;
20     case Rect:
21         draw.drawRect(x,y-60,w,h);
22         break;
23     case Ellipse:
24         draw.drawEllipse(x,y-60,w,h);
25         break;
26     }
27     update();
28 }

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Unity3D 使用LineRenderer制作画板功能 Qt 简易画板 Qt5_简易画板_详细注释 qt制作连连看 Qt制作报表 Qt ------ 制作独立弹出框 Qt制作一个ListView列表基于Qt的wifi智能小车的制作(一) 用JS制作canvas画板利用Qt制作一个helloworld