FabricJS

Question

当我 select 一组对象时，所有对象都会自动呈现在所有对象之上。这是一种烦人的行为，它使得 select 位于 selected 元素之上的其他元素变得困难。

有一个这样的例子 here。

function newRect(index) {
    return new fabric.Rect({
    width: 100,
    height: 100,
    top: index * 30,
    left: index * 30,
    fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
  });
}

var canvas = new fabric.Canvas('canvas');

var rect0 = newRect(0);
canvas.add(rect0);

var rect1 = newRect(1);
canvas.add(rect1);

var rect2 = newRect(2);
canvas.add(rect2);

var group = new fabric.Group([rect0, rect1]);

canvas.setActiveGroup(group).renderAll();

setTimeout(function() {
  canvas.discardActiveGroup().renderAll();
}, 5000);

当位于另一个元素后面的两个元素被 selected 时，它们将呈现在第三个元素之上。但是当它们被删除时selected，（等待 5 秒直到组被丢弃）它们被正确地呈现在顶部元素的后面。

有什么方法可以禁用这种行为吗？我希望 selected 元素在 selected 时保持 z 顺序，而不是在所有内容之上。

Answer 1

我想我找到了解决办法。

我需要在初始化 canvas 时添加 preserveObjectStacking: true 选项。

var canvas = new fabric.Canvas('canvas', {
  preserveObjectStacking: true,
});

https://jsfiddle.net/fbgu7697/3/

一切正常，但似乎有一个奇怪的错误。我会在 github.

打开它

更新

该问题已在 1.6.1 版本中修复。

https://jsfiddle.net/1vawp9gu/

FabricJS - 组选择在选择时将对象带到前面

FabricJS - Group selection brings objects to front while selected

javascript

canvas