基于Qt实现SVG图片浏览器

 更新时间:2022年06月17日 11:12:20   作者:wendy_ya  
SVG的英文全称是Scalable Vector Graphics,即可缩放的矢量图形。本文将用Qt6制作一个简单的SVG图片浏览器,感兴趣的可以尝试一下

介绍

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

SVG格式的特点如下:

(1)基于XML

(2)采用文本来描述对象

(3)具有交互性和动态性

(4)完全支持DOM

SVG相对于GIF、JPEG格式的优势是,SVG是一种矢量图形格式,比GIF、JPEG等栅格格式具有众多优势,如文件小、可任意缩放而不破坏图像的清晰度和细节等。
Qt为SVG格式图片的显示与生成提供了专门的QtSvg模块,此模块中包含了与SVG图片相关的所有类,主要有QSvgWidget、QSvgRender和QGraphicsSvgItem。

一、项目介绍

利用QtSvg实现SVG图片浏览器,可以显示SVG结尾的文件图片。

二、项目基本配置

新建一个Qt案例,项目名称为“SVGTest”,基类选择“QMainWindow”,取消创建UI界面复选框的选中状态,完成项目创建。

三、UI界面设计

无UI界面

四、主程序实现

4.1 .pro文件

如果是QT5版本,需要在pro工程文件中加入一行代码:

QT+=svg

如果是QT6版本,需要在pro工程文件中加入一行代码:

QT+=svgwidgets

【不同Qt版本,添加的qmake不相同,这里建议参考帮助文档:】

4.2 添加SvgWindow类

项目名——>鼠标右键——>Add New——>C++ Class——>添加如下内容

创建完成后,项目中会出现svgwindow.h和svgwindow.cpp。

4.3 添加SvgWidget类

项目名——>鼠标右键——>Add New——>C++ Class——>添加如下内容

创建完成后,项目中会出现svgwidget.h和svgwidget.cpp,如下所示:

4.4 svgwidget.h头文件

SvgWidget类继承自QSvgWidget类,主要显示SVG图片。

在public中声明一下响应鼠标的滚动事件,使SVG图片可以通过鼠标滚动进行缩放,然后声明render变量,用于图片显示尺寸的确定:

#include <QSvgWidget>
#include<QtSvg>
#include<QSvgRenderer>
public:
    void wheelEvent(QWheelEvent *);//响应鼠标的滚动事件,使SVG图片可以通过鼠标滚动进行缩放
private:
    QSvgRenderer *render;//用于图片显示尺寸的确定

4.5 svgwidget.cpp源文件

SvgWidget函数获得本窗体的QSvgRenderer对象,代码如下:

SvgWidget::SvgWidget()
{
    render=renderer();
}

然后定义鼠标滚轮的响应事件,使SVG图片可以通过鼠标滚动进行缩放:

void SvgWidget::wheelEvent(QWheelEvent *e)
{
    const double diff=0.1;//diff的值表示每次滚轮滚动一定的值,图片大小改变的比例
    //用于获取图片显示区的尺寸
    QSize size=render->defaultSize();
    int width=size.width();
    int height=size.height();
    //利用QWheelEvent的相关函数获得滚轮滚动的距离值,通过此值判断滚轮滚动的方向
    //若此值大于0,则表示滚轮向前(远离用户方向)滚动;
    //若此值小于0,则表示滚轮向后(靠近用户方向)滚动;
    //Qt6使用e->angleDelta().y()
    //Qt5请使用e->delta()
    if(e->angleDelta().y()>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);//重新调整大小
}

4.6 svgwindow.h头文件

SvgWindow类继承自QScrollArea,是一个带滚动条的显示区域。在SvgWindow类实现包含"svgwidget.h"的头文件,该类使图片在放大到超过主窗口大小时,能够通过拖拽滚动条的方式进行查看。

添加代码如下:

#include"svgwidget.h"
public:
    void setFile(QString);
    void mousePressEvent(QMouseEvent *);
    void mouseMoveEvent(QMouseEvent *);
private:
    SvgWidget *svgWidget;
    QPoint mousePressPos;
    QPoint scrollBarValuesMousePress;

4.7 svgwindow.cpp源文件

主函数内进行设置滚动区的窗体,使svgWidget成为SvgWindow的子窗口:

    svgWidget=new SvgWidget;
    setWidget(svgWidget);

当主窗口中对文件进行了选择或修改时,调用setFile()函数设置新的文件:

//设置新的文件
void SvgWindow::setFile(QString filename){
    svgWidget->load(filename);//将新的SVG文件加载到svgWidget中进行显示
    QSvgRenderer *render=svgWidget->renderer();
    svgWidget->resize(render->defaultSize());//按照SVG文件的默认尺寸进行显示
}

鼠标按下时,获取水平滚动条和垂直滚动条的值:

