使fabric.js对象按特定的层顺序进行渲染

Question

我正在使用fabric.js和react.js将某些图像添加到画布中。

我希望我的画布有三层——组件、轮廓和图案。我正在添加布料。Image((对象分别指向每个类别，如下所示-

组件(我希望这是顶层(-

const addComponent = () => {
comp.src = currentComp;
comp_ = new fabric.Image(comp);
canvas.add(comp_); 

剪影(我希望这是中间层(-

const addSilhouette = () => {
main.src = currentSilhouette;
main_ = new fabric.Image(main);
canvas.add(main_);

图案(我希望这是底层(-

const addPattern = () => {
patternImg.src = currentPatternComp;
patternImg_ = new fabric.Image(patternImg);
canvas.add(patternImg_);

问题是，顶层(组件层(上可以有n个可变的对象，用户可以随时更改任何层的图像。

我希望无论何时编辑任何层，图案层中的图像都保持在底部，剪影层中的一个图像保持在中间，组件层的所有图像保持在顶部

我还没能做到这一点，所以我们非常感谢任何可能的解决方案。

Answer 1

不要使用canvas.add，而是尝试使用canvas.insertAt，并为每个对象添加一个自定义数据字段来跟踪哪个"层"；它位于

const layers = {
BOTTOM: 0,
MIDDLE: 1,
TOP: 2
};
function addImage(url, layer) {
const objects = canvas.getObjects();
let targetIndex = objects.length;
for (let i = 0; i < objects.length; i++) {
if (layer < objects[i].customLayer) {
targetIndex = i;
break;
}
}
fabric.Image.fromURL(url, function (img) {
img.set({customLayer: layer})
canvas.insertAt(img, targetIndex);
});
}

这确保了添加的图像将被添加到它们各自的"图像"的顶部；层"；，但仍然位于这些层之上的所有其他层之后。如果你需要删除图像，你仍然可以像往常一样执行canvas.remove，这只是添加了一些不同的功能。

JSFiddle：https://jsfiddle.net/hs0o3nq6/