[**fabric-texture**](../../README.md) *** # Class: Warp 扭曲变形模式类 提供图像的扭曲变形功能，通过以下方式实现自由扭曲效果： 核心功能： - 顶点控制：四个角点可自由拖拽 - 曲线控制：边缘曲线可通过中间控制点调整 - 网格分割：支持在任意位置添加新的控制点 - 实时预览：所有操作都能即时查看效果 - 样式定制：支持自定义控件元素样式 交互方式： 1. 顶点拖拽：移动四个角点改变整体形状 2. 曲线调整：选中顶点后显示曲线控制点，拖拽改变曲线形状 3. 网格分割： - 点击图像内部显示分割点 - 点击分割点在该位置添加新控制点 - 选中控制点按Delete键删除 4. 整体移动：拖拽分割点可整体移动图像 ## Example ```typescript // 1. 基础用法 const canvas = new fabric.Canvas('canvas'); const fabricTexture = new FabricTexture(canvas); // 创建扭曲模式并应用到图像 const warp = new Warp('#FF0000'); // 使用红色主题 fabricTexture.enterEditing(image, null, warp); // 2. 自定义拖拽图标样式 const warp = new Warp() .setStyleSetters({ control: (point) => { point.set({ radius: 10 }); return point; }, }); // 3. 隐藏原始对象（可选） image.set({ visible: false }); canvas.renderAll(); ``` ## Remarks 原始对象默认保持可见，需要手动隐藏 ## See - BaseMode 变形模式基类 - [FabricTexture](../../index/classes/FabricTexture.md) 主要功能类 ## Extends - `BaseMode`\<\{ `control`: (`object`) => `fabric.Object`; `curveControl`: (`object`) => `fabric.Object`; `insertControl`: (`object`) => `fabric.Object`; `line`: (`line`) => `void`; \}\> ## Constructors ### new Warp() > **new Warp**(`themeColor`, `subThemeColor`, `options`): [`Warp`](Warp.md) 创建扭曲变形模式实例 初始化一个新的扭曲变形模式，设置主题色和交互色。 #### Parameters ##### themeColor `string` = `THEME_COLOR` 主题色，用于控制点的默认颜色，默认为 THEME_COLOR ##### subThemeColor `string` = `SUB_THEME_COLOR` 交互色，用于控制点被选中时的颜色，默认为 SUB_THEME_COLOR ##### options `WarpOptions` = `{}` #### Returns [`Warp`](Warp.md) #### Overrides `BaseMode<{ /** * 可配置顶点控制点的方法 * @param object - 默认的控制点对象 * @returns 作为顶点控制点对象的fabric元素对象，可使用默认对象以外的新对象 */ control: (object: fabric.Object) => fabric.Object; /** * 可配置扭曲控制点的方法 * @param object - 默认的控制点对象 * @returns 作为扭曲控制点对象的fabric元素对象，可使用默认对象以外的新对象 */ curveControl: (object: fabric.Object) => fabric.Object; /** * 可配置插入控制点的方法 * @param object - 默认的控制点对象 * @returns 作为插入控制点对象的fabric元素对象，可使用默认对象以外的新对象 */ insertControl: (object: fabric.Object) => fabric.Object; /** * 可配置顶点控制点与扭曲控制点之间连线样式的方法 * @param line - 连线对象 */ line: (line: fabric.Line) => void; }>.constructor` ## Properties ### name > **name**: `string` = `'Warp'` 变形模式的唯一标识名称 #### Overrides `BaseMode.name` *** ### options > **options**: `Required`\<`WarpOptions`\> 模式配置 *** ### 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`[] 顶点控制点对象数组 *** ### insertControlObject #### Get Signature > **get** **insertControlObject**(): `null` \| `Object` 获取当前激活的插入控制点 返回当前正在交互的插入点对象。 当用户点击贴图内部时会创建此控制点， 用户可以通过点击它来在该位置添加新的分割点。 ##### Returns `null` \| `Object` 插入控制点对象，如果不存在则返回 null *** ### lineObjects #### Get Signature > **get** **lineObjects**(): `Line`[] 获取所有控制点连接线 返回所有连接主控制点和曲线控制点的线段对象列表。 这些线段用于可视化控制点之间的关系。 ##### Returns `Line`[] 连接线对象数组 *** ### subControlObjects #### Get Signature > **get** **subControlObjects**(): `Object`[] 获取所有曲线控制点 返回所有用于调整曲线形状的次要控制点对象列表。 这些控制点位于边缘曲线的中间位置，用于调整曲线的弯曲程度。 ##### Returns `Object`[] 曲线控制点对象数组 ## Methods ### dirtyRender() > **dirtyRender**(`fabricTexture`): `undefined` \| () => `void` 渲染变形控制界面 在画布上创建和管理所有交互控制元素，包括： 1. 控制点系统 - 主控制点：用于控制顶点位置 - 曲线控制点：用于调整曲线形状 - 连接线：显示控制点之间的关系 2. 交互行为 - 拖拽控制点：调整形状 - 选中/取消选中：显示/隐藏相关控制点 - 点击内部：添加新的分割点 - 按Delete键：删除选中的控制点 3. 视觉反馈 - 控制点层级：主控制点 > 曲线控制点 > 连接线 - 选中状态：使用副主题色标识 - 实时预览：所有操作即时生效 #### Parameters ##### fabricTexture [`FabricTexture`](../../index/classes/FabricTexture.md) FabricTexture 实例对象 #### Returns `undefined` \| () => `void` 清理函数，用于移除所有控制元素和事件监听 #### Example ```typescript // 进入编辑模式时会自动调用 const cleanup = warp.dirtyRender(fabricTexture); // 退出编辑模式时清理 cleanup(); ``` #### Overrides `BaseMode.dirtyRender` *** ### execute() > **execute**(`texture`): `Coord`[][][] 执行扭曲变形计算 代理方法，调用静态方法 [Warp.execute](Warp.md#execute-2) 进行实际的扭曲变形计算。 #### Parameters ##### texture [`Texture`](../../index/classes/Texture.md) 需要进行扭曲变形的贴图对象 #### Returns `Coord`[][][] 返回计算后的网格分割点坐标数组 #### See [Warp.execute](Warp.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`): [`Warp`](Warp.md) 配置变形模式中各元素的样式 通过样式设置器自定义变形模式中各种元素的外观，支持： - 变形后的贴图样式 - 网格边界线样式 - 通过泛型扩展的自定义元素样式 #### Parameters ##### styleSetters `Partial`\<`BaseStyleSetters`\<`Record`\<`string`, (...`rgs`) => `Object`\>\>\> 样式设置器配置对象 #### Returns [`Warp`](Warp.md) 当前实例，支持链式调用 #### Example ```typescript mode.setStyleSetters({ texture: (image) => { image.set({ opacity: 0.8 }); } }); ``` #### Remarks 1. 新的样式设置会与现有设置合并，而不是完全替换 2. 对于同名设置器，新的会覆盖旧的 3. 样式会在下一次渲染时生效 #### Inherited from `BaseMode.setStyleSetters` *** ### createDefaultControl() > `static` **createDefaultControl**(`themeColor`): `Circle` 创建顶点控制点 创建用于拖拽变形的主要控制点，显示在贴图的四个角和边缘分割点位置。 控制点样式： - 形状：圆形 - 大小：7px 半径 - 颜色：主题色填充，白色描边 - 交互：可拖拽，无控制框和边框 #### Parameters ##### themeColor `string` 控制点的填充颜色 #### Returns `Circle` 返回 Fabric.js 圆形对象 #### Example ```typescript const control = Warp.createDefaultControl('#FF0000'); canvas.add(control); ``` *** ### createDefaultCurveControl() > `static` **createDefaultCurveControl**(): `Rect` 创建曲线控制点 创建用于调整曲线形状的次要控制点，显示在边缘曲线的中间位置。 控制点样式： - 形状：圆角矩形 - 大小：6x6 像素 - 颜色：白色填充，灰色描边 - 特性：默认隐藏，选中主控制点时显示 - 交互：可拖拽，无控制框和边框 #### Returns `Rect` 返回 Fabric.js 矩形对象 #### Example ```typescript const curveControl = Warp.createDefaultCurveControl(); canvas.add(curveControl); ``` *** ### createDefaultInsertControl() > `static` **createDefaultInsertControl**(`themeColor`): `Circle` 创建插入点控制点 创建用于标识可插入新控制点位置的指示器，点击后在该位置添加新的分割点。 控制点样式： - 形状：圆形 - 大小：5px 半径 - 颜色：半透明白色填充，主题色描边 - 特性：不可选中，仅用于视觉提示 - 交互：无法直接拖拽 #### Parameters ##### themeColor `string` 控制点的描边颜色 #### Returns `Circle` 返回 Fabric.js 圆形对象 #### Example ```typescript const insertPoint = Warp.createDefaultInsertControl('#FF0000'); canvas.add(insertPoint); ``` *** ### execute() > `static` **execute**(`texture`): `Coord`[][][] 计算贴图的分割点坐标 根据贴图的网格曲线计算分割点的位置坐标。该方法会： 1. 遍历所有网格单元 2. 计算横向和纵向曲线的交点 3. 生成用于变形的控制点网格 #### Parameters ##### texture [`Texture`](../../index/classes/Texture.md) 需要计算分割点的贴图对象 #### Returns `Coord`[][][] 返回三维数组： - 第一维：行索引 - 第二维：列索引 - 第三维：分割点坐标 {x, y} #### Example ```typescript const splitPoints = Warp.execute(texture); // splitPoints 结构示例： // [ // [ // 第一行 // [ // 第一列 // {x: 10, y: 20}, // 分割点1 // {x: 30, y: 40} // 分割点2 // ] // ] // ] ```