# fabric-with-erasing 库的 erasable 属性功能使用指南

## 库功能概述

`fabric-with-erasing` 库提供了强大的基于属性的擦除控制功能，无需手动实现复杂的图层检查逻辑。

## 核心功能

### 1. erasable 属性的三种模式

- **`true`** (默认): 对象可以被擦除
- **`false`**: 对象不能被擦除  
- **`'deep'`**: 对于组合对象，可以对内部可擦除的子对象进行细粒度控制

### 2. 选择性擦除机制

库内置了选择性擦除机制：
- 橡皮擦会自动检测对象的 `erasable` 属性
- 只有 `erasable !== false` 的对象才会被擦除
- 支持复杂的嵌套对象结构

### 3. 反向擦除功能

- 设置 `brush.inverted = true` 可以实现"撤销擦除"效果
- 恢复已被擦除的内容

## 项目中的优化实现

### LayerManager 优化

```javascript
// 基于图层状态自动设置 erasable 属性
obj.erasable = isInActiveLayer && layer.visible && !layer.locked && !layer.isBackground;
```

**优势：**
- 只有活动图层、可见、非锁定、非背景的对象才可擦除
- 自动处理复杂的权限逻辑
- 性能优秀，无需手动遍历检查

### BrushManager 简化

```javascript
// 直接使用库的 EraserBrush
this.brush = new fabric.EraserBrush(this.canvas);
this.brush.inverted = this.options.inverted || false;
```

**优势：**
- 移除了复杂的手动图层检查逻辑
- 直接利用库的内置功能
- 支持反向擦除（恢复功能）
- 代码更简洁、更可靠

## 使用示例

### 基础用法

```javascript
// 设置对象不可擦除
fabricObject.erasable = false;

// 设置对象可擦除
fabricObject.erasable = true;

// 组合对象的深度擦除控制
group.erasable = 'deep';
```

### 高级用法

```javascript
// 启用反向擦除模式
eraserBrush.inverted = true;

// 监听擦除事件
canvas.on('erasing:start', () => {
  console.log('开始擦除');
});

canvas.on('erasing:end', (e) => {
  console.log('擦除完成', e.targets);
});
```

## 性能优势

1. **内置优化**: 库已经进行了性能优化，避免重复计算
2. **事件驱动**: 基于事件的架构，响应更快
3. **选择性渲染**: 只重新渲染需要更新的部分
4. **内存效率**: 合理的对象管理和清理机制

## 兼容性说明

- 完全兼容标准的 fabric.js API
- 新增的 `erasable` 属性不会影响现有功能
- 可以逐步迁移现有代码

## 建议

1. **简化现有实现**: 移除手动的图层检查逻辑，直接使用 `erasable` 属性
2. **利用内置事件**: 使用库提供的擦除事件进行状态管理
3. **测试反向擦除**: 尝试使用 `inverted` 属性实现撤销功能
4. **性能测试**: 在大量对象的场景下测试性能表现

通过这些优化，你的项目可以获得更好的性能和更简洁的代码结构。