学习QT之显示SVG格式图片

SVG的英文全称是Scalable Vector Graphics，即可缩放的矢量图形。它是有万维网联盟在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网格矢量图形标准，是一个开发的图形标准。

SVG格式的特点如下：

基于XML
采用文本来描述对象
具有交互性和动态性
完全支持DOM

SVG相对于GIF、JPEG格式的优势是，SVG是一种矢量图形格式，比GIF、JPEG等栅格格式具有众多优势，如文件小，对于网络而言，下载速度快；可任意缩放而不会破坏图像的清晰度和细节；图像中的文字独立于图像，文字保留可编辑和可搜寻的状态，也没有字体限制，用户系统即使没有安装某一种字体，也可看到与制作时完全相同的画面等。正是基于其格式的各种优点及开放性，SVG得到了众多组织和知名厂商的支持与认可，因此能够迅速地开发和推广应用。

概念解析

XML

Qt的XML模块支持两种XML解析方法：DOM和SAX。其中，DOM方法将XML文件表示为一棵树，以便随机访问其中的结点，但消耗内存相对多一些。而SAX是一种事件驱动的XML API，其速度快，但不便于随机访问任意结点。因此，通常根据实际应用选择合适的解析方法。这里只介绍DOM的使用方法。

文档对象模型（Document Object Model，DOM）是W3C开发的独立于平台和语言的接口，它可以使程序和脚本动态地存取和更新XML文档的内容、结构和风格。

DOM在内存中将XML文件表示为一棵树，用户通过API可以随意的访问数的任意结点内容。在Qt中，XML文档自身用QDomDocument表示，所有的结点类都从QDomNode继承。

SVG文件是利用XML表示的矢量图形文件，每种图形都用XML标签表示。例如，在SVG中画折线的标签如下：

<polyline fill="none" stroke="#888888" stroke-width="2" points="100,200,100,100"/>

其中，

polyline：表示绘制折线
fill：表示填充
stroke：表示画笔颜色
stroke-width：表示画笔宽度
points：表示折线的点

Qt为SVG格式图片的显示与生成提供了专门的QtSvg模块，此模块中包含了与SVG图片相关的所有类，主要有QSvgWidget、QSvgRender、QGraphicsSvgItem。

下面通过一个实例来介绍它的使用：

一、运行结果

二、详细代码

在完成此功能的程序中使用与SVG相关的类，必须在程序中包含SVG相关的头文件：#include <QtSvg>

由于Qt默认生成的Makefile中只加入了QtGui、QtCore模块的库，所以必须在工程文件.pro中加入一行代码

QT += svg

svgwidget.h

#ifndef SVGWIDGET_H
#define SVGWIDGET_H#include <QtSvg/QSvgWidget>
#include <QtSvg/QSvgRenderer>
#include <QMouseEvent>class SvgWidget : public QSvgWidget
{Q_OBJECT
public:SvgWidget(QWidget *parent=0);void wheelEvent(QWheelEvent *);//响应鼠标的滚轮事件，使SVG图片能够通过鼠标滚轮的滚动进行缩放private:QSvgRenderer *render;  //用于图片显示尺寸的确定
};#endif // SVGWIDGET_H

svgwidget.cpp

#include "svgwidget.h"SvgWidget::SvgWidget(QWidget *parent): QSvgWidget(parent)
{render = renderer();
}void SvgWidget::wheelEvent(QWheelEvent *e)
{const double diff = 0.1;  //diff值表示每次滚轮滚动一定的值，图片大小改变的比例QSize size = render->defaultSize();  //用于获取图片显示区的尺寸int width = size.width();int height = size.height();if(e->delta() > 0)  //利用QWheelEvent的delta()函数获得滚轮滚动的距离值，通过此值来判断滚轮滚动的方向{//若delta()值大于零，则表示滚轮向前（远离用户的方向）滚动width = int(this->width() + this->width()*diff);height = int(this->height() + this->height()*diff);}else{//若delta()值小于零，则表示滚轮向后（靠近用户的方向）滚动width = int(this->width() - this->width()*diff);height = int(this->height() - this->height()*diff);}resize(width,height);
}

注：鼠标滚动时间，滚轮每滚动1°相当于移动了8°，而常见的滚轮鼠标拨动一下滚动的角度为15°，因此滚轮拨动一下相当于移动了120（15*8）° 。

svgwindow.h

#ifndef SVGWINDOW_H
#define SVGWINDOW_H#include <QScrollArea>
#include "svgwidget.h"
#include <QMouseEvent>
#include <QScrollBar>class SvgWindow : public QScrollArea
{Q_OBJECT
public:SvgWindow(QWidget *parent = 0);void setFile(QString);void mousePressEvent(QMouseEvent *);void mouseMoveEvent(QMouseEvent *);private:SvgWidget *svgWidget;QPoint mousePressPos;QPoint scrollBarValuesOnMousePress;
};#endif // SVGWINDOW_H

svgwindow.cpp

#include "svgwindow.h"SvgWindow::SvgWindow(QWidget *parent): QScrollArea(parent)
{svgWidget = new SvgWidget;setWidget(svgWidget);
}void SvgWindow::setFile(QString fileName)
{svgWidget->load(fileName);QSvgRenderer *render = svgWidget->renderer();svgWidget->resize(render->defaultSize());
}void SvgWindow::mousePressEvent(QMouseEvent *event)
{mousePressPos = event->pos();scrollBarValuesOnMousePress.rx()=horizontalScrollBar()->value();scrollBarValuesOnMousePress.ry()=verticalScrollBar()->value();
}void SvgWindow::mouseMoveEvent(QMouseEvent *event)
{//对水平滚动条的新位置进行设置horizontalScrollBar()->setValue(scrollBarValuesOnMousePress.x() - event->pos().x() + mousePressPos.x());//对垂直滚动条的新位置进行设置verticalScrollBar()->setValue(scrollBarValuesOnMousePress.y() - event->pos().y() + mousePressPos.y());horizontalScrollBar()->update();event->accept();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include "svgwindow.h"class MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = 0);~MainWindow();void createMenu();public slots:void slotOpenFile();private:SvgWindow *svgWindow;
};#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include <QMenuBar>
#include <QMenu>
#include <QFileDialog>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{setWindowTitle(tr("SVG Viewer"));createMenu();svgWindow = new SvgWindow;setCentralWidget(svgWindow);setMinimumSize(600,400);
}MainWindow::~MainWindow()
{}void MainWindow::createMenu()
{QMenu *fileMenu = menuBar()->addMenu(tr("文件"));QAction *openAct = new QAction(tr("打开"),this);connect(openAct,SIGNAL(triggered(bool)),this,SLOT(slotOpenFile()));fileMenu->addAction(openAct);
}void MainWindow::slotOpenFile()
{QString name = QFileDialog::getOpenFileName(this,"打开","/","svg files(*.svg)");svgWindow->setFile(name);
}