如何在Fabric.js中移除之前添加的矩形对象？

嘿，我懂你的需求——现在每次点击都会新增一个矩形，但你想要每次点击时自动移除之前的所有旧矩形，只留下刚画的那个。刚好Fabric.js有两种很贴合它逻辑的实现方式，比原生canvas的clearRect()更灵活：

方法1：跟踪并移除上一个矩形（推荐） #

你可以维护一个变量来记录上一次创建的矩形，每次点击时先检查这个变量是否有值，如果有就把它从画布上移除，再创建新的矩形并更新这个变量。这种方法的好处是只删除需要清理的元素，不会影响画布上其他可能存在的元素（比如之后你要加个背景或者其他固定元素的话）：

// 用变量存上一次的矩形，初始为空
let lastDrawnRect = null;

canvas.on({
  'mouse:down': function(options) {
    // 如果有旧矩形，先从画布移除它
    if (lastDrawnRect) {
      canvas.remove(lastDrawnRect);
    }
    // 创建新的红色矩形
    const newRect = new fabric.Rect({
      left: options.e.clientX,
      top: options.e.clientY,
      fill: 'red',
      width: 20,
      height: 20
    });
    // 添加到画布
    canvas.add(newRect);
    // 更新变量，把新矩形存起来
    lastDrawnRect = newRect;
    // 手动渲染一下（如果你的画布没开自动渲染的话）
    canvas.renderAll();
  }
});

方法2：直接清空画布后添加新矩形 #

如果你确定画布上永远只会有这一个矩形，不需要保留其他任何元素，那直接清空整个画布再添加新矩形就好，效果和原生的clearRect()类似：

canvas.on({
  'mouse:down': function(options) {
    // 清空画布上所有元素
    canvas.clear();
    // 创建并添加新矩形
    canvas.add(new fabric.Rect({
      left: options.e.clientX,
      top: options.e.clientY,
      fill: 'red',
      width: 20,
      height: 20
    }));
    // 确保画布更新
    canvas.renderAll();
  }
});

小提醒：Fabric.js默认在添加/移除元素后会自动渲染画布，但如果你的项目里有特殊配置（比如修改了renderOnAddRemove），手动调用canvas.renderAll()能保证界面及时更新。

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