代码之家 › 专栏 › 技术社区 › Brandon Joyce

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

fabricjs javascript

Brandon Joyce · 技术社区 · 9 年前

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

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

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

2 回复 | 直到 9 年前

AndreaBogazzi 9 年前

出于某些性能原因,fabricjs在向组中添加对象后不会自动调用setCoords(如果添加了多个对象,您可以只调用setCoods一次)。

因此,在执行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();
});

Nic Scozzaro 6 年前

我看到这篇帖子是因为我很难让图像的定位正常工作。我最终发现,使用 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

推荐文章

chizz · fabricJs自定义对象不从JSON呈现

7 年前

anonymoose · 对象属性不会通过JSON保存或加载持久化

7 年前

Jaan · Fabricjs对象在完成时移动火

7 年前

user9513304 · 如何触发或接收组中对象的事件?

7 年前

Michael Tsipes · fabric的上下文菜单。js不在Safari中工作

7 年前

Peter I · FabricJS缩放图像以适应宽度/大小

7 年前

anonymoose · 更新JSON。字符串化(画布);最新画布更改

7 年前

MyNameIsMe · 织物节点上的js。js应用筛选器失败

7 年前

anonymoose · 如何对任何结构使用centeredScaling。js对象

7 年前

anonymoose · 如何将图像添加到画布,并按大小缩放?

7 年前