1. 技术文章
  2. Qt开发技术：QtSVG介绍、使用和Demo

Qt开发技术：QtSVG介绍、使用和Demo

由 霸气de小男生 提交于 2020-08-09 17:35:03

若该文为原创文章，未经允许不得转载
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：https://blog.csdn.net/qq21497936/article/details/105537292
各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究



红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：开发技术（点击传送门）

 

前话

      红胖子，来也！

      Qt的SVG介绍、基本使用和Demo演示。

 

Demo

Demo1：QSvgGenerator

      保存后的SVG文件为：

Demo2：QSvgRenderer

Demo3：QSvgWidget

 

Qt SVG

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形描述语言。Qt提供了用于在小部件和其他绘制设备中呈现和显示SVG图形的类。

概述

Qt SVG提供了用于呈现SVG文件的类。要包含模块类的定义，请使用以下指令：

#include <QtSvg>

要链接到模块，请将此行添加到qmake.pro文件中：

QT += svg

许可证和属性

Qt SVG在Qt公司的商业许可下可用。此外，它还可以在GNU Lesser General Public License（第3版）或GNU General Public License（第2版）下使用。有关更多详细信息，请参阅Qt许可。

      此外，Qt SVG在以下许可证下包含第三方代码。

XSVG许可

 

渲染SVG文件

概述

可缩放矢量图形（SVG）是一种用XML描述二维图形和图形应用的语言。

SVG 1.1是W3C的推荐标准，它构成了Qt中当前SVG开发的核心。

SVG 1.2是SVG工作组目前正在开发的规范，它以草稿的形式提供。移动SVG配置文件（SVG Basic和SVG Tiny）针对资源有限的设备，是第三代移动电话3GPP平台的一部分。您可以在about SVG上阅读有关SVG的更多信息。

Qt支持SVG 1.2tiny的静态特性。目前不支持ECMA脚本和DOM操作。

SVG图形可以呈现到任何QPaintDevice子类上。这种方法使开发人员能够灵活地进行测试，以便为每个应用程序找到最佳解决方案。

呈现SVG文件的最简单方法是构造一个QSvgWidget并使用QSvgWidget::load()函数之一加载一个SVG文件。

QSvgRenderer是负责为QSvgWidget呈现SVG文件的类，它可以直接用于为自定义小部件提供SVG支持。若要加载SVG文件，请使用文件名或文件内容构造一个QSvgRenderer，或在现有渲染器上调用QSvgRenderer::load()。如果成功加载SVG文件，QSvgRenderer::isValid()将返回true。

成功加载SVG文件后，可以使用QSvgRenderer::render()函数呈现它。注意，此方案允许您在Qt支持的所有绘画设备上呈现SVG文件，包括QWidget、QGLWidget和QImage。

Qt SVG相关类

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形描述语言。Qt提供了用于在小部件和其他绘制设备中呈现和显示SVG图形的类。

序号

类

描述

1

QGraphicsSvgItem

QGraphicsItem，可用于呈现SVG文件的内容，可以细化拆分Svg的元素

2

QSvgGenerator

用于创建SVG图形的绘制设备，主要用于保存的时候使用，注意保存到时候直接使用局部变量即可，使用全局变量其没有析构反倒不会保存

3

QSvgRenderer

用于将SVG文件的内容绘制到绘图设备上，其是打开svg将其渲染到QPixmap等上面

4

QSvgWidget

用于显示可缩放矢量图形（SVG）文件内容的小部件，直接加载svg文件，即可显示

 

QGraphicsSvgItem

概述

QGraphicsSvgItem类是一个QGraphicsItem，可用于呈现SVG文件的内容。

QGraphicsSvgItem提供了一种在QGraphicsView上呈现SVG文件的方法。QGraphicsSvgItem可以通过将要呈现的SVG文件传递给其构造函数或通过在其上显式设置共享的QSvgRenderer来创建。

请注意，在QGraphicsSvgItem上设置QSvgRenderer不会使项获得呈现器的所有权，因此，如果使用setSharedRenderer()方法，则必须确保QSvgRenderer对象的生存期至少与QGraphicsSvgItem的生存期相同。

QGraphicsSvgItem提供了一种通过setElementId只呈现部分SVG文件的方法。如果调用setElementId()方法，则只有具有传递的id的SVG元素（及其子元素）将是呈现器。这为有选择地呈现包含许多离散元素的大型SVG文件提供了一种方便的方法。例如，以下代码仅呈现包含整个卡片组的SVG文件中的小丑：

QSvgRenderer *renderer = new QSvgRenderer(QLatin1String("SvgCardDeck.svg"));
QGraphicsSvgItem *black = new QGraphicsSvgItem();
QGraphicsSvgItem *red = new QGraphicsSvgItem();

black->setSharedRenderer(renderer);
black->setElementId(QLatin1String("black_joker"));

