本文详解 fabric.js 中 preserveobjectstacking: true 的核心作用，解决图像上传或对象选择时文本被遮挡的问题，并提供完整配置示例与最佳实践。
本文详解 fabric.js 中 preserveobjectstacking: true 的核心作用，解决图像上传或对象选择时文本被遮挡的问题，并提供完整配置示例与最佳实践。
在 Fabric.js 中，默认情况下，当用户点击（选中）某个对象时，Canvas 会自动将其“提升”至当前层级栈的顶部（即调用隐式 bringToFront），以增强交互反馈。这一行为虽对普通编辑友好，但在需要固定视觉层级关系的场景下（如：品牌水印文字必须永远覆盖所有图片、标题需恒定置顶、UI标注不可被遮挡），会导致已添加的文本对象在图像被选中后意外沉底，破坏设计预期。
根本原因在于：Fabric.js 的默认渲染逻辑会动态调整 activeObject 的 z-index 优先级，而 canvas.sendToFront() 或 canvas.bringToFront() 等手动方法仅在调用瞬间生效，无法对抗后续的选中触发重排。
✅ 正确解法：启用 preserveObjectStacking 选项
该配置项是 Fabric.js 提供的关键开关，用于禁用“选中即置顶”的默认行为，使对象的绘制顺序严格遵循其在 canvas._objects 数组中的插入顺序（即：后添加的对象自然在前，且不会因选中而改变相对层级）。
只需在初始化 Canvas 实例时传入该配置：
const canvas = new fabric.Canvas("spacebar-canvas", {
preserveObjectStacking: true // ? 核心配置：启用后，选中对象不再自动升层
});⚠️ 注意：此选项必须在 new fabric.Canvas() 时声明，运行时无法通过 canvas.set() 动态修改。
结合你的实际代码，需同步调整两处关键逻辑：
图像上传时，避免主动 sendToBack
当前代码中 canvas.sendToBack(img) 会将图片压至底层，但若后续又添加文本并 sendToFront(textObject)，则文本虽在顶层，一旦图片被选中，仍可能因未启用 preserveObjectStacking 而临时跃升——启用该选项后，应改为按业务顺序添加对象：先加图片（底层），再加文本（顶层），无需手动调序。文本更新逻辑优化（推荐）
当前 updateText() 每次都删除旧文本、新建文本并 sendToFront()。启用 preserveObjectStacking 后，更高效的做法是复用文本对象并更新属性，避免频繁增删导致的索引扰动：
let textObject = null;
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;
if (!textObject) {
// 首次创建，直接添加到画布末尾（即顶层）
textObject = new fabric.Text(text, {
left: canvas.width / 2,
top: canvas.height / 2,
fontSize: 18,
fontFamily,
fontWeight,
fontStyle: isItalic ? "italic" : "normal",
fill: textColor,
originX: "center",
originY: "center"
});
canvas.add(textObject);
} else {
// 复用：仅更新内容与样式，层级关系保持不变
textObject.set({
text,
fontFamily,
fontWeight,
fontStyle: isItalic ? "italic" : "normal",
fill: textColor
});
}
canvas.renderAll();
}? 补充说明：
- preserveObjectStacking: true 不影响 bringToFront() / sendToBack() 等 API 的显式调用，你仍可手动调整顺序（例如初始化时按需排序），但此后选中操作不再干扰该顺序；
- 若需“全局置顶”某类对象（如所有文本），可在添加后统一执行一次 canvas.bringToFront(textObject)，之后其位置即被锁定；
- 对于背景 SVG，建议使用 canvas.setBackgroundImage()（你已在用），它天然处于所有对象之下，与 preserveObjectStacking 无冲突。
总结：preserveObjectStacking: true 是 Fabric.js 中实现稳定、可预测层级管理的基石配置。启用它，配合合理的对象创建与更新策略，即可彻底解决“文本被选中图片遮挡”的问题，让设计意图精准落地。