//鼠标按下响应函数
void SvgWindow::mousePressEvent(QMouseEvent *e)
{
    mousePressPos=e->pos();
    scrollBarValuesMousePress.rx()=horizontalScrollBar()->value();
    scrollBarValuesMousePress.ry()=verticalScrollBar()->value();
    e->accept();
}

当鼠标键按下并且拖拽鼠标时触发mouseMoveEvent()函数,通过滚动条的位置设置实现图片拖拽效果:

//鼠标按下且拖拽响应函数
void SvgWindow::mouseMoveEvent(QMouseEvent *e)
{
    horizontalScrollBar()->setValue(scrollBarValuesMousePress.x()-
                                    e->pos().x()+mousePressPos.x());//对水平滚动条的新位置进行设置
    verticalScrollBar()->setValue(scrollBarValuesMousePress.y()-
                                  e->pos().y()+mousePressPos.y());//对垂直滚动条的新位置进行设置
    horizontalScrollBar()->update();
    verticalScrollBar()->update();
    e->accept();
}

4.8 mainwindow.h头文件

头文件中包含"svgwindow.h"头文件,并且声明打开文件菜单的槽函数和svgwindow用于调用相关函数传递选择的文件名:

#include"svgwindow.h"

public slots:
    void slotOpenFile();//打开文件槽函数

private:
    SvgWindow *svgwindow; //用于调用相关函数传递选择的文件名

4.9 mainwindow.cpp源文件

主窗口MainWindow包含一个菜单栏,其中有一个“文件”子菜单,包含一个“打开”菜单项,代码如下:

    setWindowTitle("SVG Viewer");//设置窗口标题
    QMenu *fileMenu=menuBar()->addMenu("文件");//菜单栏添加"文件"
    QAction *openAct=new QAction("打开",this);//"文件"中添加"打开"子菜单
    connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpenFile()));//点击打开触发slotOpenFile()槽函数
    fileMenu->addAction(openAct);
    svgwindow=new SvgWindow;
    setCentralWidget(svgwindow);
    resize(800,600);//初始大小

定义打开菜单的槽函数:

//打开菜单的槽函数
void MainWindow::slotOpenFile()
{
    QString name=QFileDialog::getOpenFileName(this,"打开","/","svg files(*.svg)");
    svgwindow->setFile(name);
}

五、效果演示

以上就是基于Qt实现SVG图片浏览器的详细内容,更多关于Qt SVG图片浏览器的资料请关注脚本之家其它相关文章!

相关文章

  • 关于C++中sort()函数的用法,你搞明白了没

    关于C++中sort()函数的用法,你搞明白了没

    这篇文章主要介绍了关于C++中sort()函数的用法,并通过三种方法介绍了按降序排列的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • C++编程中的函数指针初步解析

    C++编程中的函数指针初步解析

    这篇文章主要介绍了C++编程中的函数指针初步解析,函数指针在C语言和C++学习中都是非常重要的知识,需要的朋友可以参考下
    2016-04-04
  • C语言数据结构顺序表的进阶讲解

    C语言数据结构顺序表的进阶讲解

    程序中经常需要将一组数据元素作为整体管理和使用,需要创建这种元素组,用变量记录它们,传进传出函数等。一组数据中包含的元素个数可能发生变化,顺序表则是将元素顺序地存放在一块连续的存储区里,元素间的顺序关系由它们的存储顺序自然表示
    2022-04-04
  • VisualStudio2019配置OpenCV4.5.0的方法示例

    VisualStudio2019配置OpenCV4.5.0的方法示例

    这篇文章主要介绍了VisualStudio2019配置OpenCV4.5.0的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • C语言中的柔性数组你真的了解吗

    C语言中的柔性数组你真的了解吗

    这篇文章主要为大家详细介绍了C语言中的柔性数组你,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • c语言动态内存分配知识点及实例

    c语言动态内存分配知识点及实例

    在本篇文章里小编给大家整理的是关于c语言动态内存分配知识点及实例,需要的朋友们可以学习下。
    2020-03-03
  • c语言描述回文数的三种算法

    c语言描述回文数的三种算法

    这篇文章主要介绍了c语言描述回文数的三种算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • C++下标运算符详解

    C++下标运算符详解

    C语言中的下标运算符用于访问数组或指针变量中的元素,它使用方括号 [] 来表示,并在方括号内指定元素的索引位置,本文给大家详细的讲解一下C++的下标运算符,需要的朋友可以参考下
    2023-09-09
  • linux C++ 获取文件绝对路径的实例代码

    linux C++ 获取文件绝对路径的实例代码

    下面小编就为大家带来一篇linux C++ 获取文件绝对路径的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • C语言多媒体框架GStreamer使用教程深讲

    C语言多媒体框架GStreamer使用教程深讲

    GStreamer 是用来构建流媒体应用的开源多媒体框架(framework),其目标是要简化音/视频应用程序的开发,已经能够被用来处理像 MP3、Ogg、MPEG1、MPEG2、AVI、Quicktime 等多种格式的多媒体数据
    2022-07-07

最新评论