javascript - Canvas 库处理 SVG 的方式和 SVG 库处理 SVG 的方式有什么区别？

Question

我对探索浏览器中的图形用户界面非常感兴趣。我真的很喜欢 .SVG 文件，原因有很多，主要是它们具有可扩展性，并且可以在 Illustrator 等程序中轻松制作。我喜欢的另一件事是，在许多库(例如 Snap.svg)中，可以选择各个图层(例如更复杂形状的圆形路径)。

但是，我也经常使用粒子，并且有很多对象要绘制。因为我做的事情对音乐有反应，所以我需要绝对最快的库(以保持许多对象的高 FPS 计数)。

在查看了 webGL 和 SVG 以及 canvas 之后，我发现 webGL 显然是绘制诸如图片之类的东西最快的，但是我没有看到能够使用 webGL 并访问与原生 svg 库具有的相同路径信息的库.

有人可以向我解释一下“原生”svg 库和使用 Canvas 元素(例如 paper.js fabric.js)和“svg 解析器”的库之间的区别吗？ (我什至不知道什么是 svg 解析器)。

似乎图书馆以某种方式将项目绘制到 Canvas 上，我相信这会将它们变成光栅(失去 svgs 的可扩展性和分辨率独立性)而且我不确定 svgs 的各个层/路径是否仍然可以被选中(因为它们可以在像 Snap 这样的库中)。

我也很想知道为什么没有基于 webGL 的 svg 库。

谢谢

Answer 1

这里是快速分解(免责声明:我是 Fabric.js 的作者)

SVG 库

Raphael.js、Bonsai.js、svg.js、Snap.svg 等

这些使用SVG作为渲染图形的底层技术。这是矢量图形。它们都是抽象和“网关”，允许您执行这样的操作(来自盆景的示例):

var shape1 = new Rect(10,10,100,100).attr({fillColor: 'red'});
var group = new Group();
group.addChild(shape1);

stage.addChild(group);

得到这个:

<svg data-bs-id="0" width="796" height="796" class=" bs-1416663517803-1" viewBox="-0.5 -0.5 796 796">
  <defs></defs>
  <g data-bs-id="1087">
    <g data-bs-id="1089">
      <path data-bs-id="1088" d="M 0 0 l 100 0 l 0 100 l -100 0 Z" 
            fill="rgba(255,0,0,1)" 
            data-stroke="rgba(0,0,0,1)" 
            transform="matrix(1,0,0,1,10,10)" 
            stroke-width="0" 
            stroke-dashoffset="0"></path>
    </g>
  </g>
</svg>

依次呈现如下:

这些库允许您通过更高级别的抽象间接使用 SVG 节点、属性和值。

Canvas 库

Fabric.js、Paper.js、Kinetic.js 等

这些使用canvas作为渲染图形的底层技术。这是光栅图形。它们也是抽象 和“网关”，允许您执行这样的操作(来自 Fabric 的示例):

var rect = new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 100, 
  height: 100, 
  fill: 'red'
});
canvas.add(rect);

并让它像这样呈现:

由于这些库是基于 Canvas 的，文档将只有 <canvas>元素。其他一切都在内部用(低级)代码表示，如下所示:

var canvasEl = document.getElementById('c');    
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

带有 SVG 解析的 Canvas 库

Fabric.js、canvg 等

这些是 Canvas 库的子集，但支持解析 SVG。这意味着库可以像这样使用 SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve">
  <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
</svg>

然后像这样渲染它:

这本质上是 SVG -> Canvas 转换。而且还是矢量->伪光栅转换。它是伪光栅的原因是因为质量没有损失(至少在 Fabric 的情况下)。在转换矢量 SVG 时，Fabric 会从中生成一个虚拟的非光栅对象，然后可以在不损失质量的情况下以任何大小、 Angular 、位置等呈现该对象。它甚至可以导出回 SVG。只有在 Canvas 上渲染时，它才会变成光栅图形。

WebGL 库

Three.js、Babylon.js、c3DL、Pixi.js等

这些是使用 WebGL 渲染上下文而不是“2d”上下文的 Canvas 库(基于 <canvas>，而非 SVG)的超集:

// webgl canvas libraries
canvas.getContext('webgl');

// non-webgl canvas libraries
canvas.getContext('2d');

与非 WebGL Canvas 库相比，WebGL Canvas 库使用完全不同的 API 通过 Canvas 绘制图形。他们还经常支持“2d”上下文，作为后备方案。

WebGL 2d 与 3d

WebGL 库也可以分为 2d 和 3d——那些“专攻”2d 或 3d 输出的库。 3d webgl 库最流行的例子是 Three.js 和 2d — Pixi.js。

附带说明一下，一旦我们在 Fabric.js 中添加了对 WebGL 渲染器的支持，该库将从“支持 SVG 的 Canvas 库”变为“支持 SVG 的支持 webgl 的 Canvas 库”:)