代码之家 › 专栏 › 技术社区 › Mohd. Monis

如何在不同层之间移动对象?

layer fabricjs html5-canvas javascript

0

Mohd. Monis · 技术社区 · 8 年前

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 回复 | 直到 8 年前

1

0

faniva 8 年前

尝试为出血形状使用覆盖图像,可能这符合您的需要。

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