Fabric.js画布中如何让文本始终处于顶层不受图片操作影响

我使用Fabric.js开发一个包含文本和图片的画布项目，需求是文本始终处于顶层，即使上传图片后也不能被遮挡。目前已实现图片上传和文本添加功能，但上传图片时图片会覆盖文本，不符合预期。我尝试过以下层级管理方法，均未解决问题：

canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)

问题出在仅将上传的图片发送至底层，但未确保已有文本对象始终保持在顶层。Fabric.js的图层顺序由对象添加顺序决定，后添加的对象默认在顶层。因此，每次上传图片后，需要主动将文本对象重新置顶，确保其不会被遮挡。

具体修改点：

• 在图片上传完成并添加到画布后，除了将图片发送至底层，还要找到所有文本对象并将它们带到顶层
• 保留文本更新时的置顶逻辑，确保新添加的文本始终在最上层

1. 图片上传函数修改 #

function handleImageUpload(e) {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function (event) {
      const imageUrl = event.target.result;
      fabric.Image.fromURL(imageUrl, function (img) {
        img.scaleToWidth(40); // 调整图片宽度
        img.set({ left: 100, top: 10 }); // 设置初始位置
        canvas.add(img);
        canvas.sendToBack(img); // 将图片发送至底层
        // 找到所有文本对象并置顶
        const textObjects = canvas.getObjects().filter(obj => obj.type === 'text');
        textObjects.forEach(textObj => canvas.bringToFront(textObj));
        canvas.renderAll();
      });
    };
    reader.readAsDataURL(file);
  }
}

2. 文本更新函数优化（保留原有逻辑并确认置顶） #

function updateText() {
  const text = document.getElementById("text-input").value;
  const fontFamily = document.getElementById("font-family").value;
  const fontWeight = document.getElementById("font-weight").value;
  const isItalic = document.getElementById("italic").checked;
  const textColor = document.getElementById("text-color").value;

  // 移除已有文本对象
  canvas.forEachObject(function (obj) {
    if (obj.type === "text") {
      canvas.remove(obj);
    }
  });

  if (text) {
    const textObject = new fabric.Text(text, {
      left: canvas.width / 2,
      top: canvas.height / 2,
      fontSize: 18,
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontStyle: isItalic ? "italic" : "normal",
      fill: textColor,
      originX: "center",
      originY: "center",
    });

    canvas.add(textObject);
    canvas.bringToFront(textObject); // 确保新文本置顶
    canvas.renderAll();
  }
}

• 若需要支持多个文本对象，上述代码也能兼容，因为会筛选所有type === 'text'的对象并置顶
• Fabric.js的bringToFront()会将对象移至画布对象数组的末尾，也就是视觉上的最顶层；sendToBack()则移至数组开头，即最底层

内容的提问来源于stack exchange，提问作者Murtadha Alaali