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

});

嘗試這個。