Fabric.js循环移除textbox对象不全问题及解决方案咨询

你猜的没错！正向循环删除数组元素时，确实会因为数组长度动态变化导致索引偏移——比如删除第i个元素后，后面的元素都会往前挪一位，下一次循环的i++就会跳过原本的第i+1个元素，自然删不干净。

给你两种靠谱的解决办法：

方法1：倒序遍历数组 #

从最后一个元素开始往前遍历，这样删除前面的元素不会影响后续要遍历的元素索引，完美避开偏移问题：

const texBoxItems = canvas.getObjects();
// 从数组末尾开始倒序循环
for (let i = texBoxItems.length - 1; i >= 0; i--) {
  const item = texBoxItems[i];
  if (item.get('type') === "textbox") {
    // 不管是否激活，直接移除就行，不需要额外设置activeObject
    canvas.remove(item);
  }
}
// 记得更新画布
canvas.renderAll();

小贴士：其实不需要判断active状态，canvas.remove()可以直接移除任何对象，不管它是不是当前激活的~

方法2：先过滤再批量删除 #

更简洁的方式是先把所有要删除的textbox筛选出来，再一次性批量移除，代码更清晰，性能也更好：

// 过滤出所有类型为textbox的对象
const textboxesToRemove = canvas.getObjects().filter(item => item.get('type') === "textbox");
// 批量移除
textboxesToRemove.forEach(item => canvas.remove(item));
// 更新画布
canvas.renderAll();

这种方式完全避开了循环索引的问题，逻辑更直观，推荐优先使用。

内容的提问来源于stack exchange，提问作者Pratyush Pranjal