FabricJS 将图像添加到组会导致奇怪的控制行为答案

【问题标题】：FabricJS adding Image to Group causes odd control behaviorFabricJS 将图像添加到组会导致奇怪的控制行为
【发布时间】：2016-07-31 01:56:28
【问题描述】：

我正在尝试将加载的图像添加到织物组对象中。一切看起来都不错，但选择控件不可选择，我无法拖动对象。左上角的控件虽然可以工作，但单击它后一切都很好。

这是一个 jsfiddle，它演示了该行为。

var canvas = new fabric.Canvas('canvas', { 
  width: 200, 
  height: 200
});
var group = new fabric.Group();
canvas.add(group);
fabric.Image.fromURL('https://placehold.it/100x100', function(img) {
  group.addWithUpdate(img);
  canvas.setActiveObject(group);
  canvas.renderAll();
});

这是一个错误还是我做错了什么？

【问题讨论】：

我目前有一个解决方法，我只是将组重新初始化为一个全新的实例并将图像传递给构造函数。似乎可以这样工作，但添加到现有组仍然不起作用。
只需调用 group.setCoords();做完 addWithUpdate

标签： javascript fabricjs

【解决方案1】：

出于某些性能原因，fabricjs 在将对象添加到组后不会自动调用 setCoords（如果添加了许多对象，您可以只调用一次 setCoords）。

所以在做 addWithUpdate 之后，只需调用 group.setCoords();

var canvas = new fabric.Canvas('canvas', { 
  width: 200, 
  height: 200
});
var group = new fabric.Group();
canvas.add(group);
fabric.Image.fromURL('https://placehold.it/100x100', function(img) {
  group.addWithUpdate(img);
  group.setCoords();
  canvas.setActiveObject(group);
  canvas.renderAll();
});

【讨论】：

行得通！我永远不会想到这一点。谢谢！

【解决方案2】：

我看到这篇文章是因为我无法让图像的位置正常工作。我最终发现使用document.createElement 创建一个图像元素并设置src，然后将其输入fabric.Image 以及您需要的所有选项（而不是使用fabric.Image.fromURL 这太多了）更容易使用起来很头疼），然后将其添加到组中。

var oImg = document.createElement("img");
oImg.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/512px-Cog_font_awesome.svg.png');
var i = new fabric.Image(oImg, {
    originX: 'center',
    originY: 'center',
    left: left+35,
    top: top-30,
    scaleX:.05,
    scaleY:.05,
});
g = new fabric.Group([r, t, i]); // where r and t are other fabric objects

【讨论】：