Qt加载SVG矢量图片，放大缩小图片质量不发生变化。

news2024/10/7 18:29:43

前言：

首先简单描述下SVG:

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

给界面或者按钮上显示一个图标或背景图片，日常使用.png格式的文件完全够用，但是有些使用场景需要把图片放大显示时，使用.png文件就会开始模糊，这时需要加载.SVG文件，即使放大也很清晰。

1.使用.SVG和.PNG文件对比图

在这里插入图片描述
左边显示的是svg格式的图片，右边显示的是png格式的图片，当放大到一定尺寸时，svg图片依然很清晰， png图片已经模糊了。

2.使用QLabel显示.SVG矢量图片

在界面添加一个QLabel控件，最终是要把.Svg图片显示到QLabel中的。

（1）使用QSvgRenderer加载矢量图片.

（2）提供绘制设备，QPixmap对象；

（3）提供画家,QPainter对象；并与绘制设备建立联系；

（4）调用QSvgRenderer的render(painter)函数，让画家执行渲染操作！

（5）最后将绘制设备放到QLabel中。

需要加的头文件：

#include "qsvgrenderer.h"
#include "qpainter.h"

代码如下：

void BSDNClient::InitSvgWidget()
{
    QSvgRenderer* m_svgRender = new QSvgRenderer;
    m_svgRender->load(QString(":/image/Resource/image/csdn.svg"));
 
    QSize size = m_svgRender->defaultSize(); //获取svg的大小
    QPixmap pix(size * 1.8);          // 在这给绘图设备重新设置大小
    pix.fill(Qt::transparent);        // 像素清空,这一步必须有,否则背景有黑框
 
    QPainter painter(&pix);           // 画家和绘图设备建立联系
    painter.setRenderHints(QPainter::Antialiasing);     //反锯齿绘制
    m_svgRender->render(&painter);    //执行渲染操作
 
    ui.m_pLabelSvg->setPixmap(pix);   //将pix加载到QLabel上
    ui.m_pLabelSvg->setAlignment(Qt::AlignCenter);  //设置居中显示
}

根据以上代码可以看出来，QSvgRenderer类用于将SVG文件的内容绘制到绘制设备上。

QSvgRenderer类的load()函数加载svg文件，需要将svg文件加载到资源文件中，QSvgRenderer类的defaultSize()函数可以获取当前svg原本的大小，将这个大小乘以一个系数，给绘制设备，就能实现放大缩小显示。

QPixmap对象的尺寸大小就是根据原有svg的尺寸进行放大1.8倍显示；
pix.fill(Qt::transparent);这一步清空像素，如果不加的话，会导致背景变黑色；
QPainter painter(&pix); 定义画家QPainter对象，将绘图设备pix的地址作为参数传进去。
m_svgRender->render(&painter);执行渲染操作；
ui.m_pLabelSvg->setPixmap(pix); //将pix加载到QLabel上

注意：
因为用到了Svg模块，需要给项目配置加上svg模块,我用的vs2019+Qt,配置如下图：
在这里插入图片描述