red->setSharedRenderer(renderer);
red->setElementId(QLatin1String("red_joker"));

项目的大小可以通过直接操作项目转换矩阵来设置。

默认情况下，使用QGraphicsItem::DeviceCoordinateCache模式缓存SVG呈现，以加快项目的显示速度。通过将QGraphicsItem::NoCache传递给QGraphicsItem::setCacheMode()方法，可以禁用缓存。

 

QSvgGenerator

概述

QSvgGenerator类提供了一个用于创建SVG图形的绘制设备。

此绘制设备表示可缩放矢量图形（SVG）绘图。像QPrinter一样，它被设计成一个只写的设备，生成特定格式的输出。

要编写SVG文件，首先需要通过设置文件名或outputDevice属性来配置输出。通常需要通过设置“大小”特性来指定图形的大小，在某些情况下，如果图形将包含在另一个图形中，则还需要设置“viewBox”特性。

QSvgGenerator generator;
generator.setFileName(path);
generator.setSize(QSize(200, 200));
generator.setViewBox(QRect(0, 0, 200, 200));
generator.setTitle(tr("SVG Generator Example Drawing"));
generator.setDescription(tr("An SVG drawing created by the SVG Generator "
                       "Example provided with Qt."));

其他元数据可以通过设置标题、描述和分辨率属性来指定。

与其他QPaintDevice子类一样，QPainter对象用于绘制此类的实例：

// 无需在paintEvent函数中
QPainter painter;
painter.begin(&generator);
// 此处绘制的内容就是保存为svg文件的内容
...
painter.end();

绘制方式与其他绘制设备相同。但是，必须使用QPainter::begin()和end()在设备上显式地开始和结束绘制。

测试Demo1

void SVGShow3Widget::on_pushButton_saveAs_clicked()
{
    QString filePath = QFileDialog::getSaveFileName(0, "打开文件", ".", "SVG(*.svg)");
    if(filePath.isEmpty())
    {
        return;
    }
    QSvgGenerator svgGenerator;
    svgGenerator.setFileName(filePath);
    svgGenerator.setSize(QSize(rect().width(), rect().height()));
    svgGenerator.setViewBox(rect());
    svgGenerator.setTitle("测试QSvgGenerator");
    svgGenerator.setDescription("另存为绘制测试");
    QPainter painter;
    painter.begin(&svgGenerator);
    painter.setPen(Qt::red);
    painter.drawPixmap(rect(), _pixmapSvg);
    painter.drawText(rect(), "红胖子测试Svg");
    painter.end();
}

 

QSvgRenderer

概述

QSvgRenderer类用于将SVG文件的内容绘制到绘制设备上。

使用QSvgRenderer，可缩放矢量图形（SVG）可以呈现到任何QPaintDevice子类上，包括QWidget、QImage和QGLWidget。

QSvgRenderer提供了一个API，它支持SVG呈现的基本特性，比如加载和呈现静态图形，以及更多的交互特性，比如动画。由于渲染是使用QPainter执行的，因此可以在QPaintDevice的任何子类上渲染SVG图形。

SVG图形可以在构造QSvgRenderer时加载，也可以稍后使用load()函数加载。数据可以直接作为序列化XML提供，也可以间接使用文件名提供。如果加载了有效的文件，则无论是在构造呈现器时还是以后某个时间，isValid()都将返回true；否则将返回false。QSvgRenderer提供render()插槽，用于使用给定的绘制器渲染当前文档或动画文档的当前帧。

函数的作用是：提供有关呈现当前加载的SVG文件所需的空间量的信息。这对于绘制设备（如QWidget）非常有用，这些设备通常需要向其父布局提供大小提示。图形的默认大小可能与其使用viewBox特性找到的可见区域不同。

支持动画SVG图形，可以通过简单的函数和属性集合进行控制：

  • animated()函数：指示图形是否包含动画信息；
  • framesPerSecond属性：包含播放动画的速率；

最后，QSvgRenderer类提供repainNeeded()信号，该信号在文档呈现需要更新时发出。

测试Demo2

SVGShow2Widget.h

#ifndef SVGSHOW2WIDGET_H
#define SVGSHOW2WIDGET_H

#include <QWidget>
#include <QSvgRenderer>

namespace Ui {
class SVGShow2Widget;
}

class SVGShow2Widget : public QWidget
{
    Q_OBJECT

public:
    explicit SVGShow2Widget(QWidget *parent = 0);
    ~SVGShow2Widget();

protected:
    void paintEvent(QPaintEvent *event);

private slots:
    void on_pushButton_openFile_clicked();
    void on_pushButton_load_clicked();

private:
    Ui::SVGShow2Widget *ui;
    QPixmap _pixmap;
    QPixmap _pixmapSvg;
    QSvgRenderer *_pSvgRenderer;
};

