fabric-texture/docs/api/modes/classes/Skew.md

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

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

***

# Class: Skew

倾斜变形模式类

提供图像的倾斜变形功能，通过四个边的拖拽控制点实现自由倾斜效果。

主要特性：
- 四边独立控制：每条边都有独立的拖拽控制点
- 智能吸附：拖拽时自动吸附到合适的倾斜角度
- 实时预览：拖拽过程中实时显示变形效果
- 防止变形过度：内置边界检查机制

交互方式：
- 拖拽边缘控制点：调整单边倾斜角度
- 空白处拖拽：快速调整整体大小
- 支持撤销/重做

## Example

```typescript
// 1. 基础用法
const canvas = new fabric.Canvas('canvas');
const fabricTexture = new FabricTexture(canvas);

// 创建倾斜模式并应用到图像
const skew = new Skew('#FF0000');  // 使用红色主题
fabricTexture.enterEditing(image, null, skew);

// 2. 自定义拖拽图标样式
const skew = new Skew()
  .setStyleSetters({
    dragIcon: (icon) => {
      icon.set({ opacity: 0.8 });
      return icon;
    }
  });

// 3. 隐藏原始对象（可选）
image.set({ visible: false });
canvas.renderAll();
```

## Remarks

原始对象默认保持可见，需要手动隐藏

## See

- BaseMode 变形模式基类
- [FabricTexture](../../index/classes/FabricTexture.md) 主要功能类

## Extends

- `BaseMode`\<\{ `dragIcon`: (`object`) => `fabric.Object`; \}\>

## Constructors

### new Skew()

> **new Skew**(`themeColor`, `subThemeColor`, `options`): [`Skew`](Skew.md)

构造函数

创建一个倾斜变形模式实例。

#### Parameters

##### themeColor

`string` = `THEME_COLOR`

主题色，用于控制点的背景色，默认为 THEME_COLOR

##### subThemeColor

`string` = `SUB_THEME_COLOR`

副主题色，用于辅助元素的颜色，默认为 SUB_THEME_COLOR

##### options

`SkewOptions` = `{}`

#### Returns

[`Skew`](Skew.md)

#### Overrides

`BaseMode<{ /** * 可配置拖动图标样式的方法 * @param object - 默认的拖动图标对象 * @returns 作为拖动图标对象的fabric元素对象，可使用默认对象以外的新对象 */ dragIcon: (object: fabric.Group) => fabric.Object; }>.constructor`

## Properties

### name

> **name**: `string` = `'Skew'`

变形模式的唯一标识名称

#### Overrides

`BaseMode.name`

***

### options

> **options**: `Required`\<`SkewOptions`\>

模式配置

***

### subThemeColor

> **subThemeColor**: `string` = `SUB_THEME_COLOR`

副主题色

决定交互控件交互时的变化色，应与主题色形成合适的搭配

#### Default

```ts
SUB_THEME_COLOR ('#324346')
```

#### See

SUB_THEME_COLOR 默认副主题色常量

#### Inherited from

`BaseMode.subThemeColor`

***

### themeColor

> **themeColor**: `string` = `THEME_COLOR`

主题色

决定交互控件的颜色

#### Default

```ts
THEME_COLOR ('#44A08D')
```

#### See

THEME_COLOR 默认主题色常量

#### Inherited from

`BaseMode.themeColor`

## Accessors

### controlObjects

#### Get Signature

> **get** **controlObjects**(): `Object`[]

获取所有控制点对象

返回当前倾斜变形模式中的所有控制点对象。用于：
- 批量修改控制点样式
- 控制点的显示/隐藏
- 获取控制点位置信息

##### Returns

`Object`[]

所有控制点对象的数组

## Methods

### dirtyRender()

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

渲染倾斜变形的交互界面

在画布上创建并管理倾斜变形的交互控制界面。主要功能：

1. 控制点管理
- 为每条边创建双向箭头控制点
- 自动计算控制点位置和角度
- 保持控制点始终在最上层

2. 交互功能
- 拖拽边缘控制点：调整单边倾斜角度
- 空白处拖拽：快速调整整体大小
- 智能吸附：自动对齐到水平或垂直位置

3. 数据同步
- 实时更新贴图顶点坐标
- 自动记录可撤销的操作历史
- 防止无效的变形操作

#### Parameters

##### fabricTexture

[`FabricTexture`](../../index/classes/FabricTexture.md)

FabricTexture 实例

#### Returns

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

