如何在 fabric.js 中创建一个组答案

【问题标题】：How to create a group in fabric.js如何在 fabric.js 中创建一个组
【发布时间】：2012-02-19 12:01:02
【问题描述】：

我想创建一个包含图像和文本组合并且表现得像一个的组，但是当我这样做时：

https://gist.github.com/1682293

我无法移动该组。为了使其工作，我需要先将图像和文本添加到画布，然后使用这些图像和文本创建一个组，然后删除单独添加的图像和文本。

我做错了什么？

【问题讨论】：

标签： html5-canvas fabricjs

【解决方案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);
    });
}

【讨论】：

【解决方案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; });
    });
  });

这是我在 kitchensink.js 中使用的 fabric.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);

          }); 
    }

这是我的按钮和显示计数的 div 的 HTML。

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

【讨论】：