javascript - FabricJS:将 SVG 添加到 Canvas 但在导出时不可见

Question

我正在尝试使用 FabricJS 将 SVG 添加到 Canvas 对象，然后将其导出到数据 url 图像以让用户保存图像，箭头显示在 Canvas 中，但是当我调用 toDataURL 方法并检查时图像，它只是一个空图像。我还检查了 toSVG() 方法来检查下垂是否存在，但它不在导出的 SVG 中。

我创建了一个 fiddle来证明这一点。

在示例中，单击按钮并调用 canvas.toDataURL() 时会显示箭头。并在我的浏览器中检查它，显示一个空图像。调用canvas.toSVG()还返回一个不带箭头 svg 的 SVG，如 fiddle 中所示。

有人能指出我正确的方向吗？

提前致谢!

Answer 1

您需要将调用放在回调中，否则它们会在数据加载之前发生，例如

  fabric.loadSVGFromString(svgString, function(results, options) {
    var arrow = results[0];
    canvas.add(arrow);
    console.log(canvas.toDataURL());
    console.log(canvas.toSVG()); 
  });

或者as a fiddle