Qt5开发从入门到精通——第六篇四节（ 图像与图片——显示SVG格式图片 ）

欢迎小伙伴的点评✨✨，相互学习、互关必回、全天在线🍳🍳🍳
博主🧑🧑 本着开源的精神交流Qt开发的经验、将持续更新续章，为社区贡献博主自身的开源精神👩‍🚀

---

前言

本章首先介绍几种主要位置函数及其之间的区别，以及各种与位置相关函数的使用场合；然后，通过一个简单绘图工具实例，介绍利用 QPainter 和 QPainterPath 两种方法绘制各种基础图形。

---

一、SVG格式图片概述

SVG 的英文全称是 Scalable Vector Graphics, 即可缩放的矢量图形。它是由万维网联盟
(World Wide Web Consortium, W3C) 在 2000 年 8 月制定的一种新的二维矢量图形格式，也是
规范中的网格矢量图形标准，是一个开放的图形标准。
SVG 格式的特点如下。
(1) 基于XML
(2) 采用文本来描述对象。
(3) 具有交互性和动态性。
(4) 完全支待 DOM 。
SVG 相对千 GIF 、 JPEG 格式的优势是， SVG 是一种矢量图形格式，比 GIF 、 JPEG 等栅格格式具有众多优势，如文件小，对千网络而言，下载速度快；可任意缩放而不会破坏图像的清晰度和细节；图像中的文字独立千图像，文字保留可编辑和可搜寻的状态，也没有字体限制，用户系统即使没有安装某一种字体，也可看到与制作时完全相同的画面等。正是基千其格式的各种优点及开放性， SVG 得到了众多组织和知名厂商的支持与认可，因此能够迅速地开发和推广应用。
Qt 为 SVG 格式图片的显示与生成提供了专门的 QtSvg 模块，此模块中包含了与 SVG 图片相关的所有类，主要有 QSvgWidget、 QSvgRender 和 QGraphicsSvgltem 。

二、效果实例

图一

2.1、svg图片原码

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
  
  <polygon points='15,10 55,10 45,20 5,20'
    style='fill:red; stroke: black;'
  />
  
  <polygon points='35,37.5 37.9,46.1 46.9,46.1 39.7,51.5
    42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1'
    style='fill: #ccffcc; stroke: green;'
    />
  
  <polygon points='60 60, 65,72 80 60, 120,120 72,85 50,95'
    style="fill: yellow; fill-opacity:.5; stroke:black"
  />
svg>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

将代码拷贝到文本当中，把后缀名改为xxx.svg

三、原码解析

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

#include 
1

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

QT+= svg
1

这样才可在编译时加入 QtSvg 的库。

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 
#include "svgwindow.h"
class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void createMenu ();
    public slots:
    void slotOpenFile();
    private:
    SvgWindow *svgWindow;     //用千调用相关函数传递选择的文件名
};

#endif // MAINWINDOW_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

svgwidget.h

#ifndef SVGWIDGET_H
#define SVGWIDGET_H

#include 
#include 
#include 
class SvgWidget : public QSvgWidget
{
    Q_OBJECT
public:
    SvgWidget(QWidget *parent=0);
    void wheelEvent(QWheelEvent *);
                                //／响应鼠标的滚轮事件，使 SVG 图片能够通过鼠标滚轮的滚动进行缩放

private:
QSvgRenderer *render;          //用于图片显示尺寸的确定
};

#endif // SVGWIDGET_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

svgwindow.h

#ifndef SVGWINDOW_H
#define SVGWINDOW_H
#include 
#include "svgwidget.h"

class SvgWindow : public QScrollArea
{
public:
   SvgWindow(QWidget *parent=0);
   void setFile (QString) ;
   void mousePressEvent(QMouseEvent *);
   void mouseMoveEvent(QMouseEvent *);
private:
SvgWidget *svgWidget;
QPoint mousePressPos;
QPoint scrollBarValuesOnMousePress;
};

#endif // SVGWINDOW_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

main.cpp

#include "mainwindow.h"
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

1
2
3
4
5
6
7
8
9
10
11
12

mainwindow.cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)  //在 MainWindow 构造函数中，创建一个 SvgWindow 对象作为主窗口的中央窗体。
    : QMainWindow(parent)
{
    setWindowTitle(tr("SVG Viewer"));
    createMenu();
    svgWindow =new SvgWindow;
    setCentralWidget(svgWindow);
}

MainWindow::~MainWindow()
{

}
void MainWindow::createMenu()   //创建菜单栏
{
    QMenu *fileMenu =menuBar ()->addMenu (tr(" 文件")) ;
    QAction *openAct =new QAction(tr(" 打开 "),this);
    connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpenFile()));
    fileMenu->addAction(openAct);
}

void MainWindow:: slotOpenFile ()  //通过标准文件对话框选择 SVG 文件，并调用 SvgWindow 的 setFile()函数将选择的文件名传递给 svgWindow 进行显示
{
    QString name =QFileDialog::getOpenFileName(this,
    "打开 ","/","svg files(*.svg)");
    svgWindow->setFile(name);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

svgwidget.cpp

#include "svgwidget.h"

SvgWidget::SvgWidget(QWidget *parent) :QSvgWidget(parent)  // SvgWidget 构造函数获得本窗体的 QSvgRenderer 对象
{
    render = renderer();
}


void SvgWidget::wheelEvent(QWheelEvent *e)  //鼠标滚轮的响应事件，使 SVG 图片能够通过鼠标滚轮的滚动进行缩放。
{
    const double diff=0.1;
    QSize size =render->defaultSize ();
    int width =size. width();
    int height =size.height();
    if (e->delta () >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);   //利用新的长、宽值对图片进行 resize ()操作
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

svgwindow.cpp

#include "svgwindow.h"
//SvgWindow 类的构造函数，构造 SvgWidget 对象，并调用 QScrollArea 类的 setWidget()函数设置滚动区的窗体，使 svgWidget 成为 SvgWindow 的子窗口。
SvgWindow::SvgWindow(QWidget *parent) :QScrollArea(parent)
{
    svgWidget =new SvgWidget;
    setWidget(svgWidget);
}
void SvgWindow::setFile(QString fileName)
{
    svgWidget->load (fileName); //将新的 SVG 文件加载到 svgWidget 中进行显示。
    QSvgRenderer *render =svgWidget->renderer();
    svgWidget->resize (render->defaultSize ()); //使 svgWidget 窗体按 SVG 图片的默认尺寸进行显示。
}
/*当鼠标键被按下时，对 mousePressPos 和 scrol!BarValuesOnMousePress 进行初始化，
QScrollArea 类的 horizontalScrol!Bar()和 verticalScrollBar() 函数可以分别获得 svgWindow 的水平
滚动条和垂直滚动条。*/
void SvgWindow::mousePressEvent(QMouseEvent *event)
{
    mousePressPos =event->pos () ;
    scrollBarValuesOnMousePress.rx()=horizontalScrollBar()->value();
    scrollBarValuesOnMousePress.ry() =verticalScrollBar () ->value () ;
    event->accept();
}
//当鼠标键被按下并拖曳鼠标时触发 mouseMoveEvent()函数，通过滚动条的位置设置实现图片拖曳的效果，
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();
    verticalScrollBar()->update();
    event->accept();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---

四、总结

图像与图片的显示SVG格式图片会在应用程序开发中经常用到的