Как создать группу в fabric.js

Question

Я хочу создать группу, которая будет содержать комбинацию изображение и текст, и будет вести себя как один, однако, когда я делаю что:

https://gist.github.com/1682293

я могу Переместите эту группу. Чтобы он работал, мне нужно сначала добавить изображение и текст в холст, а затем создать группу с этим изображением и текстом, а затем удалить изображение и текст, добавленные отдельно.

Что я там делаю неправильно?

Answer 1

Это, кажется, было исправлено в последней версии fabric.js. Я был в состоянии заставить его работать с version 0.9.15:

function drawImage(name, left, top) { 
    fabric.Image.fromURL('../nav-host.png', function (img) { 
     var oImg = img.scale(4); 
     var caption = new fabric.Text(name, { 
      fontFamily: 'Arial' 
     }); 
     var group = new fabric.Group([oImg, caption], { left: left, top: top }); 
     canvas.add(group); 
    }); 
} 

Answer 2

Я придумал это, чтобы добавить часть текста генерируется динамически из счетчика сценария. Этот код добавит группу, сделанную из изображения и текста. Текст установлен над изображением, и он обновляется с каждым нажатием кнопки, когда он добавляет их к вашему холсту. Поэтому, когда вы нажимаете кнопку, первый раз в тексте будет указан Sticky Card # 1. Следующий клик даст вам вторую группу с текстом, на котором изображена Sticky card # 2. Изображение было всего 30px X 30px.

Это счетчик скриптов в начале моей страницы.

$(window).load(function(){ 
    $('.stickycard').click(function() { 
    $('#cardcount').html(function(i, val) { return val*1+1; }); 
    }); 
    }); 

Это мой код fabric.js, который я использовал в kitchensink.js.

if ($(element).hasClass('image1')) { 
    fabric.Image.fromURL('toolimg/yellow-stickycard.png', function(img) { 

    var yellcard = img.scale(1.0).set({ left: 22, top: 15 }); 

     var cardcount = $('#cardcount').text(); 

     var sticky = new fabric.Text('Sticky Card #'+ (cardcount), { 
      fontSize: 12, 
      cornerSize: 6 
      }); 

      var group = new fabric.Group([ sticky, yellcard ], { 
      left: 150, 
      top: 100, 
      cornerSize: 6 
      }); 

      group.set({ 
      left: left, 
      top: top, 

      }); 


     canvas.add(group); 

      }); 
    } 

Это мой HTML-код для кнопки и div, который показывает количество.

<button type="button" class="btn image1 stickycard" id="yellstickycard"><img src="toolimg/yellow-stickycard.png" /></button> 
    <div id="cardcount">0</div>