本文目的：編輯自定義控制元件的介面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程式碼

<span style="font-family:Times New Roman;font-size:14px;">#ifndef SOF_INTERFACE_H
#define SOF_INTERFACE_H

#include <QWidget>
#include <QAbstractButton>
namespace Ui {
class sof_Interface;
}

class sof_Interface : public QWidget
{
    Q_OBJECT

public:
    explicit sof_Interface(QWidget *parent = 0);
    ~sof_Interface();

    void paint(QImage&theImage);
    enum Type{
        type1,
        type2,
        type3,
    };

private slots:
    void on_doOpen_clicked();//開啟圖片
    void on_doSave_clicked();//儲存圖片
    void on_buttonBox_clicked(QAbstractButton *button);//ok、cancel
    void on_mou_Track_clicked();//曲線
    void on_arrow_Edit_clicked();//箭頭
    void on_text_Edit_clicked();//文字
private:
    Ui::sof_Interface *ui;
    QString curFile;                      //開啟檔名
    bool isOpen;
    Type path_type;                       //畫的圖形種類
    QImage  image,tempImage;              //原圖、快取圖片
    QPixmap pic;                          //用於顯示圖片
    bool isDrawing;
    QPoint begin,end;
    QPoint end_pos;                       //滑鼠釋放時的位置
    QString Text;                         //儲存文字變數
protected:
 void mousePressEvent(QMouseEvent *e);    //滑鼠按下事件
 void mouseMoveEvent(QMouseEvent *e);     //滑鼠移動事件
 void mouseReleaseEvent(QMouseEvent *e);  //滑鼠釋放事
 void paintEvent(QPaintEvent *);          //重繪事件
};

#endif // SOF_INTERFACE_H
</span>
 

sof_Interface.cpp中程式碼

<span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h"
#include "ui_sof_interface.h"
#include <QFileDialog>
#include <QPainter>
#include <QMessageBox>
#include <QMouseEvent>
#include <QlineEdit>
sof_Interface::sof_Interface(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::sof_Interface)
{
    ui->setupUi(this);
    isOpen=false;
    path_type=type1;//初始化
    isDrawing=false;//初始化
 }

sof_Interface::~sof_Interface()
{
    delete ui;
}
/////////////////////////////槽函式/////////////////////////////
void sof_Interface::on_doOpen_clicked()                               //開啟圖片槽函式
{
     QString fileName = QFileDialog::getOpenFileName(
                       this, "開啟圖片",
                       "",
                       "圖片格式 (*.bmp *.jpg *.jpeg *.png)");
      if(fileName !=NULL)
        {
         image.load(fileName);
         curFile=fileName;
         isOpen=true;
        }
      update();
}

void sof_Interface::on_doSave_clicked()                                //儲存圖片槽函式
{
    QString path = QFileDialog::getSaveFileName(
                 this, tr("儲存圖片"),
         "","圖片格式 (*.bmp *.jpg *.jpeg *.png)");
    image.save(path);
}

void sof_Interface::on_buttonBox_clicked(QAbstractButton *button)      //lineEdit命令列輸入槽函式
{
    QString str;

    if(ui->buttonBox->button(QDialogButtonBox::Ok)  == button) //判斷按下的是否為"確定”按鈕
    {
        if(!ui->lineEdit->text().isEmpty())                    //判斷lineEdit是否為空，不為空返回0
        {
            str += ui->lineEdit->text()+"\n";                  //str連線lineEdit中的內容
            Text=str;                                          //在圖片上寫入lineEdit中輸入的文字
            str="";
        }

    }
    else if(button == ui->buttonBox->button((QDialogButtonBox::Cancel)))
      {
           ui->lineEdit->clear();

      }
}

void sof_Interface::on_mou_Track_clicked()                            //曲線槽函式
{
    path_type=type1;
}

void sof_Interface::on_arrow_Edit_clicked()                           //箭頭槽函式
{
    path_type=type2;
}

void sof_Interface::on_text_Edit_clicked()                            //文字槽函式
{
    path_type=type3;
}

////////////////////////////滑鼠事件////////////////////////////


void sof_Interface::mousePressEvent(QMouseEvent *e)                  //滑鼠按下事件
{
   begin=e->pos();
}

void sof_Interface::mouseMoveEvent(QMouseEvent *e)                   //滑鼠移動事件
{
    end=e->pos();

    if(path_type==type1)  //只有path_type==type1才繪製在image上(原圖)，這時isDrawing=false;
    {
        isDrawing=false;
        paint(image);
    }
    else                  //其他path_type全繪製在tempImage上(緩衝圖上)
    {
        isDrawing=true;
        tempImage=image;
        paint(tempImage);
    }
}

void sof_Interface::mouseReleaseEvent(QMouseEvent *e)                //滑鼠釋放事件
{
      end=e->pos();
      isDrawing=false;
      paint(image);

}

/////////////////////////paintEvent事件////////////////////////////
void sof_Interface::paintEvent(QPaintEvent *)
{
    QPainter p(this);
    if(isDrawing)
      p.drawImage(0,0,tempImage);
    else
      p.drawImage(0,0,image);

    if(isOpen=true)   //開啟圖片操作
    {
        pic=QPixmap::fromImage(image);
        QPainter painter(this);
        painter.drawPixmap(0,0,748,480,pic);
    }
}

////////////////////////每個畫圖的函式////////////////////////////
void sof_Interface::paint(QImage &theImage)
{
    QPainter pp(&theImage);

    pp.setCompositionMode(QPainter::CompositionMode_SourceIn);    //設定畫刷的組合模式CompositionMode_SourceOut這個模式為目標影象在上。
    pp.setPen(QPen(QBrush(Qt::red), 2, Qt::SolidLine));           //設定畫筆(顏色,線寬,樣式(實線))
    pp.setRenderHint(QPainter::Antialiasing, true);               //設定線段反鋸齒
    QFont font = pp.font();                                       //設定字型
    font.setPixelSize(20);                                        //改變字型大小
    font.setBold(false);                                          //字型是否加粗
    pp.setFont(font);                                             //設定字型

    if(path_type==type1)                                          //曲線
    {
        pp.drawLine(begin,end);
        begin=end;
    }

    if(path_type==type2)                                          //箭頭
    {
        float x1 = begin.x();                                     //取points[0]起點的x
        float y1 = begin.y();                                     //取points[0]起點的y
        float x2 = end.x();                                       //取points[count-1]終點的x
        float y2 = end.y();                                       //取points[count-1]終點的y
        float l = 10.0;                                           //箭頭的長度
        float a = 0.5;                                            //箭頭與線段角度
        float x3 = x2 - l * cos(atan2((y2 - y1) , (x2 - x1)) - a);//計算箭頭的終點（x3,y3）
        float y3 = y2 - l * sin(atan2((y2 - y1) , (x2 - x1)) - a);
        float x4 = x2 - l * sin(atan2((x2 - x1) , (y2 - y1)) - a);//計算箭頭的終點（x4,y4）
        float y4 = y2 - l * cos(atan2((x2 - x1) , (y2 - y1)) - a);
        pp.drawLine(x2,y2,x3,y3);                                 //繪製箭頭(x2,y2,x3,y3)
        pp.drawLine(x2,y2,x4,y4);                                 //繪製箭頭(x2,y2,x4,y4)
        pp.drawLine(begin,end);                                   //繪製主幹箭頭(begin,end)
    }

    if(path_type==type3)                                          //文字
    {
       pp.drawText(begin.x(),begin.y(),Text);
    }

    update();
}
</span>

main.pp中程式碼

<span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h"
#include <QApplication>

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

    return a.exec();
}</span>

3.介面執行效果，還可以儲存哦，注意圖片格式只能載入.jpg.jpeg.png.bmp,需要擴充套件的自己在程式碼中新增吧！當然還可以更改介面背景色等，自己去改哦~這只是個demo。

二、將自己第一步寫的sof_Interface工程.h和.cpp的程式碼拷貝到自定義控制元件工程的.h和.cpp中即可寫成自定義控制元件工程了，注意程式碼不能完全貼上複製哦，注意自己建立工程的類名，除非你和我的一樣。然後編譯後見一下.dll和.lib，並放到相應的designer中，具體可參考【Qt自定義控制元件的建立與初步使用（一）這篇部落格】。

三、這樣你再新建立任意一個工程，你都可以在Qt creator或Qt 設計師中找到自己建立的控制元件，然後拖拽到工程的ui介面中，最後拷貝自定義控制元件.h和.cpp到這個新工程的工程目錄下，注意和第二大步不一樣哦~，就可以編譯執行啦。再次就不給效果圖啦~