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

问题描述 投票:0回答:2

我正在尝试将加载的图像添加到结构组对象中。一切看起来都不错,但选择控件不可选,我无法拖动对象。左上角控件有效但点击后一切都很好。

这是一个展示行为的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();
});

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

javascript fabricjs
2个回答
2
投票

出于某些性能原因,在将对象添加到组之后,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();
});

0
投票

我发现这篇文章是因为我无法正确定位图像。我最终发现使用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
© www.soinside.com 2019 - 2024. All rights reserved.