使 fabric.js 个对象以特定的图层顺序渲染

Question

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

我希望我的 canvas 具有三层 - 组件、剪影和图案。我像这样分别向每个类别添加 fabric.Image() 对象 -

Components（我希望这是顶层）-

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

canvas.add(comp_);

Silhouettes（我要这个做中间层）-

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

canvas.add(main_);

Patterns（我要这个做底层）-

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/

使 fabric.js 个对象以特定的图层顺序渲染

Make fabric.js objects render in a specific layer order

javascript

reactjs

image

canvas

fabricjs