目录

前言&＃xff1a;

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

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

3.总结

前言&＃xff1a;

首先简单描述下SVG:

SVG 意为可缩放矢量图形&＃xff08;Scalable Vector Graphics&＃xff09;。

SVG 使用 XML 格式定义图像。

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

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

左边显示的是svg格式的图片&＃xff0c;右边显示的是png格式的图片&＃xff0c;当放大到一定尺寸时&＃xff0c;svg图片依然很清晰&＃xff0c; png图片已经模糊了。

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

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

&＃xff08;1&＃xff09;使用QSvgRenderer加载矢量图片.

&＃xff08;2&＃xff09;提供绘制设备&＃xff0c;QPixmap对象&＃xff1b;

&＃xff08;3&＃xff09;提供画家,QPainter对象&＃xff1b;并与绘制设备建立联系&＃xff1b;

&＃xff08;4&＃xff09;调用QSvgRenderer的render(painter)函数&＃xff0c;让画家执行渲染操作&＃xff01;

&＃xff08;5&＃xff09;最后将绘制设备放到QLabel中。

需要加的头文件&＃xff1a;

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

代码如下&＃xff1a;

void BSDNClient::InitSvgWidget()
{QSvgRenderer* m_svgRender &＃61; new QSvgRenderer;m_svgRender->load(QString(":/image/Resource/image/csdn.svg"));QSize size &＃61; 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); //设置居中显示
}

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

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

QPixmap对象的尺寸大小就是根据原有svg的尺寸进行放大1.8倍显示&＃xff1b;

pix.fill(Qt::transparent);这一步清空像素&＃xff0c;如果不加的话&＃xff0c;会导致背景变黑色&＃xff1b;

QPainter painter(&pix);   定义画家QPainter对象&＃xff0c;将绘图设备pix的地址作为参数传进去。

m_svgRender->render(&painter);执行渲染操作&＃xff1b;

ui.m_pLabelSvg->setPixmap(pix);   //将pix加载到QLabel上

注意&＃xff1a;

因为用到了Svg模块&＃xff0c;需要给项目配置加上svg模块,我用的vs2019&＃43;Qt,配置如下图&＃xff1a;

3.总结

本文只是将一个svg矢量图片显示在了一个QLabel控件上&＃xff0c;只是最简单的功能&＃xff0c;只是QtSvg模块中的一个使用方法&＃xff0c;该模块还有其它方式可以实现对Svg更复杂的操作&＃xff0c;等之后有机会接触到了在做总结记录&＃xff01;