面料JS：改变图像的URL在分组对象的情况下

Question

见链接：http://jsfiddle.net/mishragaurav31/ang58fcL/#base

我做两个组合的对象一个由两个对象（圆和文本）以及其他来自两个图像，

时，我想改变组1的任何组的属性，它工作正常。

但是当我想chnage组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图片（ ），并将其赋值给myFabricObject：

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