Qt之SVG:Qt简单使用SVG的介绍

文章目录

  • 一、SVG 是什么?
  • 二、Qt 怎么显示和创建SVG
    • 2.1 使用QGraphicsSvgItem 显示
    • 2.2 使用 QSvgWidget 显示
    • 2.3 使用 QSvgRenderer 渲染其他绘制设备
    • 2.4 使用QSvgGenerator 创建SVG 文件
  • 三、总结

一、SVG 是什么?

可伸缩矢量图形(SVG)是一种基于XML的语言,用于描述二维矢量图形。

如下面这个简单表示圆的SVG文件


DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="green" />
svg>

在svg 标签中 包含一个 circle 标签,circle元素的属性 定义了这个圆的特性。

SVG 本身还定义了 多种图形标签,路径标签、文本标签、特效标签、滤镜等。

详见:

SVG 教程 | 菜鸟教程 (runoob.com)

SVG 在线编辑器

二、Qt 怎么显示和创建SVG

Qt提供了用于在小部件和其他绘画设备上渲染和显示SVG图纸的类。

  1. QGraphicsSvgItem 可用于呈现SVG文件内容的QGraphicsItem

  2. QSvgWidget 用于显示可缩放矢量图形(SVG)文件内容的小部件

  3. QSvgRenderer 用于将SVG文件的内容绘制到绘画设备上

  4. QSvgGenerator 用于创建SVG图纸的绘画设备

2.1 使用QGraphicsSvgItem 显示

Qt之SVG:Qt简单使用SVG的介绍_第1张图片

1)新建一个文本文件,复制上面的表示圆的SVG的文本,并保存到代码目录下,文件名为 circle.svg

2)通过 QGraphicsSvgItem 类的构造函数 来传入 SVG 的文件

#include 
#include 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QGraphicsSvgItem *item = new QGraphicsSvgItem(QString( "circle.svg"));
    item->setFlag (QGraphicsItem::ItemIsMovable);
    QGraphicsScene scene;
    scene.addItem (item);

    QGraphicsView view;
    view.setScene (&scene);
    view.show ();

    return a.exec();
}

2.2 使用 QSvgWidget 显示

这个更简单,因为不需要加入场景和视窗。

也是通过 QSvgWidget类的构造函数 传入 SVG 的文件的文件名

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QSvgWidget w(QString( "circle.svg"));
    w.resize (300,300);
    w.show ();
    return a.exec();
}

2.3 使用 QSvgRenderer 渲染其他绘制设备

QGraphicsSvgItem 和 QSvgWidget 之所以能够直接显示SVG图形,是因为其内部的QSvgRenderer类,在构造函数传入SVG文件名时,QSvgRenderer就加载了文件,并在绘制事件时,调用 QSvgRenderer::render( painter ) 方法。

使用QSvgRenderer类还可以对渲染过程进行更多控制,因为它可以用于在其他绘制设备(例如QImage和QGLWidget)上进行绘制。

比如:

1)使用QSvgRenderer 加载SVG

2)获取 QSvgRenderer 返回的大小

3)定义绘制设备 比如 QPixmap

4)提供 QPixmap 的 画家

5)QSvgRenderer 设置绘制设备

6)使用 QLabel 来显示 SVG 图形

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QSvgRenderer render;
    render.load (QString("circle.svg"));

    QSize size = render.defaultSize ();
    QPixmap pix(size*5);        // 可以在这儿直接缩放处理
    pix.fill (Qt::transparent); // 像素清空

    QPainter painter(&pix);
    painter.setRenderHints (QPainter::Antialiasing);
    render.render (&painter);

    QLabel label;
    label.setPixmap (pix);
    label.setAlignment (Qt::AlignCenter);

    label.show ();
    return a.exec();
}

2.4 使用QSvgGenerator 创建SVG 文件

QSvgGenerator 继承了 QPaintDevice,代表一个可绘画设备,但是只产生可缩放矢量图形(SVG)的绘图。 像QPrinter一样,它被设计为只写设备,可以生成特定格式的输出。

​ 要写入SVG文件,首先需要通过设置fileName或outputDevice属性来配置输出。 通常,必须通过设置size属性来指定图形的大小,并且在某些情况下该图形将包含在另一个图形中,还需要设置viewBox属性。

#include 
#include 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QSvgGenerator generator;        // 定义SVG的产生器
    generator.setFileName (QString("temp.svg"));    // 设置SVG文件名
    generator.setDescription ("Test QSvgGenerator");    // 无所谓
    QSize size(400,400);
    generator.setSize (size);       // 设置大小
    generator.setViewBox(QRect(0, 0, 400, 400));  // 视口大小

    QPainter painter;               // 小画家
    painter.begin (&generator);
    QRect rect(0,0,400,400);
    painter.setBrush (Qt::cyan);
    painter.drawEllipse (rect);     // 直接在 generator 上绘制 一个圆
    painter.end ();                 // 需要保证绘制结束

    return 0;
}

Qt之SVG:Qt简单使用SVG的介绍_第2张图片

temp.svg内容


<svg width="141.111mm" height="141.111mm"
 viewBox="0 0 400 400"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
  <title>Qt SVG Documenttitle>
  <desc>Test QSvgGeneratordesc>
  <defs>
  defs>
  <g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

    <g fill="#00ffff" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square" stroke-linejoin="bevel" transform="matrix(1,0,0,1,0,0)"
    font-family="SimSun" font-size="9" font-weight="400" font-style="normal" >
    	<circle cx="200" cy="200" r="200"/>
    g>
  g>
svg>

三、总结

Qt 创建和显示SVG 图形 ,都不算复杂,但是SVG文件本身可以很复杂,可以是包括多个图形元素的集合,如果需要单独显示其中的某个元素,使用 QSvgRenderer 来控制了。

你可能感兴趣的:(#,Qt,案例,qt)