fabric-warpvas

[**fabric-warpvas**](../../README.md) *** # Class: Perspective 透视变形模式提供图像的透视变形功能，通过四个对角控制点实现自由透视效果。交互说明： 1. 拖动控制点实现透视的变换（PS：形成三角形后无法进一步透视变换） 2. 空白区域持续拖拽形成整体变形（当 enableDragResize 为 true 时生效） 3. 按住设置按键限制控制点拖动只向水平或垂直方向移动（当 enableConstraintKey 设置为具体按键时生效） ## Example ```typescript import { fabric } from 'fabric'; import { FabricWarpvas } from 'fabric-warpvas'; import Perspective from 'fabric-warpvas/modes/perspective'; // 创建 fabricWarpvas 实例 const canvas = new fabric.Canvas('canvas'); const fabricWarpvas = new FabricWarpvas(canvas); // 创建透视模式 const perspective = new Perspective({ themeColor: '#FF0000' }); // 交互元素使用红色主题色 // 自定义模式中的控制点样式 perspective.registerStyleSetter('control', (control) => { control.set({ radius: 10, fill: 'blue', stroke: 'white' }); return control; }); // 进入变形态 fabricWarpvas.enterEditing(image, null, perspective); ``` ## Remarks 使用注意：四个对角控制点形成三角形后无法进一步拖拽，这会导致无效的透视效果 ## Extends - `BaseMode`\<\{ `control`: (`object`) => `fabric.Object`; \}, `PerspectiveOptions`\> ## Constructors ### new Perspective() > **new Perspective**(`options`): [`Perspective`](Perspective.md) 创建透视变形模式实例初始化一个透视变形模式。 #### Parameters ##### options `Partial`\<`PerspectiveOptions`\> = `{}` #### Returns [`Perspective`](Perspective.md) #### Overrides `BaseMode< { /** * 配置对角控制点样式回调 * @param object - 默认的控制点对象 * @returns 作为控制点对象的fabric元素对象，可使用默认对象以外的新对象 */ control: (object: fabric.Object) => fabric.Object; }, PerspectiveOptions >.constructor` ## Properties ### name > **name**: `string` = `"perspective"` 变形模式的唯一标识名称 #### Overrides `BaseMode.name` *** ### options > **options**: `Required`\<`PerspectiveOptions`\> 模式配置 #### Overrides `BaseMode.options` ## Accessors ### controlObjects #### Get Signature > **get** **controlObjects**(): `Object`[] 获取当前所有的控制点对象返回当前透视变形模式中的所有控制点对象。 ##### Example ```typescript // 1.隐藏所有控制点 perspective.controlObjects.forEach(control => { control.set({ visible: false }); }); canvas.renderAll(); // 2.将所有控制点移到最上层 perspective.controlObjects.forEach(control => { canvas.bringToFront(control); }); ``` ##### Returns `Object`[] 返回所有控制点对象的数组 ## Methods ### dirtyRender() > **dirtyRender**(`fabricWarpvas`): `undefined` \| () => `void` 在脏渲染后执行的钩子，用于渲染透视变形的交互元素 #### Parameters ##### fabricWarpvas [`FabricWarpvas`](../../index/classes/FabricWarpvas.md) FabricWarpvas 实例，提供操作接口 #### Returns `undefined` \| () => `void` 返回清理函数，用于移除所有控制点和事件监听器 #### Example ```typescript // 进入交互会自动调用 const cleanup = perspective.dirtyRender(fabricWarpvas); // 退出交互时清理 cleanup(); ``` #### Remarks 无效的透视变形会自动回退到上一个有效状态 #### Overrides `BaseMode.dirtyRender` *** ### execute() > **execute**(`warpvas`): `Coord`[][][] 执行透视变形计算代理方法，调用静态方法 [Perspective.execute](Perspective.md#execute-2) 进行实际的透视变形计算。 #### Parameters ##### warpvas `Warpvas` 需要进行透视变形的贴图对象 #### Returns `Coord`[][][] 返回计算后的网格分割点坐标数组 #### See [Perspective.execute](Perspective.md#execute-2) 具体实现细节 #### Overrides `BaseMode.execute` *** ### registerStyleSetter() > **registerStyleSetter**\<`K`\>(`label`, `setter`): `void` 注册样式设置器，自定义变形模式中各种元素的外观，如果模式类并未对外提供设置入口，那便意味无法实现自定义修改 #### Type Parameters • **K** *extends* `"control"` 样式设置器的标签类型，必须是 T 中定义的键之一 #### Parameters ##### label `K` 样式设置器的标签，用于标识要设置的元素 ##### setter `object`\[`K`\] 样式设置器的回调函数，用于设置元素的样式 #### Returns `void` #### Example ```typescript // 进入变形模式的图像样式设置 80% 不透明度 mode.registerStyleSetter('image', (image) => { image.set({ opacity: 0.8 }); }); ``` #### Remarks 1. 新的样式设置会与现有设置合并，而不是完全替换 2. 对于同名设置器，新的会覆盖旧的 3. 样式会在下一次渲染时生效 #### Inherited from `BaseMode.registerStyleSetter` *** ### render() > **render**(`fabricWarpvas`): `undefined` \| () => `void` 渲染变形效果到画布将变形后的贴图和网格边界线渲染到 Fabric.js 画布上。 #### Parameters ##### fabricWarpvas [`FabricWarpvas`](../../index/classes/FabricWarpvas.md) Fabric 变形工具实例，包含画布和变形状态 #### Returns `undefined` \| () => `void` 清理函数，用于移除渲染的元素 #### Example ```typescript class CustomMode extends BaseMode { render(fabricWarpvas: FabricWarpvas) { // 调用基类渲染方法 const cleanup = super.render(fabricWarpvas); // 添加自定义渲染逻辑 const customElements = this.renderCustomElements(); // 返回组合的清理函数 return () => { cleanup(); this.cleanupCustomElements(customElements); }; } } ``` #### Remarks 1. 返回的清理函数会在下次渲染前或离开编辑模式时自动调用 2. 子类可以通过 super.render() 复用基类的渲染逻辑 3. 渲染的元素样式可通过 registerStyleSetters 配置 #### Inherited from `BaseMode.render` *** ### execute() > `static` **execute**(`warpvas`): `Coord`[][][] 计算透视变形的网格分割点该方法实现了透视变形的核心算法，依赖于 warpvas-perspective 库。 #### Parameters ##### warpvas `Warpvas` 需要进行透视变形的贴图对象 #### Returns `Coord`[][][] 返回三维数组，表示网格的分割点坐标： - 第一维：行索引 - 第二维：列索引 - 第三维：点的坐标 {x, y} #### Throws 当四个顶点形成无效的透视形状时抛出错误 #### Remarks 1. 顶点的移动范围会受到透视有效性的限制 2. 当线条平行时会使用默认点代替交点