在KineticJS中加载SVG-Java 学习之路

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

现在通过不同软件导出的SVG也有很大不同，比如说在通过Adobe Illustrator导出的SVG中有填充，笔触，笔触宽度等等 . 作为各自标签的属性，而通过Inkscape导出的SVG具有所有这些即填充，描边，描边宽度等 . 作为各自标签的“样式”属性的字符串值 .

因此，我即将编写自己的SVG解析器，特定于AI导出的SVG格式，然后使用它通过KJS在画布上重绘SVG . 但在此之前，我只是想检查一下：

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

2 回答

不幸的是你不能 drawImage SVG进入画布（test） .

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

var drawSvg = new Kinetic.Shape ({
  x: 10, y: 10,
  drawFunc: function (canvas) {
    canvas.getContext().drawSvg (svgSource, 0, 0, 25, 25)
  }
}); layer.add (drawSvg)

回复于 2024-04-29T00:05:39+08:00

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

但在Chrome中，您将遇到原始策略错误（https://bugs.webkit.org/show_bug.cgi?id=17352中报告了一个错误） .

我试过用动能的canvg，但我发现了2个问题：
- 当Kinetic的聆听启用时，它是 very 慢;
- 如果需要缩放图像，渲染质量非常差;
我发现的解决方案是使用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);
});
```
这样我们就可以使用动力学动画引擎，它具有比织物更好的性能，以及Fabric的SVG渲染模块 .
回复于 2024-04-29T00:05:39+08:00

在KineticJS中加载SVG

2 回答

相关问题