Fabric js为导入的svg分配id

Question

当我加载它时，我正在尝试为我的svgs分配一个id，因为在不同的时间我加载不同的东西，所以顺序并不总是相同。

var svgImages = ['textarea-max', 'textarea-min', 'cutout-test']

for (var i = 0; i < svgImages.length; i++) {
  fabric.loadSVGFromURL("/" + svgImages[i] + ".svg", function(objects, options) {
    objects.svgUid = svgImages[i]; (this was just a test)
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj);
    canvas.renderAll();
  });
};

所以前两个id由于某种原因自动生成（textarea-max和textarea-min，但最后只有1）。它们是以同样的方式由我同时创建的。事情看起来很奇怪。在这一点上，任何想法都会有所帮助。

Answer 1

var svgImages = ['textarea-max', 'textarea-min', 'cutout-test']

for (var i = 0; i < svgImages.length; i++) {
  (function(i) {
    fabric.loadSVGFromURL("/" + svgImages[i] + ".svg", function(objects, options) {
      var obj = fabric.util.groupSVGElements(objects, options);
      obj.svgUid = svgImages[i];
      canvas.add(obj);
      canvas.calcOffset();
      canvas.renderAll();
    });
  })(i);
};

loadSVGFromURL采用匿名函数，我的值不会按预期设置。所以制作另一个函数并在该范围内传递i值你可以得到精确的i值并将svgUid设置为从groupSVGElements创建的obj然后添加到画布。

ES6

const svgImages = ['textarea-max', 'textarea-min', 'cutout-test'];

for (let i = 0; i < svgImages.length; i++) {
  fabric.loadSVGFromURL(`/${svgImages[i]}.svg`, (objects, options) => {
    const obj = fabric.util.groupSVGElements(objects, options);
    obj.svgUid = svgImages[i];
    canvas.add(obj);
    canvas.calcOffset();
    canvas.renderAll();
  });
}