Could Undo Redo with Erasing?

[LLLoneMa]

First of all. Programimg with undo and redo is an amazing experience. 🥳🥳

Recently I encountered the function of restoring the content removed by the eraser in development. Using the undo test will remove Objects. How can I restore the content removed by the eraser?

Fabric 5.2 custom build with Erasing. Fabric-history 1.6

[hobbada]

Thanks for great package. Same issue here haha

[omatheusant]

i have the same issue, it will be nice to apply undo and redo in de eraser

[kabudaLiu]

//undo可以撤销橡皮擦的步骤。但是它会附带删除一个画笔步骤所以需要在每一次使用橡皮擦过后 //去创建一个极小的看不见的画笔步骤。 //并且需要确定橡皮擦的线条有没有和已有的画笔进行了交互。否则不创建线条

npm i fabric-history import 'fabric-history'; canvas.value.undo();

//使用橡皮擦时去监听一个路径完成创建的事件 canvas.value.on('path:created', intersects) // 离开橡皮擦时取消事件监听器 canvas.value.off('path:created', intersects); // 创建线条后的交互查询 const intersects=(e)=> { // 获取当前画布上的所有元素 const objects = canvas.value.getObjects();

// 循环遍历画布上的每个对象执行交叉检测 //一次擦除可能跨越多条路径，有一条相交叫返回true const result= objects.some(object => { // 执行交叉检测 const isIntersecting = object.intersectsWithObject(e.path); //object.id !=='simulate'排除自己创建的元素 return isIntersecting && object.id !=='simulate' console.log(元素 ${object} 与捕获到的路径存在交叉);

}); if(result) addSimulatePoint()

}

// 创建一条红色线条 const addSimulatePoint=()=> { var point = new fabric.Circle({ left: 0, top: 0, radius: 1, fill: 'red', selectable: false, // 禁止选择 evented: false, // 禁止触发事件 visible:false }); // 设置唯一标识符避免橡皮擦划到去创建新的元素 point.set('id', 'simulate'); // 将红色线条添加到画布中 canvas.value.add(point); // canvas.value.renderAll(); }