fabric.js将Image对象添加到组中

Question

我想/希望这是一个简单的问题：

是否可以将一个Image对象添加到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>

编辑：要回答第二个问题，这里要记住的主要事情是，在图像加载完成之前，您无法对图像对象执行任何操作。在我的原始答案中，回调函数仅在图像加载后执行，然后图像对象被添加到组/画布中。如果您希望稍后在代码中执行此操作，则需要手动检查图像加载是否完整，如下所示：

    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

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 target_pin = fabric.Image.fromURL('pics/pin_target.png', function (target_pin) {
    var img1 = target_pin.set({
                  top: top,
                  left: left,
                  hasControls: false,
                  selection: false,
                  hasRotatingPoint: false,
                 scaleX: 0.07,
                  scaleY: 0.07,
                 id: 'target_pin'
});
var stairInfo = new fabric.Group([rect, text, img1], {
  left: x,
  top: y,
  borderColor: 'yellow',
  id: 'stairInfo',
  hasControls: false,
  selection: false,
  hasRotatingPoint: false
});
 canvas.add(stairInfo);

});

试试这个。