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

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

我尝试过：

我试图改变这两个形状的顺序，当我选择了主要形状（外部形状）时，出血形状隐藏起来。
我想把这些形状组成一个团队但又没有成功。

我怎样才能做到这一点？我需要的是尽快显示用户穿过出血线，它将不会被考虑。我可以再次查找的任何学习或关键字链接或任何建议或任何示例都会有所帮助。

由于

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

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

1 个答案: