Question

请参阅链接：http://jsfiddle.net/mishragaurav31/ang58fcL/#base

我从两个对象（圆形和文本）和两个图像中的其他对象制作两个分组对象，

当我想要为组1更改任何组的属性时，它可以正常工作。

但是当我想为第2组选择图像src时它不起作用。

如何使其有效？..

Html代码：

    <canvas id="c" width="400" height="400"></canvas><br>
<a id="cg1">change image</a>
<a id="cg2">change text</a>

javascipt代码：

var canvas = new fabric.Canvas('c');

    fabric.Image.fromURL('http://icons.iconarchive.com/icons/benjigarner/softdimension/256/Image-ready-CS-2-icon.png', function(img) {
        var img1 = img.set({ left: 0, top: 0 });
        fabric.Image.fromURL('http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png', function(img) {
            var img2 = img.set({ left: 0, top: 0 });
            var group = new fabric.Group([ img1, img2], { left: 0, top: 0 });
            canvas.add(group)
        });
    });


var comicSansText = new fabric.Text("I'm in Comic Sans", {
  fontFamily: 'Comic Sans'
});

var circle = new fabric.Circle({
  radius: 100,
  fill: '#942f99',
  scaleY: 0.5,
  originX: 'center',
  originY: 'center'
});

var group2 = new fabric.Group([ comicSansText, circle ], {
  left: 150,
  top: 100,
  angle: -10
});

canvas.add(group2);



  document.getElementById('cg1').onclick = function() {
      group.item(1).setAttribute("src", "http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.png");
      canvas.renderAll();
  };

  document.getElementById('cg2').onclick = function() {
      group2.item(1).setFill('red');
      canvas.renderAll();
  };

Answer 1

您可以使用.setElement更改图片。

例如，假设您有一个名为“myFabricObect”的fabricJS图像对象。

然后，如果您有一个html图像元素---，在您的页面上，您可以使用“newImage”加载myFabricObject，如下所示：

myFabricObject.setElement(document.getElementById("newImage"));

您还可以新建一个javascript Image（）并将其分配给myFabricObject：

var img=new Image();
img.onload=function(){
myFabricObject.setElement(img);
}
img.src="myNewImage.png";

fabric js：在分组对象的情况下更改图像URL

1 个答案: