Qt自定义控件的创建与初步使用（二）之图片上绘制文字、箭头、曲线

本文目的：编辑自定义控件的界面ui，并在图片上添文字、箭头、曲线、打开、保存等功能。并说明了如何去使用这个编辑好的ui界面控件！

上次简单的说明了如何去创建Qt自定义控件，当时还是对其了解不够深刻，现在看来，QT自定义控件就是你事先把界面写好（一般基于QWidget基类），然后再把它写入QT自定义控件的工程【可参考Qt自定义控件的创建与初步使用（一）这篇博客】中去，最后放到别的工程中，通过简单的拖拽和拷贝就可以用了。那怎么样去做和使用这个自定义的控件呢?又要注意什么呢？具体分为三大步，下面给大家娓娓道来！

配置：Qt creator5.7，Qt 5.7+VS2013（64位）（有人喜欢用后者，全凭个人爱好，我用的是creator），本篇案例的说明用的是Qt5.6（因为本人的电脑装的是Qt5.6，公司的电脑装的是Qt5.7），建议最好用Qt5.7，但实际操作中不会有太大差别。

一、建立基类是QWidget的Qt Application工程，把界面写好。
1.建立一个Qt Application工程，命名为 sof_Interface，基类是QWidget，然后一路下一步，这样你就完成了一个工程的创建（先在这个工程上把需要的界面写好）

2.打开.ui界面，此处为5个功能：打开图片、保存图片、在图片上添加文字、曲线、箭头符号。拖拽5个pushbotton、1个QLabel、1个QLineEdit、1个QDialogbottonbox，并按图所示排号界面，并选中，右键点击转到槽，从而创建相关的槽函数。并添加代码。

sof_Interface.h代码

[html] view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;">#ifndef SOF_INTERFACE_H  
2. #define SOF_INTERFACE_H  
3.   
4. #include <QWidget>  
5. #include <QAbstractButton>  
6. namespace Ui {  
7. class sof_Interface;  
8. }  
9.   
10. class sof_Interface : public QWidget  
11. {  
12.     Q_OBJECT  
13.   
14. public:  
15.     explicit sof_Interface(QWidget *parent = 0);  
16.     ~sof_Interface();  
17.   
18.     void paint(QImage&theImage);  
19.     enum Type{  
20.         type1,  
21.         type2,  
22.         type3,  
23.     };  
24.   
25. private slots:  
26.     void on_doOpen_clicked();//打开图片  
27.     void on_doSave_clicked();//保存图片  
28.     void on_buttonBox_clicked(QAbstractButton *button);//ok、cancel  
29.     void on_mou_Track_clicked();//曲线  
30.     void on_arrow_Edit_clicked();//箭头  
31.     void on_text_Edit_clicked();//文字  
32. private:  
33.     Ui::sof_Interface *ui;  
34.     QString curFile;                      //打开文件名  
35.     bool isOpen;  
36.     Type path_type;                       //画的图形种类  
37.     QImage  image,tempImage;              //原图、缓存图片  
38.     QPixmap pic;                          //用于显示图片  
39.     bool isDrawing;  
40.     QPoint begin,end;  
41.     QPoint end_pos;                       //鼠标释放时的位置  
42.     QString Text;                         //存储文字变量  
43. protected:  
44.  void mousePressEvent(QMouseEvent *e);    //鼠标按下事件  
45.  void mouseMoveEvent(QMouseEvent *e);     //鼠标移动事件  
46.  void mouseReleaseEvent(QMouseEvent *e);  //鼠标释放事  
47.  void paintEvent(QPaintEvent *);          //重绘事件  
48. };  
49.   
50. #endif // SOF_INTERFACE_H  
51. </span>  

sof_Interface.cpp中代码

