fabric-texture/dist/abstract-mode.class.d.ts

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

import type { FabricTexture } from './fabric-texture.class';
import type { Texture } from './texture.class';
/**
 * 贴图变形交互模式的抽象基类
 *
 * 定义了贴图变形的交互模式接口，所有具体的交互模式都需要继承此类。
 * 该类提供了以下核心功能：
 * 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);
 *     };
 *   }
 * }
 * ```
 */
export declare abstract class AbstractMode {
    /**
     * 交互模式的唯一标识名称 用于区分不同的交互模式
     */
    abstract name: string;
    /**
     * 计算变形区域的分割点
     *
     * 在变形操作时计算区域内的分割点位置。
     * 默认使用贴图对象自带的分割策略，你可以：
     * 1. 使用默认策略
     * 2. 继承后重写该方法实现自定义策略
     *
     * @param texture - 贴图对象实例
     * @returns 返回计算后的分割点坐标数组
     */
    execute(texture: Texture): Coord[][][];
    /**
     * 渲染变形后的贴图和基础交互元素
     *
     * 在每次贴图变形后执行，你可通过该方法处理以下事项：
     * 1. 将变形后的贴图添加到画布
     * 2. 添加基础的交互控件
     * 3. 返回清理函数用于资源回收
     *
     * @param fabricTexture - FabricTexture 实例
     * @returns 返回清理函数，用于清理本次渲染创建的所有元素
     *
     * @remarks
     * 1. 每次变形都会重新创建贴图对象
     * 2. 需要在每次渲染时清理上一次的元素
     * 3. 建议使用清理函数统一管理资源释放
     *
     * @see dirtyRender 处理结构性变化的渲染
     */
    render(fabricTexture: FabricTexture): (() => void) | void;
    /**
     * 渲染结构性变化的交互元素
     *
     * 仅在贴图结构发生变化时执行（如添加/删除分割点），用于：
     * 1. 渲染结构相关的交互控件（如控制点）
     * 2. 更新复杂的交互逻辑
     * 3. 优化渲染性能
     *
     * @param fabricTexture - FabricTexture 实例
     * @returns 返回清理函数，用于清理本次渲染创建的所有元素
     *
     * @example
     * ```typescript
     * class CustomMode extends AbstractMode {
     *   dirtyRender(fabricTexture: FabricTexture) {
     *     // 创建控制点
     *     const controlPoints = createControlPoints();
     *
     *     // 添加到画布
     *     fabricTexture.canvas.add(...controlPoints);
     *
     *     // 返回清理函数
     *     return () => {
     *       fabricTexture.canvas.remove(...controlPoints);
     *     };
     *   }
     * }
     * ```
     *
     * @remarks 与 render 不同，此方法在仅是控制点位置更新的情况下不会触发
     */
    dirtyRender(fabricTexture: FabricTexture): (() => void) | void;
}