请参阅链接: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();
  };

最佳答案

您可以使用.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";

关于javascript - fabric js:在分组对象的情况下更改图像URL,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26439580/

10-12 12:47
查看更多