一、前言
在平時的寫作過程中，經常需要将一些操作動作和效果圖截圖成gif格式，使得涵蓋的資訊更全面更生動，有時候可以将整個操作過程和運作效果錄制成MP4，但是檔案體積比較大，而且很多網站不便于上傳，基本上都支援gif動圖，一般一個5秒左右的gif，800*600分辨率，可以很好的控制在500KB内，這樣就比較完美的支援各大網站上傳動圖。
最開始使用的是ScreenGif.exe，用了很久，感覺還可以，後面一個朋友推薦用LICEcap.exe，體積更小，壓縮比更高，再到後來發現有個gif.h開源的類，調用其中的方法可以實作将多張圖檔合并到一張gif中去，而且還是跨平台的，本人親自在WIN+UBUNTU測試成功。
最初的代碼是倪大俠給的，我在此基礎上重新完善了下，使得可以直接拖動窗體大小來改變錄屏區域的大小。增加了對Qt4和其他編譯器的支援。
二、實作的功能
* 1:可設定要錄制螢幕的寬高,支援右下角直接拉動改變.
* 2:可設定變寬的寬度
* 3:可設定錄屏控件的背景顔色
* 4:可設定錄制的幀數
* 5:錄制區域可自由拖動選擇
三、效果圖
四、核心代碼
#pragma execution_character_set("utf-8")#include "gifwidget.h"#include "qmutex.h"#include "qlabel.h"#include "qlineedit.h"#include "qpushbutton.h"#include "qlayout.h"#include "qpainter.h"#include "qevent.h"#include "qstyle.h"#include "qpixmap.h"#include "qtimer.h"#include "qdatetime.h"#include "qapplication.h"#include "qdesktopwidget.h"#include "qdesktopservices.h"#include "qfiledialog.h"#include "qurl.h"#include "qdebug.h"#if (QT_VERSION > QT_VERSION_CHECK(5,0,0))#include "qscreen.h"#endifQScopedPointer GifWidget::self;GifWidget *GifWidget::Instance(){ if (self.isNull()) { static QMutex mutex; QMutexLocker locker(&mutex); if (self.isNull()) { self.reset(new GifWidget); } } return self.data();}GifWidget::GifWidget(QWidget *parent) : QDialog(parent){ this->initControl(); this->initForm();}bool GifWidget::eventFilter(QObject *watched, QEvent *event){ static QPoint mousePoint; static bool mousePressed = false; QMouseEvent *mouseEvent = static_cast(event); if (mouseEvent->type() == QEvent::MouseButtonPress) { if (mouseEvent->button() == Qt::LeftButton) { mousePressed = true; mousePoint = mouseEvent->globalPos() - this->pos(); return true; } } else if (mouseEvent->type() == QEvent::MouseButtonRelease) { mousePressed = false; return true; } else if (mouseEvent->type() == QEvent::MouseMove) { if (mousePressed && (mouseEvent->buttons() && Qt::LeftButton)) { this->move(mouseEvent->globalPos() - mousePoint); return true; } } return QWidget::eventFilter(watched, event);}void GifWidget::resizeEvent(QResizeEvent *e){ //拉動右下角改變大小自動指派 txtWidth->setText(QString::number(widgetMain->width())); txtHeight->setText(QString::number(widgetMain->height())); QDialog::resizeEvent(e);}void GifWidget::paintEvent(QPaintEvent *){ int width = txtWidth->text().toInt(); int height = txtHeight->text().toInt(); rectGif = QRect(borderWidth, widgetTop->height(), width - (borderWidth * 2), height); QPainter painter(this); painter.setPen(Qt::NoPen); painter.setBrush(bgColor); painter.drawRoundedRect(this->rect(), 5, 5); painter.setCompositionMode(QPainter::CompositionMode_Clear); painter.fillRect(rectGif, Qt::SolidPattern);}int GifWidget::getBorderWidth() const{ return this->borderWidth;}QColor GifWidget::getBgColor() const{ return this->bgColor;}void GifWidget::initControl(){ this->setObjectName("GifWidget"); this->resize(800, 600); this->setSizeGripEnabled(true); QVBoxLayout *verticalLayout = new QVBoxLayout(this); verticalLayout->setSpacing(0); verticalLayout->setContentsMargins(11, 11, 11, 11); verticalLayout->setObjectName("verticalLayout"); verticalLayout->setContentsMargins(0, 0, 0, 0); widgetTop = new QWidget(this); widgetTop->setObjectName("widgetTop"); widgetTop->setMinimumSize(QSize(0, 35)); widgetTop->setMaximumSize(QSize(16777215, 35)); QHBoxLayout *layoutTop = new QHBoxLayout(widgetTop); layoutTop->setSpacing(0); layoutTop->setContentsMargins(11, 11, 11, 11); layoutTop->setObjectName("layoutTop"); layoutTop->setContentsMargins(0, 0, 0, 0); QPushButton *btnIcon = new QPushButton(widgetTop); btnIcon->setObjectName("btnIcon"); QSizePolicy sizePolicy(QSizePolicy::Minimum, QSizePolicy::Expanding); sizePolicy.setHorizontalStretch(0); sizePolicy.setVerticalStretch(0); sizePolicy.setHeightForWidth(btnIcon->sizePolicy().hasHeightForWidth()); btnIcon->setSizePolicy(sizePolicy); btnIcon->setMinimumSize(QSize(35, 0)); btnIcon->setFlat(true); layoutTop->addWidget(btnIcon); QLabel *labTitle = new QLabel(widgetTop); labTitle->setObjectName("labTitle"); layoutTop->addWidget(labTitle); QSpacerItem *horizontalSpacer = new QSpacerItem(87, 20, QSizePolicy::Expanding, QSizePolicy::Minimum); layoutTop->addItem(horizontalSpacer); QPushButton *btnClose = new QPushButton(widgetTop); btnClose->setObjectName("btnClose"); sizePolicy.setHeightForWidth(btnClose->sizePolicy().hasHeightForWidth()); btnClose->setSizePolicy(sizePolicy); btnClose->setMinimumSize(QSize(35, 0)); btnClose->setFocusPolicy(Qt::NoFocus); btnClose->setFlat(true); layoutTop->addWidget(btnClose); verticalLayout->addWidget(widgetTop); widgetMain = new QWidget(this); widgetMain->setObjectName("widgetMain"); QSizePolicy sizePolicy1(QSizePolicy::Preferred, QSizePolicy::Expanding); sizePolicy1.setHorizontalStretch(0); sizePolicy1.setVerticalStretch(0); sizePolicy1.setHeightForWidth(widgetMain->sizePolicy().hasHeightForWidth()); widgetMain->setSizePolicy(sizePolicy1); verticalLayout->addWidget(widgetMain); widgetBottom = new QWidget(this); widgetBottom->setObjectName("widgetBottom"); widgetBottom->setMinimumSize(QSize(0, 45)); widgetBottom->setMaximumSize(QSize(16777215, 45)); QHBoxLayout *layoutBottom = new QHBoxLayout(widgetBottom); layoutBottom->setSpacing(6); layoutBottom->setContentsMargins(11, 11, 11, 11); layoutBottom->setObjectName("layoutBottom"); layoutBottom->setContentsMargins(9, 9, -1, -1); QLabel *labFps = new QLabel(widgetBottom); labFps->setObjectName("labFps"); layoutBottom->addWidget(labFps); txtFps = new QLineEdit(widgetBottom); txtFps->setObjectName("txtFps"); txtFps->setMaximumSize(QSize(50, 16777215)); txtFps->setAlignment(Qt::AlignCenter); layoutBottom->addWidget(txtFps); QLabel *labWidth = new QLabel(widgetBottom); labWidth->setObjectName("labWidth"); layoutBottom->addWidget(labWidth); txtWidth = new QLineEdit(widgetBottom); txtWidth->setObjectName("txtWidth"); txtWidth->setEnabled(true); txtWidth->setMaximumSize(QSize(50, 16777215)); txtWidth->setAlignment(Qt::AlignCenter); layoutBottom->addWidget(txtWidth); QLabel *labHeight = new QLabel(widgetBottom); labHeight->setObjectName("labHeight"); layoutBottom->addWidget(labHeight); txtHeight = new QLineEdit(widgetBottom); txtHeight->setObjectName("txtHeight"); txtHeight->setEnabled(true); txtHeight->setMaximumSize(QSize(50, 16777215)); txtHeight->setAlignment(Qt::AlignCenter); layoutBottom->addWidget(txtHeight); labStatus = new QLabel(widgetBottom); labStatus->setObjectName("labStatus"); QSizePolicy sizePolicy2(QSizePolicy::Expanding, QSizePolicy::Preferred); sizePolicy2.setHorizontalStretch(0); sizePolicy2.setVerticalStretch(0); sizePolicy2.setHeightForWidth(labStatus->sizePolicy().hasHeightForWidth()); labStatus->setSizePolicy(sizePolicy2); labStatus->setAlignment(Qt::AlignCenter); layoutBottom->addWidget(labStatus); btnStart = new QPushButton(widgetBottom); btnStart->setObjectName("btnStart"); sizePolicy.setHeightForWidth(btnStart->sizePolicy().hasHeightForWidth()); btnStart->setSizePolicy(sizePolicy); layoutBottom->addWidget(btnStart); verticalLayout->addWidget(widgetBottom); labTitle->setText("GIF錄屏工具(QQ:517216493)"); labFps->setText("幀率"); labWidth->setText("寬度"); labHeight->setText("高度"); btnStart->setText("開始"); this->setWindowTitle(labTitle->text()); btnIcon->setIcon(style()->standardIcon(QStyle::SP_ComputerIcon)); btnClose->setIcon(style()->standardIcon(QStyle::SP_TitleBarCloseButton)); connect(btnClose, SIGNAL(clicked(bool)), this, SLOT(closeAll())); connect(btnStart, SIGNAL(clicked(bool)), this, SLOT(record())); connect(txtWidth, SIGNAL(editingFinished()), this, SLOT(resizeForm())); connect(txtHeight, SIGNAL(editingFinished()), this, SLOT(resizeForm()));}void GifWidget::initForm(){ borderWidth = 3; bgColor = QColor(34, 163, 169); fps = 10; txtFps->setText(QString::number(fps)); gifWriter = 0; timer = new QTimer(this); timer->setInterval(100); connect(timer, SIGNAL(timeout()), this, SLOT(saveImage())); this->setAttribute(Qt::WA_TranslucentBackground); this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint | Qt::WindowStaysOnTopHint); this->installEventFilter(this); QStringList qss; qss.append("QLabel{color:#ffffff;}"); qss.append("#btnClose,#btnIcon{border:none;border-radius:0px;}"); qss.append("#btnClose:hover{background-color:#ff0000;}"); qss.append("#btnClose{border-top-right-radius:5px;}"); qss.append("#labTitle{font:bold 16px;}"); qss.append("#labStatus{font:15px;}"); this->setStyleSheet(qss.join(""));}void GifWidget::saveImage(){ if (!gifWriter) { return; }#if (QT_VERSION <= QT_VERSION_CHECK(5,0,0)) //由于qt4沒有RGBA8888,采用最接近RGBA8888的是ARGB32,顔色會有點偏差 QPixmap pix = QPixmap::grabWindow(0, x() + rectGif.x(), y() + rectGif.y(), rectGif.width(), rectGif.height()); QImage image = pix.toImage().convertToFormat(QImage::Format_ARGB32);#else QScreen *screen = QApplication::primaryScreen(); QPixmap pix = screen->grabWindow(0, x() + rectGif.x(), y() + rectGif.y(), rectGif.width(), rectGif.height()); QImage image = pix.toImage().convertToFormat(QImage::Format_RGBA8888);#endif gif.GifWriteFrame(gifWriter, image.bits(), rectGif.width(), rectGif.height(), fps); count++; labStatus->setText(QString("正在錄制 第 %1 幀").arg(count));}void GifWidget::record(){ if (btnStart->text() == "開始") { if (0 != gifWriter) { delete gifWriter; gifWriter = 0; } //先彈出檔案儲存對話框 //fileName = qApp->applicationDirPath() + "/" + QDateTime::currentDateTime().toString("yyyy-MM-dd-hh-mm-ss.gif"); fileName = QFileDialog::getSaveFileName(this, "選擇儲存位置