#endif // SVGSHOW2WIDGET_H
SVGShow2Widget.cpp
#include "SVGShow2Widget.h"
#include "ui_SVGShow2Widget.h"
#include <QFileDialog>
#include <QPainter>
#include <QDebug>

SVGShow2Widget::SVGShow2Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SVGShow2Widget),
    _pSvgRenderer(0)
{
    ui->setupUi(this);

    QString version = "v1.0.0";
    setWindowTitle(QString("使用QSvgRenderer加载svgDemo %1 (作者：红模仿(红胖子) QQ：21497936 博客地址: blog.csdn.net/qq21497936").arg(version));

    _pixmap.load(":/images/1.png");

    _pSvgRenderer = new QSvgRenderer(this);
    _pSvgRenderer->load(QString(":/images/2.svg"));

}

SVGShow2Widget::~SVGShow2Widget()
{
    delete ui;
}

void SVGShow2Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.drawPixmap(ui->label_png->geometry(), _pixmap);
    _pixmapSvg = QPixmap(ui->label_svg->width(), ui->label_svg->height());
    _pixmapSvg.fill(Qt::white);

    QPainter painter2(&_pixmapSvg);
    _pSvgRenderer->render(&painter2, _pixmapSvg.rect());
    painter.drawPixmap(ui->label_svg->geometry(), _pixmapSvg);
}

void SVGShow2Widget::on_pushButton_openFile_clicked()
{
    QString filePath = QFileDialog::getOpenFileName(0, "打开文件", ".", "SVG(*.svg)");
    if(filePath.isEmpty())
    {
        return;
    }
    ui->lineEdit_path->setText(filePath);
}

void SVGShow2Widget::on_pushButton_load_clicked()
{
    _pSvgRenderer->load(ui->lineEdit_path->text());
    update();
}

 

QSvgWidget

概述

      QSvgWidget类提供了一个小部件，用于显示可缩放矢量图形（SVG）文件的内容。

这个类使开发人员能够将SVG图形与标准小部件一起显示，并且使用的方式与QLabel用于显示文本和位图图像的方式基本相同。

由于QSvgWidget是QWidget的一个子类，SVG图形是使用显示的属性呈现的。使用QSvgRenderer类可以对渲染过程进行更多的控制，因为这可以用于在其他绘制设备（如QImage和QGLWidget）上绘制。小部件使用的渲染器可以通过renderer()函数获得。

每个QSvgWidget都可以用SVG文件的文件名构造，也可以在没有要呈现的特定文件的情况下构造，并且可以在以后提供一个。load()函数提供了两种加载SVG文件的不同方法：它们接受SVG文件的文件名或包含SVG文件的序列化XML表示形式的QByteArray。

默认情况下，小部件提供大小提示以反映其显示的图形的大小。如果没有加载数据，小部件将提供默认的QWidget大小提示。如果需要自定义此行为，请子类化此类并重新实现sizeHint()。

测试Demo3

MySvgWidget.h

#ifndef MYSVGWIDGET_H
#define MYSVGWIDGET_H

#include <QWidget>
#include <QSvgWidget>
#include <QSvgRenderer>

namespace Ui {
class MySvgWidget;
}

class MySvgWidget : public QWidget
{
    Q_OBJECT

public:
    explicit MySvgWidget(QWidget *parent = 0);
    ~MySvgWidget();

public:
    void load(const QString &file);

protected:
    void resizeEvent(QResizeEvent *event);

private:
    Ui::MySvgWidget *ui;

private:
    QString _filePath;
    QSvgWidget *_pSvgWidget;
    QSvgRenderer *_pSvgRenderer;
};

#endif // MYSVGWIDGET_H

MySvgWidget.cpp

#include "MySvgWidget.h"
#include "ui_MySvgWidget.h"
#include <QDebug>

MySvgWidget::MySvgWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MySvgWidget),
    _pSvgWidget(0),
    _pSvgRenderer(0)
{
    ui->setupUi(this);
    _pSvgWidget = new QSvgWidget(this);
    _pSvgRenderer = _pSvgWidget->renderer();
}

MySvgWidget::~MySvgWidget()
{
    delete ui;
}

void MySvgWidget::load(const QString &file)
{
    _filePath = file;
    _pSvgWidget->load(_filePath);
    _pSvgWidget->repaint();
    update();
}

void MySvgWidget::resizeEvent(QResizeEvent *event)
{
    if(_pSvgWidget)
    {
        _pSvgWidget->setGeometry(rect());
    }
}

 

工程模板v1.0.0

      工程模板v1.0.0：3个demo子工程打包

 

下载工程模板

CSDN：https://download.csdn.net/download/qq21497936/12328539

QQ群：1047134658（点击“文件”搜索“qtSVGDemo”，群内与博文同步更新所有可开源的源码模板）

 

原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：https://blog.csdn.net/qq21497936/article/details/105537292

标签
qt
c++
qmake
ffmpeg
opengl
OpenCV
Raspberry Pi
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!