在KineticJS中加载SVG

我正在尝试加载SVG文件，并希望使用KineticJS（KJS）在画布上显示它，所以想要知道是否可以使用KJS在画布中显示任意形状和路径的SVG文件？

现在，通过不同软件导出的SVG也有很大不同，比如说通过Adobe Illustrator导出的SVG具有填充，描边，笔画宽度等。作为各自标签的属性，通过Inkscape导出的SVG包含所有这些即填充，笔画，笔画宽度等。作为“style”属性到其各自标签的字符串值。

所以我正在编写自己的SVG解析器，特定于AI输出的SVG格式，然后用它通过KJS在画布上重新绘制SVG。 但在此之前，我只想检查：

有没有可用的工具，它可以将所有原始（线，矩形，圆形等）标记转换为路径标记？ 也就是说，它们被转换为等效的路径标签，而不是直角和椭圆标签。

除了KJS之外，还有其他的将SVG加载到画布上的方法吗？

---

不幸的是，您不能将图像SVG drawImage到画布上（测试）。

但是您可以使用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)

---

实际上，可以将Image（）一个SVG绘制到Canvas中（ArtemGr的代码在FF和Chrome中为我工作）。

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

我试图用kinev使用canvg，但是我发现了两个问题：

当Kinetic的收听启用时，它非常缓慢;

如果您需要缩放图像，渲染质量非常差;

我发现的一个解决方案是使用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渲染模块。

链接地址: http://www.djcxy.com/p/95837.html

上一篇: Loading SVG in KineticJS

下一篇: Convert SVG polygon to path