fabric.js中圖像對象的問題

Question

我是fabric.js的新手。 我需要從畫布中的URL加載多個圖像，並將它們添加為圖像對象，以便設置其z索引。

我嘗試使用Image.fromURL但它沒有返回對象，因此無法設置其z索引。 新的fabric.Image從頁面獲取圖像，因此無法從中獲取結果。

這是我到目前為止所做的

var canvas = new fabric.Canvas('myCanvas');
var front_wall = fabric.Image.fromURL('img/bedroom1-front/front_wall.png', 
    function(img) {
        img.scale(0.65);
        canvas.add(img);
    }
);

我以相同的方式添加了五個圖像。

fabric.Image.fromURL可以返回圖像對象（通過使用任何屬性）嗎？

因此，我可以在加載后更改其z-index。

抱歉，我沒有jsfiddle可以顯示。

Answer 1

歡迎使用Stack Overflow，

請檢查這個小提琴

我在小提琴中添加了一些評論。 代碼如下：

var srcImg = "http://fabricjs.com/lib/pug.jpg";
var canvas = new fabric.Canvas('c');
var icon = null;
var image = fabric.Image.fromURL(srcImg, function(oImg) {
                    oImg.set({width: oImg.width / 3,
                              height: oImg.height / 3,
                              left: 100,
                              top: 100,
                              originX: 'center',
                              originY: 'center',
                              selectable: false,
                              transparentCorners: false});

          //magic strats here to make active Image and you can control image object here
                    canvas.setActiveObject(oImg);
                    icon = canvas.getActiveObject();
                    icon.hasBorders = false;
                    icon.hasControls = false;                   
                    canvas.add(oImg);
                });

//if you want to control outside somewhere you can do this:
setTimeout(function(){
    icon.set({'top': 200, 'left': 200});
  canvas.renderAll();
}, 1500);