基於Qt實現SVG圖片瀏覽器

2022-06-17 14:03:11

介紹

SVG的英文全稱是Scalable Vector Graphics，即可縮放的向量圖形。它是由全球資訊網聯盟（W3C）在2000年8月制定的一種新的二維向量圖形格式，也是規範中的網格適量圖形標準，是一個開放的圖形標準。

SVG格式的特點如下：

（1）基於XML

（2）採用文字來描述物件

（3）具有互動性和動態性

（4）完全支援DOM

SVG相對於GIF、JPEG格式的優勢是，SVG是一種向量圖形格式，比GIF、JPEG等柵格格式具有眾多優勢，如檔案小、可任意縮放而不破壞影象的清晰度和細節等。
Qt為SVG格式圖片的顯示與生成提供了專門的QtSvg模組，此模組中包含了與SVG圖片相關的所有類，主要有QSvgWidget、QSvgRender和QGraphicsSvgItem。

一、專案介紹

利用QtSvg實現SVG圖片瀏覽器，可以顯示SVG結尾的檔案圖片。

二、專案基本設定

新建一個Qt案例，專案名稱為“SVGTest”，基礎類別選擇“QMainWindow”，取消建立UI介面核取方塊的選中狀態，完成專案建立。

三、UI介面設計

無UI介面

四、主程式實現

4.1 .pro檔案

如果是QT5版本，需要在pro工程檔案中加入一行程式碼：

QT+=svg

如果是QT6版本，需要在pro工程檔案中加入一行程式碼：

QT+=svgwidgets

【不同Qt版本，新增的qmake不相同，這裡建議參考幫助檔案：】

4.2 新增SvgWindow類

專案名——>滑鼠右鍵——>Add New——>C++ Class——>新增如下內容

建立完成後，專案中會出現svgwindow.h和svgwindow.cpp。

4.3 新增SvgWidget類

專案名——>滑鼠右鍵——>Add New——>C++ Class——>新增如下內容

建立完成後，專案中會出現svgwidget.h和svgwidget.cpp，如下所示：

4.4 svgwidget.h標頭檔案

SvgWidget類繼承自QSvgWidget類，主要顯示SVG圖片。

在public中宣告一下響應滑鼠的捲動事件，使SVG圖片可以通過滑鼠捲動進行縮放，然後宣告render變數，用於圖片顯示尺寸的確定：

#include <QSvgWidget>
#include<QtSvg>
#include<QSvgRenderer>
public:
    void wheelEvent(QWheelEvent *);//響應滑鼠的捲動事件，使SVG圖片可以通過滑鼠捲動進行縮放
private:
    QSvgRenderer *render;//用於圖片顯示尺寸的確定

4.5 svgwidget.cpp原始檔

SvgWidget函數獲得本表單的QSvgRenderer物件，程式碼如下：

SvgWidget::SvgWidget()
{
    render=renderer();
}

然後定義滑鼠滾輪的響應事件，使SVG圖片可以通過滑鼠捲動進行縮放：

void SvgWidget::wheelEvent(QWheelEvent *e)
{
    const double diff=0.1;//diff的值表示每次滾輪捲動一定的值,圖片大小改變的比例
    //用於獲取圖片顯示區的尺寸
    QSize size=render->defaultSize();
    int width=size.width();
    int height=size.height();
    //利用QWheelEvent的相關函數獲得滾輪捲動的距離值,通過此值判斷滾輪捲動的方向
    //若此值大於0,則表示滾輪向前(遠離使用者方向)捲動;
    //若此值小於0,則表示滾輪向後(靠近使用者方向)捲動;
    //Qt6使用e->angleDelta().y()
    //Qt5請使用e->delta()
    if(e->angleDelta().y()>0){
        //對圖片的長、寬值進行放大
        width=int(this->width()+this->width()*diff);
        height=int(this->height()+this->height()*diff);
    }else{
        //對圖片的長、寬值進行縮小
        width=int(this->width()-this->width()*diff);
        height=int(this->height()-this->height()*diff);
    }
    resize(width,height);//重新調整大小
}

