4

我正在尝试加载 SVG 文件并想使用 KineticJS (KJS) 在画布上显示它，所以想知道是否可以在使用 KJS 的画布中显示任何具有随机形状和路径的 SVG 文件？

现在通过不同软件导出的 SVG 也有很大的不同，例如通过 Adob​​e Illustrator 导出的 SVG 中具有填充、描边、描边宽度等。作为它们各自标签的属性，而通过 Inkscape 导出的 SVG 具有所有这些即填充、描边、描边宽度等。作为它们各自标签的“样式”属性的字符串值。

因此，我即将编写自己的 SVG 解析器，专门针对 AI 导出的 SVG 格式，然后使用它通过 KJS 在画布上重绘 SVG。但在此之前，我只想检查：

  1. 有没有可用的工具，可以将所有原始（线、矩形、圆等）标签转换为路径标签？即，而不是矩形和椭圆标记，它们被转换为它们的等效路径标记。
  2. 除了 KJS，还有其他方法可以将 SVG 加载到画布上吗？
4

2 回答 2

5

不幸的是，您不能将drawImageSVG 转换为 Canvas（测试）。

但是您可以使用canvg以自定义 KineticJS 形状（测试）绘制 SVG：

var drawSvg = new Kinetic.Shape ({
  x: 10, y: 10,
  drawFunc: function (canvas) {
    canvas.getContext().drawSvg (svgSource, 0, 0, 25, 25)
  }
}); layer.add (drawSvg)
于 2013-02-21T15:19:28.333 回答
3

实际上，可以将一个 SVG 的 drawImage() 绘制到 Canvas 中（ArtemGr 的代码对我来说在 FF 和 Chrome 中工作）。

但是在 Chrome 中，您会遇到 Origin Policy 错误（在https://bugs.webkit.org/show_bug.cgi?id=17352中报告了一个错误）。

我尝试将canvg与动力学一起使用，但我发现了2个问题：

  1. 启用 Kinetic 的监听时非常慢；
  2. 如果您需要缩放图像，它的渲染质量很差；

我发现的一个解决方案是使用 fabricjs 的 SVG 渲染，这被证明是非常优越的。代码如下所示：

var fabricSvg;
// uses the fabric SVG engine
fabric.loadSVGFromUrl(svgSource, function(objects, opts) {
  if (objects.length > 1) 
    fabricSvg = new fabric.PathGroup(objects, opts);
  else
    fabricSvg = objects;

  fabricSvg.originX = 'left';
  fabricSvg.originY = 'top';

  var drawSvg = new Kinetic.Shape({
    x: 10, y: 10,
    drawFunc: function(canvas) {
      // use fabric SVG engine with Kinetic canvas context
      fabricSvg.render(canvas.getContext());
    }
  });
  layer.add(drawSvg);
});

这样我们就可以使用 Kinetic 动画引擎，它比 Fabric 的性能更好，以及 Fabric 的 SVG 渲染模块。

于 2013-07-09T01:41:17.447 回答