fabric-texture

[**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 // ] // ] // ] ```