第基于Qt實(shí)現(xiàn)SVG圖片瀏覽器目錄介紹一、項(xiàng)目介紹二、項(xiàng)目基本配置三、UI界面設(shè)計(jì)四、主程序?qū)崿F(xiàn)4.1.pro文件4.2添加SvgWindow類4.3添加SvgWidget類4.4svgwidget.h頭文件4.5svgwidget.cpp源文件4.6svgwindow.h頭文件4.7svgwindow.cpp源文件4.8mainwindow.h頭文件4.9mainwindow.cpp源文件五、效果演示

介紹

SVG的英文全稱是ScalableVectorGraphics，即可縮放的矢量圖形。它是由萬(wàn)維網(wǎng)聯(lián)盟（W3C）在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)格適量圖形標(biāo)準(zhǔn)，是一個(gè)開(kāi)放的圖形標(biāo)準(zhǔn)。

SVG格式的特點(diǎn)如下：

（1）基于XML

（2）采用文本來(lái)描述對(duì)象

（3）具有交互性和動(dòng)態(tài)性

（4）完全支持DOM

SVG相對(duì)于GIF、JPEG格式的優(yōu)勢(shì)是，SVG是一種矢量圖形格式，比GIF、JPEG等柵格格式具有眾多優(yōu)勢(shì)，如文件小、可任意縮放而不破壞圖像的清晰度和細(xì)節(jié)等。

Qt為SVG格式圖片的顯示與生成提供了專門的QtSvg模塊，此模塊中包含了與SVG圖片相關(guān)的所有類，主要有QSvgWidget、QSvgRender和QGraphicsSvgItem。

一、項(xiàng)目介紹

利用QtSvg實(shí)現(xiàn)SVG圖片瀏覽器，可以顯示SVG結(jié)尾的文件圖片。

二、項(xiàng)目基本配置

新建一個(gè)Qt案例，項(xiàng)目名稱為SVGTest，基類選擇QMainWindow，取消創(chuàng)建UI界面復(fù)選框的選中狀態(tài)，完成項(xiàng)目創(chuàng)建。

三、UI界面設(shè)計(jì)

無(wú)UI界面

四、主程序?qū)崿F(xiàn)

4.1.pro文件

如果是QT5版本，需要在pro工程文件中加入一行代碼：

QT+=svg

如果是QT6版本，需要在pro工程文件中加入一行代碼：

QT+=svgwidgets

【不同Qt版本，添加的qmake不相同，這里建議參考幫助文檔：】

4.2添加SvgWindow類

項(xiàng)目名鼠標(biāo)右鍵AddNewC++Class添加如下內(nèi)容

創(chuàng)建完成后，項(xiàng)目中會(huì)出現(xiàn)svgwindow.h和svgwindow.cpp。

4.3添加SvgWidget類

項(xiàng)目名鼠標(biāo)右鍵AddNewC++Class添加如下內(nèi)容

創(chuàng)建完成后，項(xiàng)目中會(huì)出現(xiàn)svgwidget.h和svgwidget.cpp，如下所示：

4.4svgwidget.h頭文件

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

在public中聲明一下響應(yīng)鼠標(biāo)的滾動(dòng)事件，使SVG圖片可以通過(guò)鼠標(biāo)滾動(dòng)進(jìn)行縮放，然后聲明render變量，用于圖片顯示尺寸的確定：

#includeQSvgWidget

#includeQtSvg

#includeQSvgRenderer

public:

voidwheelEvent(QWheelEvent*);//響應(yīng)鼠標(biāo)的滾動(dòng)事件，使SVG圖片可以通過(guò)鼠標(biāo)滾動(dòng)進(jìn)行縮放

private:

QSvgRenderer*render;//用于圖片顯示尺寸的確定

4.5svgwidget.cpp源文件

SvgWidget函數(shù)獲得本窗體的QSvgRenderer對(duì)象，代碼如下：

SvgWidget::SvgWidget()

render=renderer();

然后定義鼠標(biāo)滾輪的響應(yīng)事件，使SVG圖片可以通過(guò)鼠標(biāo)滾動(dòng)進(jìn)行縮放：

voidSvgWidget::wheelEvent(QWheelEvent*e)

constdoublediff=0.1;//diff的值表示每次滾輪滾動(dòng)一定的值,圖片大小改變的比例

//用于獲取圖片顯示區(qū)的尺寸

QSizesize=render-defaultSize();

intwidth=size.width();

intheight=size.height();

//利用QWheelEvent的相關(guān)函數(shù)獲得滾輪滾動(dòng)的距離值,通過(guò)此值判斷滾輪滾動(dòng)的方向

//若此值大于0,則表示滾輪向前(遠(yuǎn)離用戶方向)滾動(dòng);

//若此值小于0,則表示滾輪向后(靠近用戶方向)滾動(dòng);

