我如何設法在各個層之間移動對象？

Question

我需要在各層之間移動對象，實際上我有一個主要的工作區域（例如正方形），在這個工作區域內，我有一個與外部類似的形狀（出血形狀），但尺寸較小，如下所示：

https://jsfiddle.net/p0hszz22/24/ [請參見圓形，方形，矩形]

//@ add main square
function addSquare() {
  clearThisCanvas();
  var square = new fabric.Rect({});
  canvas.add(square);
  addSquare1(); //call bleedline square
}

//@ add bleedline square
function addSquare1() {
  var square = new fabric.Rect({});
  canvas.add(square);
  centreOnCanvas(square);
}

所以我在畫布上有兩個對象，現在我的要求是，當我添加任何圖像並將該圖像（或任何對象）移動到工作區域內時，虛線（出血形狀）應始終位於圖像上方，以便顯示用戶暗示將忽略出血區域之外的圖像或任何東西（當前情況：根本沒有發生）

我嘗試過的

1. 我嘗試更改這兩種形狀的順序，當我選擇了主要形狀（外部形狀）時，出血形狀隱藏起來。

2. 我曾想過將這些形狀組合在一起，但仍然沒有成功。

我該如何實現？ 我需要做的就是盡快向用戶展示，只要任何東西越過出血線，就不會考慮。 我可以再次尋找的任何研究鏈接或關鍵字，任何建議或任何示例都將有所幫助。

謝謝

PS：對不起，實際上只是為了快速設置東西。

Answer 1

嘗試對出血形狀使用覆蓋圖像，也許適合您的需求。 該圖像將始終位於畫布內其他對象的頂部

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png',
     canvas.renderAll.bind(canvas), {
        opacity: 0.5,
        width : 400, // your width
        height : 400, // your height
        originX: 'center',
        originY: 'center'
});