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);

});

尝试这个。