我正在尝试将加载的图像添加到结构组对象中。一切看起来都不错,但选择控件不可选,我无法拖动对象。左上角控件有效但点击后一切都很好。
这是一个展示行为的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();
});
这是一个错误还是我做错了什么?
出于某些性能原因,在将对象添加到组之后,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();
});
我发现这篇文章是因为我无法正确定位图像。我最终发现使用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