即使在上傳其他圖像之後，圖像始終保持在Fabric Js Canvas的頂部

Question

在Fabric JS中，我製作了一個畫布應用程序，允許其他用戶上傳自己的圖像並嘗試使用太陽眼鏡。

但問題是與太陽眼鏡圖像上傳的圖像重疊，因此太陽鏡圖像不可見。

有沒有什麼辦法讓太陽玻璃形象總在最前（有什麼樣ž - 在面料JS指數）

Answer 1

FabricJS具有疊加圖像特徵 - 它是引進的第4頁上的討論，並能在這裏找到：http://fabricjs.com/fabric-intro-part-4/。他們提供的代碼示例：

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); 
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas)); 

文檔鏈接： http://fabricjs.com/docs/fabric.Canvas.html#overlayImage

---

在我個人的經驗，我已經得到疊加圖像的工作正好有問題......我忘了什麼我的問題是真的。出於這個原因，我所做的是循環遍歷畫布上的對象，並根據需要手動設置堆疊順序。根據畫布的大小，當然可能會有性能問題。

---

另一種手工方法，這將是直接選擇該對象，然後使用帶來正面的方法來確保它的頂部。

要直接選擇一個對象，您可以使用此代碼（它確實需要一個JavaScript庫lodash，因此您需要將它加載到頁面中）。

/* Find first object in canvas that has a specific property value */ 
function findObjectWithPropertyValue(canvas, propertyName, propertyValue) { 
     var condition = {}; 
     condition[propertyName] = propertyValue; 
     return _(canvas.getObjects()).filter(condition).first() 
} 

調用此函數設置propertyName的與對象的屬性要針對本項目。名字可能是一個不錯的選擇。 propertyValue是您正在定位的propertyName的值。 Fabricjs畫布中該圖層元素的對象將被返回。

注：我傳遞到這個函數的畫布，因爲我在哪裏使用這個，我一次在頁面上有多個畫布。如果你只有一個畫布，你可以稍微修改一下這個畫布，以免把它傳遞給函數。

一旦你選擇了這個功能的對象，那麼你可以簡單地將它移動到前面。

canvas.bringToFront(myObject) 

要把它放到一個完整的例子，假設你的墨鏡疊加圖像對象具有的glasses_overlay一個名稱，您的代碼會是這個樣子：

var glassesOverlayObj = findObjectWithPropertyValue(canvas, 'name', 'glasses_overlay); 
canvas.bringToFront(glassesOverlayObj); 

後，只需運行該一個新的圖像已經上傳，並在您呈現畫布之前。用戶將永遠不會看到他們無序堆放。