//Qt6使用e-angleDelta().y()

//Qt5請(qǐng)使用e-delta()

if(e-angleDelta().y()0){

//對(duì)圖片的長(zhǎng)、寬值進(jìn)行放大

width=int(this-width()+this-width()*diff);

height=int(this-height()+this-height()*diff);

}else{

//對(duì)圖片的長(zhǎng)、寬值進(jìn)行縮小

width=int(this-width()-this-width()*diff);

height=int(this-height()-this-height()*diff);

resize(width,height);//重新調(diào)整大小

4.6svgwindow.h頭文件

SvgWindow類繼承自QScrollArea，是一個(gè)帶滾動(dòng)條的顯示區(qū)域。在SvgWindow類實(shí)現(xiàn)包含svgwidget.h的頭文件，該類使圖片在放大到超過(guò)主窗口大小時(shí)，能夠通過(guò)拖拽滾動(dòng)條的方式進(jìn)行查看。

添加代碼如下：

#include"svgwidget.h"

public:

voidsetFile(QString);

voidmousePressEvent(QMouseEvent*);

voidmouseMoveEvent(QMouseEvent*);

private:

SvgWidget*svgWidget;

QPointmousePressPos;

QPointscrollBarValuesMousePress;

4.7svgwindow.cpp源文件

主函數(shù)內(nèi)進(jìn)行設(shè)置滾動(dòng)區(qū)的窗體，使svgWidget成為SvgWindow的子窗口：

svgWidget=newSvgWidget;

setWidget(svgWidget);

當(dāng)主窗口中對(duì)文件進(jìn)行了選擇或修改時(shí),調(diào)用setFile()函數(shù)設(shè)置新的文件：

//設(shè)置新的文件

voidSvgWindow::setFile(QStringfilename){

svgWidget-load(filename);//將新的SVG文件加載到svgWidget中進(jìn)行顯示

QSvgRenderer*render=svgWidget-renderer();

svgWidget-resize(render-defaultSize());//按照SVG文件的默認(rèn)尺寸進(jìn)行顯示

鼠標(biāo)按下時(shí)，獲取水平滾動(dòng)條和垂直滾動(dòng)條的值：

//鼠標(biāo)按下響應(yīng)函數(shù)

voidSvgWindow::mousePressEvent(QMouseEvent*e)

mousePressPos=e-pos();

scrollBarValuesMousePress.rx()=horizontalScrollBar()-value();

scrollBarValuesMousePress.ry()=verticalScrollBar()-value();

e-accept();

當(dāng)鼠標(biāo)鍵按下并且拖拽鼠標(biāo)時(shí)觸發(fā)mouseMoveEvent()函數(shù)，通過(guò)滾動(dòng)條的位置設(shè)置實(shí)現(xiàn)圖片拖拽效果：

//鼠標(biāo)按下且拖拽響應(yīng)函數(shù)

voidSvgWindow::mouseMoveEvent(QMouseEvent*e)

horizontalScrollBar()-setValue(scrollBarValuesMousePress.x()-

e-pos().x()+mousePressPos.x());//對(duì)水平滾動(dòng)條的新位置進(jìn)行設(shè)置

verticalScrollBar()-setValue(scrollBarValuesMousePress.y()-

e-pos().y()+mousePressPos.y());//對(duì)垂直滾動(dòng)條的新位置進(jìn)行設(shè)置

horizontalScrollBar()-update();

verticalScrollBar()-update();

e-accept();

4.8mainwindow.h頭文件

頭文件中包含svgwindow.h頭文件，并且聲明打開(kāi)文件菜單的槽函數(shù)和svgwindow用于調(diào)用相關(guān)函數(shù)傳遞選擇的文件名：

#include"svgwindow.h"

publicslots:

voidslotOpenFile();//打開(kāi)文件槽函數(shù)

private:

SvgWindow*svgwindow;//用于調(diào)用相關(guān)函數(shù)傳遞選擇的文件名

4.9mainwindow.cpp源文件

主窗口MainWindow包含一個(gè)菜單欄，其中有一個(gè)文件子菜單，包含一個(gè)打開(kāi)菜單項(xiàng)，代碼如下：

setWindowTitle("SVGViewer");//設(shè)置窗口標(biāo)題

QMenu*fileMenu=menuBar()-addMenu("文件");//菜單欄添加"文件"

QAction*openAct=newQAction("打開(kāi)",this);//"文件"中添加"打開(kāi)"子菜單

connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpenFile()));//點(diǎn)擊打開(kāi)觸發(fā)slotOpenFile()槽函數(shù)

fileMenu-addAction(openAct);

svgwindow=newSvgWindow;

setCentralWidget(svgwindow);

resize(800,600);//初始大小

定義打開(kāi)菜