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

Answer 2

我遇到这个 post 是因为我无法正确定位图像。我最终发现使用 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

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

FabricJS adding Image to Group causes odd control behavior

javascript

fabricjs