4.6 svgwindow.h標頭檔案

SvgWindow類繼承自QScrollArea，是一個帶卷軸的顯示區域。在SvgWindow類實現包含"svgwidget.h"的標頭檔案，該類使圖片在放大到超過主視窗大小時，能夠通過拖拽卷軸的方式進行檢視。

新增程式碼如下：

#include"svgwidget.h"
public:
    void setFile(QString);
    void mousePressEvent(QMouseEvent *);
    void mouseMoveEvent(QMouseEvent *);
private:
    SvgWidget *svgWidget;
    QPoint mousePressPos;
    QPoint scrollBarValuesMousePress;

4.7 svgwindow.cpp原始檔

主函數內進行設定捲動區的表單，使svgWidget成為SvgWindow的子視窗：

    svgWidget=new SvgWidget;
    setWidget(svgWidget);

當主視窗中對檔案進行了選擇或修改時,呼叫setFile()函數設定新的檔案：

//設定新的檔案
void SvgWindow::setFile(QString filename){
    svgWidget->load(filename);//將新的SVG檔案載入到svgWidget中進行顯示
    QSvgRenderer *render=svgWidget->renderer();
    svgWidget->resize(render->defaultSize());//按照SVG檔案的預設尺寸進行顯示
}

滑鼠按下時，獲取水平卷軸和垂直卷軸的值：

//滑鼠按下響應函數
void SvgWindow::mousePressEvent(QMouseEvent *e)
{
    mousePressPos=e->pos();
    scrollBarValuesMousePress.rx()=horizontalScrollBar()->value();
    scrollBarValuesMousePress.ry()=verticalScrollBar()->value();
    e->accept();
}

當滑鼠鍵按下並且拖拽滑鼠時觸發mouseMoveEvent()函數，通過卷軸的位置設定實現圖片拖拽效果：

//滑鼠按下且拖拽響應函數
void SvgWindow::mouseMoveEvent(QMouseEvent *e)
{
    horizontalScrollBar()->setValue(scrollBarValuesMousePress.x()-
                                    e->pos().x()+mousePressPos.x());//對水平卷軸的新位置進行設定
    verticalScrollBar()->setValue(scrollBarValuesMousePress.y()-
                                  e->pos().y()+mousePressPos.y());//對垂直卷軸的新位置進行設定
    horizontalScrollBar()->update();
    verticalScrollBar()->update();
    e->accept();
}

4.8 mainwindow.h標頭檔案

標頭檔案中包含"svgwindow.h"標頭檔案，並且宣告開啟檔案選單的槽函數和svgwindow用於呼叫相關函數傳遞選擇的檔名：

#include"svgwindow.h"

public slots:
    void slotOpenFile();//開啟檔案槽函數

private:
    SvgWindow *svgwindow; //用於呼叫相關函數傳遞選擇的檔名

4.9 mainwindow.cpp原始檔

主視窗MainWindow包含一個選單欄，其中有一個“檔案”子選單，包含一個“開啟”選單項，程式碼如下：

    setWindowTitle("SVG Viewer");//設定視窗標題
    QMenu *fileMenu=menuBar()->addMenu("檔案");//選單欄新增"檔案"
    QAction *openAct=new QAction("開啟",this);//"檔案"中新增"開啟"子選單
    connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpenFile()));//點選開啟觸發slotOpenFile()槽函數
    fileMenu->addAction(openAct);
    svgwindow=new SvgWindow;
    setCentralWidget(svgwindow);
    resize(800,600);//初始大小

定義開啟選單的槽函數：

//開啟選單的槽函數
void MainWindow::slotOpenFile()
{
    QString name=QFileDialog::getOpenFileName(this,"開啟","/","svg files(*.svg)");
    svgwindow->setFile(name);
}