fabric.js добавляя изображение объекта к группе

Question

Я думаю/надеюсь, что это простой вопрос:

Можно ли добавить изображение объекта к fabric.group, как я сделал с другими элементами здесь:

var rect = new fabric.Rect({ 
    fill: "lightblue", 
    stroke: "black", 
    width: 155, 
    height: 20, 
    id: 'infosquare' 
}); 



var text = new fabric.Text(label.toString(), { 
    fontSize: 11, 
    fontFamily: "Verdana, sans-serif", 
    fill: "black" 

}); 



var stairInfo = new fabric.Group([rect, text], { 
    left: x, 
    top: y, 
    borderColor: 'yellow', 
    id: 'stairInfo', 
    hasControls: false, 
    selection: false, 
    hasRotatingPoint: false 
}); 

Каждый пример, я нашел действительно добавить изображение непосредственно на холст, как это:

var target_pin = fabric.Image.fromURL('pics/pin_target.png', function (target_pin) { 
     canvas.add(target_pin.set({ 
      top: top, 
      left: left, 
      hasControls: false, 
      selection: false, 
      hasRotatingPoint: false, 
      scaleX: 0.07, 
      scaleY: 0.07, 
      id: 'target_pin' 

     })); 


     canvas.renderAll(); 
     canvas.bringToFront(target_pin); 


    }); 

, но я не хочу, что я хочу добавить изображение в группе выше, и возвращение всей группы в другую весело фикция. Надеюсь, кто-то может мне помочь.

Answer 1

Конечно, это работает для меня:

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

 
    var myimg; 
 
    var triangle = new fabric.Triangle({ 
 
     left:0, 
 
     top: 0, 
 
     fill: 'green', 
 
     width: 50, 
 
     height: 50, 
 
    }); 
 
    var circle = new fabric.Circle({ 
 
     left: 50, 
 
     top: 0, 
 
     radius: 50, 
 
     fill: 'blue', 
 
    }); 
 

 
    fabric.Image.fromURL('http://fabricjs.com/site_assets/challengepost.png', function (oImg) { 
 
     myimg = oImg.setLeft(100); 
 
     var group = new fabric.Group([triangle, circle, myimg], { 
 
      left: 50, 
 
      top: 50, 
 
     }); 
 
     canvas.add(group); 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<canvas id="c"></canvas>

Edit: Для ответа на второй вопрос, главное, чтобы помнить, что вы не можете ничего сделать с пока объект не закончит загрузку. В моем первоначальном ответе функция обратного вызова выполняется только после загрузки изображения, а затем объект изображения добавляется в группу/холст. Если вы хотите сделать это в коде, вам нужно будет сделать вручную проверить, что загрузка изображения завершена, что-то вроде этого:

var canvas = new fabric.Canvas('c'); 
 
    var myimg; 
 
    var group; 
 
    var imageLoaded = false; 
 

 
    function addGroup() { 
 
     if (!imageLoaded) { 
 
      // Image not loaded yet, need to wait 
 
      setTimeout(function() { addGroup() }, 100); 
 
      return; 
 
     } 
 
     // Ok we have the image, can add to group/canvas 
 
     group = new fabric.Group([hi, rect, myimg], { 
 
      left: 50, 
 
      top: 50 
 
     }); 
 
     canvas.add(group); 
 
    } 
 

 
    var hi = new fabric.Text('hello.', { 
 
     left: canvas.getWidth()/3, 
 
     id: 'greetings' 
 
    }); 
 

 
    var rect = new fabric.Rect({ 
 
     fill: 'red', 
 
     width: 10, 
 
     height: 100, 
 
     id: 'square' 
 
    }); 
 

 
    var myimg; 
 
    fabric.Image.fromURL('http://fabricjs.com/site_assets/challengepost.png', function (oImg) { 
 
     myimg = oImg.setLeft(100); 
 

 
     // Set flag when image loading complete 
 
     imageLoaded = true; 
 
    }); 
 

 
    // Do some other stuff here 
 

 
    addGroup();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
    <canvas id="c"></canvas>

Answer 2

ОК спасибо, это работает. Но можно ли добавить группу позже в прогам на холст? Я хочу, чтобы программа вести себя так:

1. Создание элементов (изображение включено)

2. Добавьте все созданные элементы в одну группу

3 добавить группу на холст

Когда я сделаю это с вашим кодом, он будет выглядеть так, но, к сожалению, он не работает.

var hi = new fabric.Text('hello.', { 
       left: canvas.getWidth()/3, 
       id: 'greetings' 
}); 

var rect = new fabric.Rect({ 
       fill: 'red', 
       width: 10, 
       height: 100, 
       id: 'square' 
}); 

var myimg; 
fabric.Image.fromURL('http://fabricjs.com/site_assets/challengepost.png', function (oImg) { 
    myimg = oImg.setLeft(100); 

}); 

var group = new fabric.Group([hi, rect, myimg], { 
    left: 50, 
    top: 50 
}); 

canvas.add(group); 

Что я могу сделать, чтобы сделать так, как будто я хочу.