基於Qt實現SVG圖片瀏覽器

Posted on by

介紹

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);
}

五、效果演示

以上就是基於Qt實現SVG圖片瀏覽器的詳細內容，更多關於Qt SVG圖片瀏覽器的資料請關註WalkonNet其它相關文章！

推薦閱讀：