FabricJS：将 SVG 添加到 canvas 但在导出时不可见

Question

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

我创建了一个 fiddle 来演示这一点。

在示例中，单击按钮时会显示箭头，我调用 canvas.toDataURL() 并在我的浏览器中进行了检查，结果显示了一个空图像。调用 canvas.toSVG() 也 returns 没有箭头 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

FabricJS：将 SVG 添加到 canvas 但在导出时不可见

FabricJS: Adding SVG to canvas but invisible on export

javascript

svg

canvas

fabricjs