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

Question

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

这是一个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();
});

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

Answer 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();
});