[cpp] view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h"  
2. #include "ui_sof_interface.h"  
3. #include <QFileDialog>  
4. #include <QPainter>  
5. #include <QMessageBox>  
6. #include <QMouseEvent>  
7. #include <QlineEdit>  
8. sof_Interface::sof_Interface(QWidget *parent) :  
9.     QWidget(parent),  
10.     ui(new Ui::sof_Interface)  
11. {  
12.     ui->setupUi(this);  
13.     isOpen=false;  
14.     path_type=type1;//初始化  
15.     isDrawing=false;//初始化  
16.  }  
17.   
18. sof_Interface::~sof_Interface()  
19. {  
20.     delete ui;  
21. }  
22. /////////////////////////////槽函数/////////////////////////////  
23. void sof_Interface::on_doOpen_clicked()                               //打开图片槽函数  
24. {  
25.      QString fileName = QFileDialog::getOpenFileName(  
26.                        this, "打开图片",  
27.                        "",  
28.                        "图片格式 (*.bmp *.jpg *.jpeg *.png)");  
29.       if(fileName !=NULL)  
30.         {  
31.          image.load(fileName);  
32.          curFile=fileName;  
33.          isOpen=true;  
34.         }  
35.       update();  
36. }  
37.   
38. void sof_Interface::on_doSave_clicked()                                //保存图片槽函数  
39. {  
40.     QString path = QFileDialog::getSaveFileName(  
41.                  this, tr("保存图片"),  
42.          "","图片格式 (*.bmp *.jpg *.jpeg *.png)");  
43.     image.save(path);  
44. }  
45.   
46. void sof_Interface::on_buttonBox_clicked(QAbstractButton *button)      //lineEdit命令行输入槽函数  
47. {  
48.     QString str;  
49.   
50.     if(ui->buttonBox->button(QDialogButtonBox::Ok)  == button) //判断按下的是否为"确定”按钮  
51.     {  
52.         if(!ui->lineEdit->text().isEmpty())                    //判断lineEdit是否为空，不为空返回0  
53.         {  
54.             str += ui->lineEdit->text()+"\n";                  //str连接lineEdit中的内容  
55.             Text=str;                                          //在图片上写入lineEdit中输入的文字  
56.             str="";  
57.         }  
58.   
59.     }  
60.     else if(button == ui->buttonBox->button((QDialogButtonBox::Cancel)))  
61.       {  
62.            ui->lineEdit->clear();  
63.   
64.       }  
65. }  
66.   
67. void sof_Interface::on_mou_Track_clicked()                            //曲线槽函数  
68. {  
69.     path_type=type1;  
70. }  
71.   
72. void sof_Interface::on_arrow_Edit_clicked()                           //箭头槽函数  
73. {  
74.     path_type=type2;  
75. }  
76.   
77. void sof_Interface::on_text_Edit_clicked()                            //文字槽函数  
78. {  
79.     path_type=type3;  
80. }  
81.   
82. ////////////////////////////鼠标事件////////////////////////////  
83.   
84.   
85. void sof_Interface::mousePressEvent(QMouseEvent *e)                  //鼠标按下事件  
86. {  
87.    begin=e->pos();  
88. }  
89.   
90. void sof_Interface::mouseMoveEvent(QMouseEvent *e)                   //鼠标移动事件  
91. {  
92.     end=e->pos();  
93.   
94.     if(path_type==type1)  //只有path_type==type1才绘制在image上(原图)，这时isDrawing=false;  
95.     {  
96.         isDrawing=false;  
97.         paint(image);  
98.     }  
99.     else                  //其他path_type全绘制在tempImage上(缓冲图上)  
100.     {  
101.         isDrawing=true;  
102.         tempImage=image;  
103.         paint(tempImage);  
104.     }  
105. }  
106.   
107. void sof_Interface::mouseReleaseEvent(QMouseEvent *e)                //鼠标释放事件  
108. {  
109.       end=e->pos();  
110.       isDrawing=false;  
111.       paint(image);  
112.   
113. }  
114.   
115. /////////////////////////paintEvent事件////////////////////////////  
116. void sof_Interface::paintEvent(QPaintEvent *)  
117. {  
118.     QPainter p(this);  
119.     if(isDrawing)  
120.       p.drawImage(0,0,tempImage);  
121.     else  
122.       p.drawImage(0,0,image);  
123.   
124.     if(isOpen=true)   //打开图片操作  
125.     {  
126.         pic=QPixmap::fromImage(image);  
127.         QPainter painter(this);  
128.         painter.drawPixmap(0,0,748,480,pic);  
129.     }  
130. }  
131.   
132. ////////////////////////每个画图的函数////////////////////////////  
133. void sof_Interface::paint(QImage &theImage)  
134. {  
135.     QPainter pp(&theImage);  
136.   
137.     pp.setCompositionMode(QPainter::CompositionMode_SourceIn);    //设置画刷的组合模式CompositionMode_SourceOut这个模式为目标图像在上。  
138.     pp.setPen(QPen(QBrush(Qt::red), 2, Qt::SolidLine));           //设置画笔(颜色,线宽,样式(实线))  
139.     pp.setRenderHint(QPainter::Antialiasing, true);               //设置线段反锯齿  
140.     QFont font = pp.font();                                       //设置字体  
141.     font.setPixelSize(20);                                        //改变字体大小  
142.     font.setBold(false);                                          //字体是否加粗  
143.     pp.setFont(font);                                             //设置字体  
144.   
145.     if(path_type==type1)                                          //曲线  
146.     {  
147.         pp.drawLine(begin,end);  
148.         begin=end;  
149.     }  
150.   
151.     if(path_type==type2)                                          //箭头  
152.     {  
153.         float x1 = begin.x();                                     //取points[0]起点的x  
154.         float y1 = begin.y();                                     //取points[0]起点的y  
155.         float x2 = end.x();                                       //取points[count-1]终点的x  
156.         float y2 = end.y();                                       //取points[count-1]终点的y  
157.         float l = 10.0;                                           //箭头的长度  
158.         float a = 0.5;                                            //箭头与线段角度  
159.         float x3 = x2 - l * cos(atan2((y2 - y1) , (x2 - x1)) - a);//计算箭头的终点（x3,y3）  
160.         float y3 = y2 - l * sin(atan2((y2 - y1) , (x2 - x1)) - a);  
161.         float x4 = x2 - l * sin(atan2((x2 - x1) , (y2 - y1)) - a);//计算箭头的终点（x4,y4）  
162.         float y4 = y2 - l * cos(atan2((x2 - x1) , (y2 - y1)) - a);  
163.         pp.drawLine(x2,y2,x3,y3);                                 //绘制箭头(x2,y2,x3,y3)  
164.         pp.drawLine(x2,y2,x4,y4);                                 //绘制箭头(x2,y2,x4,y4)  
165.         pp.drawLine(begin,end);                                   //绘制主干箭头(begin,end)  
166.     }  
167.   
168.     if(path_type==type3)                                          //文字  
169.     {  
170.        pp.drawText(begin.x(),begin.y(),Text);  
171.     }  
172.   
173.     update();  
174. }  
175. </span>  

