Could Undo Redo with Erasing? about fabric-history

[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();
}