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

FabricJS adding Image to Group causes odd control behavior

本文关键字：控制 图像 添加 FabricJS      更新时间：2024-03-25

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

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

这是bug还是我做错了什么？

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

所以在执行addWithUpdate之后，只需调用group.setCourds（）；

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

我看到这篇文章是因为我在正确定位图像方面遇到了问题。我最终发现，在将其添加到组之前，只需使用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
相关文章：