main.pp中代码

[cpp] view plain copy

1. <span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h"  
2. #include <QApplication>  
3.   
4. int main(int argc, char *argv[])  
5. {  
6.     QApplication a(argc, argv);  
7.     sof_Interface w;  
8.     w.show();  
9.   
10.     return a.exec();  
11. }</span>  

3.界面运行效果，还可以保存哦，注意图片格式只能加载.jpg.jpeg.png.bmp,需要扩展的自己在代码中添加吧！当然还可以更改界面背景色等，自己去改哦~这只是个demo。

二、将自己第一步写的sof_Interface工程.h和.cpp的代码拷贝到自定义控件工程的.h和.cpp中即可写成自定义控件工程了，注意代码不能完全粘贴复制哦，注意自己建立工程的类名，除非你和我的一样。然后编译后见一下.dll和.lib，并放到相应的designer中，具体可参考【Qt自定义控件的创建与初步使用（一）这篇博客】。

三、这样你再新建立任意一个工程，你都可以在Qt creator或Qt 设计师中找到自己建立的控件，然后拖拽到工程的ui界面中，最后拷贝自定义控件.h和.cpp到这个新工程的工程目录下，注意和第二大步不一样哦~，就可以编译运行啦。再次就不给效果图啦~

源博客地址：http://blog.csdn.net/panshun888/article/details/52074400