FabricJS-组选择使对象在选择时处于最前面

FabricJS - Group selection brings objects to front while selected

本文关键字：选择 于最 前面 对象 FabricJS-      更新时间：2023-09-26

当我选择一组对象时，所有对象都会自动呈现在所有对象之上。这是一种令人讨厌的行为，很难选择位于所选元素顶部的其他元素。

这里有一个这样的例子。

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

当选择位于另一个元素后面的两个元素时，它们将渲染在第三个元素的顶部。但是，当取消选择它们时（等待5秒，直到组被丢弃），它们会正确地呈现在顶部元素的后面。

有没有办法禁止这种行为？我希望选定的元素在选定时保持z顺序，而不是在所有元素之上。

我想我已经找到了解决方案。

在初始化画布时，我需要放置addpreserveObjectStacking: true选项。

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

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

它像我预期的那样工作，但它似乎有一个奇怪的错误。我会在github上打开它。

更新

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

https://jsfiddle.net/1vawp9gu/

相关文章：