fabric-js:在分组对象的情况下更改图像url

fabric js : change image url in case of grouped objects

本文关键字：情况下 图像 url 对象 fabric-js      更新时间：2023-09-26

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

我制作了两个分组对象，一个来自两个对象（圆圈和文本），另一个来自于两个图像，

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

但当我想为第二组使用图片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图像（），并将其分配给myFabricObject:

var img=new Image();
img.onload=function(){
myFabricObject.setElement(img);
}
img.src="myNewImage.png";
相关文章：