Как создать группу в fabric.js - PullRequest
Новая
       10

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

3 голосов
/ 26 января 2012

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

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

Ответы [ 2 ]

2 голосов
/ 14 ноября 2012

Это, кажется, было исправлено в последней версии fabric.js. Я смог заставить его работать с версия 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);
    });
}
0 голосов
/ 11 декабря 2013

Я придумал это, чтобы добавить часть текста, динамически генерируемого из встречного скрипта.Этот код добавит группу из изображения и текста.Текст установлен над изображением, и он обновляется при каждом нажатии кнопки, когда добавляет их на холст.Таким образом, когда вы нажимаете кнопку в первый раз, текст будет говорить Sticky Card # 1.Следующий щелчок даст вам вторую группу с текстом «Липкая карточка № 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>
...