《Qt6开发及实例》6-4 显示SVG格式图片

目录

一、简介与设计

1.1 简介

1.2 设计

二、SvgWidget

2.1 鼠标滚轮事件

三、svgwindow

四、MainWindow

一、简介与设计

1.1 简介

1、SVG 的英文全称是 Scalable Vector Graphics，即可缩放的矢量图形。它是由万维网联盟（W3C）在 2000 年 8 月制定的一种新的二维矢量图形格式

2、SVG 的特点如下：

(1) 基于XML

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

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

(4) 完全支持 DOM

3、SVG 中画折线的标签如下

<polyline fill="none" stroke="#888888" stroke-width="2" points="100, 200, 100, 100"/>复制

polyline：表示绘制折线

fill：表示填充

stroke：表示画笔颜色

stroke-width：表示画笔宽度

points：表示折线的点

4、SVG 是一种矢量图形格式，比 GIF、JPGE 等栅格格式具有众多优势，如文件小；可任意缩放而不会破坏图像的清晰度和细节；图像中的文字独立于图像，文字保留可编辑和可搜寻的状态

5、Qt 的 XML 模块支持两种 XML 解析方法：DOM 和 SAX。DOM 方法将 XML 文件表示为一棵树，可以随机访问其中的节点，内存消耗较大。SAX 是一种事件驱动的 XML API，其速度快，但不便于随机访问任意节点

6、Qt 为 SVG 格式图片的显示与生成提供了专门的 QtSvg 模块，此模块中包含了与 SVG 图片相关的所有类，主要有 QtSvgWidget、QSvgRender 和 QGraphicsSvgItem

1.2 设计

界面

通过 QtSvgWidget 类和 QSvgRender 类实现一个 SVG 图片浏览器，显示以 ".svg" 结尾的文件以介绍 SVG 格式图片显示的方法

结构

建立项目

项目名：SVGTest

二、SvgWidget

2.1 鼠标滚轮事件

svgwidget.h

#ifndef SVGWINDOW_H
#define SVGWINDOW_H
 
#include <QtSvg>
#include <QSvgWidget>
#include <QSvgRenderer>
 
class SvgWidget : public QSvgWidget
{
    Q_OBJECT
public:
    SvgWidget(QWidget *parent = 0);
    void wheelEvent(QWheelEvent *);  //相应鼠标的滚轮事件，使SVG图片能够通过鼠标滚轮的滚顶进行缩放
 
private:
    QSvgRenderer *render;            //用于图片显示尺寸的确定
};
 
#endif // SVGWINDOW_H复制

svgwidget.cpp

#include "svgwidget.h"
 
SvgWidget::SvgWidget(QWidget *parent) : QSvgWidget(parent)
{
    render = renderer();
}
 
// 鼠标滚动事件
void SvgWidget::wheelEvent(QWheelEvent *e)
{
    const double diff = 0.1;             //(a)
    QSize size = render->defaultSize();  //(b)
    int width = size.width();
    int height = size.height();
    if(e->angleDelta().y() > 0)          //(c)
    {
        //对图片的长、宽值进行处理，放大一定的比例
        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()操作
}
 复制

(a) const double diff = 0.1; 

鼠标每滚动一次，图片大小改变的比例，这个可以写在配置文件里面

(b) QSize size = render->defaultSize();

这一句和后面两句用于获取图片尺寸

(c) if(e->angleDelta().y() > 0)

获取鼠标滚动的角度，e->angleDelta().y() > 0 表示鼠标向远离用户的方向滚动。滚轮每滚动 1° 相当于移动 8°，常见鼠标滚动一下的角度为 15°，所以滚动一下相当于移动了 120°(=15°*8)

三、svgwindow

 svgwindow.h

#ifndef SVGWINDOW_H
#define SVGWINDOW_H
 
#include <QScrollArea>
#include "svgwidget.h"
 
// SvgWindow继承自QScrollArea类，是一个带滚动条的显示区域。
// 它包含svgWidget类，当图片放大到超过主窗口大小时，能够通过滚
// 轮查看全貌
class SvgWindow : public QScrollArea
{
public:
    SvgWindow(QWidget *parent = 0);
    void setFile(QString);
    void mousePressEvent(QMouseEvent *);
    void mouseMoveEvent(QMouseEvent *);
 
private:
    SvgWidget *svgWidget;
    QPoint mousePressPos;
    QPoint scrollBarValueOnMousePress;
};
 
 
#endif // SVGWINDOW_H复制

svgwindow.cpp

#include "svgwindow.h"
 
SvgWindow::SvgWindow(QWidget *parent) : QScrollArea(parent)
{
    //调用QScrollArea类的setWidget()函数设置滚动区的窗体，
    //使svgWidget成为SvgWindow的子窗口
    svgWidget = new SvgWidget;
    setWidget(svgWidget);
}
 
void SvgWindow::setFile(QString fileName)
{
    //主窗口对文件进行选择或修改时，调用setFile()函数设置新的文件
    svgWidget->load(fileName);                     // 将新的SVG文件加载到svgWidget中进行展示
    QSvgRenderer *render = svgWidget->renderer();
    svgWidget->resize(render->defaultSize());      // 使svgWidget窗体按SVG图片的默认尺寸进行显示
}
 
// 分别获得svgWindow的水平滚动条和垂直滚动条
void SvgWindow::mousePressEvent(QMouseEvent *event)
{
    mousePressPos = event->pos();
    scrollBarValueOnMousePress.rx() = horizontalScrollBar()->value();
    scrollBarValueOnMousePress.ry() = verticalScrollBar()->value();
    event->accept();
}
 
//鼠标键被按下并拖拽鼠标时触发mouseMoveEvent()函数，
//通过滚动条的位置设置实现图片拖拽的效果:
void SvgWindow::mouseMoveEvent(QMouseEvent *event)
{
    //对水平滚动条的新位置进行设置
    horizontalScrollBar()->setValue(scrollBarValueOnMousePress.x() - event->pos().x() + mousePressPos.x());
    //对垂直滚动条的新位置进行设置
    horizontalScrollBar()->update();
    verticalScrollBar()->update();
    event->accept();
}
 复制

四、MainWindow

 mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QMainWindow>
#include "svgwindow.h"
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void createMenu();
 
public slots:
    void slotOpenFile();
 
private:
    SvgWindow *svgWindow;  //用于调用相关函数传递选择的文件名
};
#endif // MAINWINDOW_H复制

mainwindow.cpp 

#include "mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent)
    : 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);
}
 
//显示SVG
void MainWindow::slotOpenFile()
{
    QString name = QFileDialog::getOpenFileName(this, " 打 开 ", "/", "svg files(*.svg)");
    svgWindow->setFile(name);
}
 
 
 复制