fabric-texture/docs/api/index/classes/AbstractMode.md

This JavaScript library enables fast and efficient image distortion transformations using Canvas 2D.

[**fabric-texture**](../../README.md)

***

# Class: `abstract` AbstractMode

贴图变形交互模式的抽象基类

定义了贴图变形的交互模式接口，所有具体的交互模式都需要继承此类。
该类提供了以下核心功能：
1. 变形时的分割点计算策略
2. 变形后的渲染处理
3. 交互控件的管理

## Example

```typescript
// 创建一个自定义的交互模式
class CustomMode extends AbstractMode {
  // 设置模式名称
  name = 'custom-mode';

  // 自定义分割点计算策略
  execute(texture: Texture) {
    // 实现自定义的分割点计算逻辑
    return super.execute(texture);
  }

  // 自定义渲染逻辑
  render(fabricTexture: FabricTexture) {
    // 实现自定义的渲染逻辑
    const cleanup = super.render(fabricTexture);

    // 添加自定义的交互元素
    const customElement = new fabric.Rect({ ... });
    fabricTexture.canvas.add(customElement);

    // 返回清理函数
    return () => {
      cleanup?.();
      fabricTexture.canvas.remove(customElement);
    };
  }
}
```

## Constructors

### new AbstractMode()

> **new AbstractMode**(): [`AbstractMode`](AbstractMode.md)

#### Returns

[`AbstractMode`](AbstractMode.md)

## Properties

### name

> `abstract` **name**: `string`

交互模式的唯一标识名称 用于区分不同的交互模式

## Methods

### dirtyRender()

> **dirtyRender**(`fabricTexture`): `void` \| () => `void`

渲染结构性变化的交互元素

仅在贴图结构发生变化时执行（如添加/删除分割点），用于：
1. 渲染结构相关的交互控件（如控制点）
2. 更新复杂的交互逻辑
3. 优化渲染性能

#### Parameters

##### fabricTexture

[`FabricTexture`](FabricTexture.md)

FabricTexture 实例

#### Returns

`void` \| () => `void`

返回清理函数，用于清理本次渲染创建的所有元素

#### Example

```typescript
class CustomMode extends AbstractMode {
  dirtyRender(fabricTexture: FabricTexture) {
    // 创建控制点
    const controlPoints = createControlPoints();

    // 添加到画布
    fabricTexture.canvas.add(...controlPoints);

    // 返回清理函数
    return () => {
      fabricTexture.canvas.remove(...controlPoints);
    };
  }
}
```

#### Remarks

与 render 不同，此方法在仅是控制点位置更新的情况下不会触发

***

### execute()

> **execute**(`texture`): `Coord`[][][]

计算变形区域的分割点

在变形操作时计算区域内的分割点位置。
默认使用贴图对象自带的分割策略，你可以：
1. 使用默认策略
2. 继承后重写该方法实现自定义策略

#### Parameters

##### texture

[`Texture`](Texture.md)

贴图对象实例

#### Returns

`Coord`[][][]

返回计算后的分割点坐标数组

***

### render()

> **render**(`fabricTexture`): `void` \| () => `void`

渲染变形后的贴图和基础交互元素

在每次贴图变形后执行，你可通过该方法处理以下事项：
1. 将变形后的贴图添加到画布
2. 添加基础的交互控件
3. 返回清理函数用于资源回收

#### Parameters

##### fabricTexture

[`FabricTexture`](FabricTexture.md)

FabricTexture 实例

#### Returns

`void` \| () => `void`

返回清理函数，用于清理本次渲染创建的所有元素

#### Remarks

1. 每次变形都会重新创建贴图对象
2. 需要在每次渲染时清理上一次的元素
3. 建议使用清理函数统一管理资源释放

#### See

dirtyRender 处理结构性变化的渲染