返回清理函数，用于移除所有控制点和事件监听器

#### Example

```typescript
// 进入倾斜编辑模式
const cleanup = skew.dirtyRender(fabricTexture);

// 退出编辑模式时清理
cleanup();
```

#### Remarks

1. 控制点样式可通过 setStyleSetters 自定义
2. 拖拽区域小于 50x50 像素时不会触发变形
3. 变形操作会自动记录到历史栈中

#### Overrides

`BaseMode.dirtyRender`

***

### execute()

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

执行倾斜变形计算

代理方法，调用静态方法 [Skew.execute](Skew.md#execute-2) 进行实际的倾斜变形计算。

#### Parameters

##### texture

[`Texture`](../../index/classes/Texture.md)

需要进行倾斜变形的贴图对象

#### Returns

`Coord`[][][]

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

#### See

[Skew.execute](Skew.md#execute-2) 具体实现细节

#### Overrides

`BaseMode.execute`

***

### render()

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

渲染变形效果到画布

将变形后的贴图和网格边界线渲染到 Fabric.js 画布上。

#### Parameters

##### fabricTexture

[`FabricTexture`](../../index/classes/FabricTexture.md)

Fabric 变形工具实例，包含画布和变形状态

#### Returns

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

清理函数，用于移除渲染的元素

#### Example

```typescript
class CustomMode extends BaseMode {
  render(fabricTexture: FabricTexture) {
    // 调用基类渲染方法
    const cleanup = super.render(fabricTexture);

    // 添加自定义渲染逻辑
    const customElements = this.renderCustomElements();

    // 返回组合的清理函数
    return () => {
      cleanup();
      this.cleanupCustomElements(customElements);
    };
  }
}
```

#### Remarks

1. 返回的清理函数会在下次渲染前或离开编辑模式时自动调用
2. 子类可以通过 super.render() 复用基类的渲染逻辑
3. 渲染的元素样式可通过 setStyleSetters 配置

#### Inherited from

`BaseMode.render`

***

### setStyleSetters()

> **setStyleSetters**(`styleSetters`): [`Skew`](Skew.md)

配置变形模式中各元素的样式

通过样式设置器自定义变形模式中各种元素的外观，支持：
- 变形后的贴图样式
- 网格边界线样式
- 通过泛型扩展的自定义元素样式

#### Parameters

##### styleSetters

`Partial`\<`BaseStyleSetters`\<`Record`\<`string`, (...`rgs`) => `Object`\>\>\>

样式设置器配置对象

#### Returns

[`Skew`](Skew.md)

当前实例，支持链式调用

#### Example

```typescript
mode.setStyleSetters({
  texture: (image) => {
    image.set({ opacity: 0.8 });
  }
});
```

#### Remarks

1. 新的样式设置会与现有设置合并，而不是完全替换
2. 对于同名设置器，新的会覆盖旧的
3. 样式会在下一次渲染时生效

#### Inherited from

`BaseMode.setStyleSetters`

***

### createDragIcon()

> `static` **createDragIcon**(`themeColor`): `Group`

创建拖拽控制图标

创建一个双向箭头的拖拽控制图标，用于调整倾斜角度。图标包含：
- 圆角矩形背景
- 双向箭头图标
- 自适应旋转

样式特点：
- 背景：46x18 像素，圆角 10px
- 箭头：白色填充
- 边框：2px 白色描边
- 缩放：整体缩放到 0.8 倍
- 定位：居中对齐

#### Parameters

##### themeColor

`string`

控制图标的背景颜色

#### Returns

`Group`

返回组合的 Fabric 对象

#### Example

```typescript
// 创建一个红色背景的控制图标
const icon = Skew.createDragIcon('#FF0000');
canvas.add(icon);
```

***

### execute()

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

执行倾斜变形的网格分割算法

根据贴图的网格线计算所有交点坐标，生成变形后的网格点阵。

算法步骤：
1. 遍历网格的行和列
2. 计算每个网格单元的垂直和水平线段
3. 计算所有线段的交点坐标
4. 生成最终的分割点数组

#### Parameters

##### texture

[`Texture`](../../index/classes/Texture.md)

需要进行倾斜变形的贴图对象

#### Returns

`Coord`[][][]

返回三维数组，表示网格的分割点坐标：
- 第一维：行索引
- 第二维：列索引
- 第三维：点的坐标 {x, y}

#### Example

```typescript
const points = Skew.execute(texture);
// points[0][0][0] 表示左上角第一个分割点的坐标
```