Fabric.js-等待loadedSVGFromString完成后再渲染组

Question

我正在使用Fabric.js创建交互式画布。 当用户单击按钮时，我在我的diagram.js文件中调用addNewItem函数。 单击此后，我想向画布的中心添加一个新组。 我遇到的问题是，我要添加到组中的两个元素之一是要通过Fabric自己的loadSVGFromString方法加载的SVG。 这需要时间才能完成，这意味着在以下示例中，Promise中未定义group 。

diagram.js（仅显示相关代码）

addNewItem = (e, item) => {
  e.preventDefault();

  drawPlayer(item.svg, this.state.playerIconColor, borderColor, item.sizes[this.state.iconSize].height, item.sizes[this.state.iconSize].width, 'LM')
  .then((newItem) => {
    newItem.hasControls = false;
    canvas
      .add(newItem)
      .centerObject(newItem)
      .setActiveObject(newItem)
      .renderAll();
    newItem.setCoords();
  })
  .catch((notCreated) => {
    alert(notCreated);
  });
}

drawPlayer.js

import { fabric } from 'fabric';

const drawPlayer = (icon, iconFill, borderColor, height, width, label) => {
  // Create empty group
  let group;

  fabric.loadSVGFromString(icon, (objects, options) => {
    const canvasItem = fabric.util.groupSVGElements(objects, options);
    canvasItem.hasControls = false;
    canvasItem.setFill(iconFill);
    canvasItem.set({ borderColor });
    canvasItem.scaleToHeight(height);
    canvasItem.scaleToWidth(width);

    const playerText = new fabric.Text(label, {
      fontSize: 10,
      originX: 'center',
      originY: 'center',
    });

    group = new fabric.Group([canvasItem, playerText], { left: 200, top: 200 });
  });

  return new Promise((resolve, reject) => {
    if (group.length > 0) {
      resolve(group);
    } else {
      reject('Not created');
    }
  });
};

export default drawPlayer;

Answer 1

您可以在执行loadSVGFromString之后尝试解决/拒绝promise。

import { fabric } from 'fabric';

const drawPlayer = (icon, iconFill, borderColor, height, width, label) => {
  // Create empty group
  let group;
  let groupResolve;
  let groupReject;

  fabric.loadSVGFromString(icon, (objects, options) => {
    const canvasItem = fabric.util.groupSVGElements(objects, options);
    canvasItem.hasControls = false;
    canvasItem.setFill(iconFill);
    canvasItem.set({ borderColor });
    canvasItem.scaleToHeight(height);
    canvasItem.scaleToWidth(width);

    const playerText = new fabric.Text(label, {
      fontSize: 10,
      originX: 'center',
      originY: 'center',
    });

    group = new fabric.Group([canvasItem, playerText], { left: 200, top: 200 });
    if (group.length > 0) {
      groupResolve(group);
    } else {
      groupReject('Not created');
    }
  });

  return new Promise((resolve, reject) => {
    groupResolve = resolve;
    groupReject = reject;
  });
};

export default drawPlayer;