您的位置: 首页  >  文章  >  Qt自定义控件的创建与初步使用（二）之图片上绘制文字、箭头、曲线

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

分类: 文章 • 2023-11-11 23:35:34

本文目的：编辑自定义控件的界面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，然后一路下一步，这样你就完成了一个工程的创建（先在这个工程上把需要的界面写好）

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

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

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

2.打开.ui界面，此处为5个功能：打开图片、保存图片、在图片上添加文字、曲线、箭头符号。拖拽5个pushbotton、1个QLabel、1个QLineEdit、1个QDialogbottonbox，并按图所示排号界面，并选中，右键点击转到槽，从而创建相关的槽函数。并添加代码。Qt自定义控件的创建与初步使用（二）之图片上绘制文字、箭头、曲线

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。

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

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

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


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

相关推荐