使 fabric.js 对象以特定的层顺序呈现答案

【问题标题】：Make fabric.js objects render in a specific layer order使 fabric.js 对象以特定的层顺序呈现
【发布时间】：2021-04-08 23:07:18
【问题描述】：

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

我希望我的画布具有三层 - 组件、轮廓和图案。我正在像这样将 fabric.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 个对象，并且用户可以随时更改任何层的图像。

我希望每当编辑任何图层时，图案图层中的图像都保持在底部，剪影图层中的图像保持在中间，而组件层的所有图像都保持在顶部。强>

我无法做到这一点，因此非常感谢任何可能的解决方法。

【问题讨论】：

标签： javascript reactjs image canvas fabricjs

【解决方案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/

【讨论】：