Fabric.js - 與繪製多張圖片問題Z-索引

我使用這個腳本：Fabric.js - 與繪製多張圖片問題Z-索引

var canvas = new fabric.Canvas('game_canvas', { selection: false }); 

fabric.Image.fromURL('images/bg.jpg', function(img) { 
    img.set('left', 1024/2).set('top', 600/2).set('zindex', 0); 
    canvas.add(img);   
}); 

fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) { 
    img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1); 
    canvas.add(img);   
}); 

fabric.Image.fromURL('images/player-board.png', function(img) { 
    img.set('left', 254/2).set('top', (122/2)).set('zindex', 2); 
    canvas.add(img);   
}); 

fabric.Image.fromURL('images/player-board-top-red.png', function(img) { 
    img.set('left', 203/2).set('top', (109/2)).set('zindex', 3); 
    canvas.add(img).bringToFront(img);   
});

3圖像繪製工作正常，並顯示一個在另一個之上。但是如果我添加第四名，它會隱藏在第三名之後。如果我指定圖像的zindex，它仍然只在第三個。

這有什麼問題？我在這裏做錯了什麼？請幫忙。

感謝
彼得

來源

2011-08-04 peterkr

有幾個在這裏的問題。

1）您無法通過設置自己的zIndex屬性改變圖像的Z-索引。織物圖像根本沒有這樣的屬性，改變它不會改變畫布上圖像的z索引。這使得所有那些.set('zindex', 0)，.set('zindex', 1)等幾乎都是沒有操作的。

2）bringToFront按預期工作，將最後一張圖像帶到繪圖堆棧頂部。但問題是，您正在加載的「images/player-board-top-red.png」圖像最後是不能保證是最後添加的那個。這4個請求是異步的;他們以任何順序進入，所以回調也以任何順序執行。例如，在我的測試中，最後一張圖片排在第二位，回調執行，圖片被置於前面，但後來被2個回調「覆蓋」。

如何讓最後一張圖像呈現在上面？那麼，我們可以簡單地認爲所有圖像都試圖把最後一個頂端之前加載檢查：

var img4; // ... function checkAllLoaded() { if (canvas.getObjects().length === 4) { canvas.bringToFront(img4); } } // ... fabric.Image.fromURL('images/1.png', function(img) { img.set('left', 0).set('top', 0); canvas.add(img); checkAllLoaded(img); }); // load other images, making sure to include `checkAllLoaded` in callback fabric.Image.fromURL('images/4.png', function(img) { img4 = img.set('left', 0).set('top', 0); canvas.add(img); checkAllLoaded(img); });

順便說一句，不要忘記，你可以傳遞一個對象來set方法如下所示：

img.set({ left: ..., top: ... });

而且由於set是可鏈接並返回參考實例，你甚至可以把它傳遞給add像這樣：

canvas.add(img.set({ left: ..., top: ... }));

希望這會有所幫助。

來源

2011-08-07 06:14:01 kangax

是你的回答給了我在畫布上繪製圖像的基本。謝謝:)現在我已經預先加載所有的圖像之前呈現在畫布上。 – peterkr

沒有出路添加_kangax_評論，所以... 會在畫布上畫很多圖片，會出現什麼樣的異步問題，當繪製（'canvas.add（oImg）'）一個元素時我會'sum ++'我使用'fromUrl'加載圖片，_callback_實現[jsfiddle]（https://jsfiddle.net/Charles_/y6b2yrng/3/） – Charles

您可以使用canvas.insertAt(object,index);而不是canvas.add(object)來根據您的選擇設置對象的zIndex。

您也可以通過使用得到任何對象：

canvas_object = canvas.item(index);

如果你想要把面前這個對象，用途：

canvas_object.bringForward() 

//or 

canvas_object.bringToFront()

來源

2013-08-09 10:05:59

Fabric.js - 與繪製多張圖片問題Z-索引

回答

相關問題