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

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

所以我在 canvas 上有两个对象，现在我的要求是当我添加任何图像并将该图像（或任何对象）移动到工作区域内时，虚线（出血形状）应该始终处于打开状态在我的图像上方，以便它向用户显示图像或出血区域之外的任何内容将被忽略的提示（当前情况：根本没有发生）

我尝试过的：

我尝试更改这两个形状的顺序，当我这样做时，当我选择主要形状（外部形状）时，出血形状会自行隐藏。
我想把这些形状做成一组，但还是没有成功。

我怎样才能做到这一点？我所需要的只是在任何东西越过出血线时立即向用户展示，它不会被考虑。任何 link 研究或我可以再次寻找的关键字或任何建议或任何示例都会有所帮助。

谢谢

PS：抱歉 fiddle 中的代码实际上只是为了快速设置。

Answer 1

尝试为流血形状使用叠加图像，也许能满足您的需要。该图像将始终位于 canvas

内的其他对象之上

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

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

How can I manage to move object between various layers?

javascript

layer

html5-canvas

fabricjs