我如何设法在各个层之间移动对象？

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