psyche-editor-render/dist/handlers/CommonHandler.d.ts

编辑器渲染器

import Handler from './Handler';
import { fabric } from 'fabric';
interface ISetProperty {
    key: string;
    value: string | number | boolean;
    obj?: fabric.Object;
    save?: boolean;
    callBack?: () => void;
}
/**
 * 通用的处理器，画布中公共的方法都在这里
 */
declare class CommonHandler {
    /** @ignore */
    handler: Handler;
    /** @ignore */
    constructor(handler: Handler);
    /**
     * 通过id查找画布元素
     * @param id - 需要查找的id
     * @returns 查找到的画布元素
     */
    findById(id: string | number): fabric.Object;
    /**
     * 清空画布
     * @param includeWorkarea - 是否需要清空workarea 默认不清空
     * @defaultValue false 不清空workarea，true清空workarea
     */
    clear(includeWorkarea?: boolean): void;
    /**
     * 将css的渐变属性转换为fabric的渐变
     * @param originColor - css渐变属性
     * @example
     * linear-gradient 目前支持角度、left、top、right、bottom的方向填写
     * radial-gradient 目前只支持colorStops的配置，其他的例如椭圆等配置不支持
     * colorStops目前支持 literal, hex, rgb, rgba
     * 举例：
     * linear-gradient(90deg,  rgba(26,104,220,1) 0%, rgba(220,26,166,1) 37%, RGBA(130, 127, 41, 1) 69%, rgba(1,1,1,1) 100%)
     * radial-gradient(circle, #333 0%, #333 50%, #eee 75%, #333 75%)
     * @returns 转换后的渐变属性
     */
    cssGradient2FabricGradient(originColor: string): fabric.IGradientOptions;
    /**
     * 将css的线性渐变转换为fabric的渐变
     * @param linearGradient 解析出来的线性渐变
     * @returns
     */
    private linearGradient2Fabric;
    /**
     * 将css的径向渐变转换为fabric的渐变
     * @param radialGradient 解析出来的径向渐变
     * @returns
     */
    private radialGradient2Fabric;
    /**
     * 将解析后的colorStops转换为fabric的colorStops
     * @param colorStops 解析后的colorStops
     * @returns
     */
    private resetColorStops;
    /**
     * fabric的渐变属性转换为css的渐变属性
     * @param originGradient - 需要转换的fabric渐变属性
     * @returns 转换完成后的css渐变属性
     */
    fabricGradient2CSSGradient(originGradient: fabric.IGradientOptions): string;
    /**
     * 获取当前画布中元素的类型
     * @param obj - 画布中的元素
     * @returns 元素类型
     */
    getObjectType(obj: fabric.Object): string;
    /**
     * 设置画布中元素的属性值
     * @param key 需要设置的属性
     * @param value 设置的属性值
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     * @returns
     */
    setProperty({ key, value, obj, save, callBack }: ISetProperty): void;
    /**
     * 获取画布中的主要颜色
     * @returns 颜色值数组
     */
    getCanvasColorsAsync(): Promise<string[]>;
    /**
     * 返回fabric的颜色色彩值，如果是纯色直接返回，渐变色返回渐变色的节点色
     * @param color 颜色数据
     * @returns 返回包含颜色的数组
     */
    private getObjectColor;
    /**
     * 获取图片的多个主要颜色
     * @param src 图片src
     * @returns 图片的多个主要颜色
     */
    private getImgColorAsync;
    /**
     * ts属性检测的函数
     */
    /** @ignore */
    is<T extends object>(v: any, k: string): v is T;
    /**
     * 设置图片的圆角
     */
    setImageBorderRadius(image: fabric.Object, value: number): void;
    /**
     * 删除元素
     * @param object 删除的元素
     */
    deleteObject(object?: fabric.Object): void;
    /**
     * 加载字体
     * @param name 字体名
     * @param url 字体链接
     * @returns
     */
    loadFontAsync(name: string, url: string): Promise<boolean>;
    /**
     * 设置元素的定位点为center,并且自动复原位置
     * @param object
     * @returns
     */
    setObjectOriginByCenter(object: fabric.Object): void;
    /**
     * 选择画布中的所有元素
     * @returns 无
     */
    selectAll(): void;
    /**
     * 设置元素的定位点为left/top,并且自动复原位置
     * @param object
     * * @returns
     */
    setObjectOriginByLeftTop(object: fabric.Object): void;
    /**
     * 向画布中添加图片
     * @param url 图片url
     */
    addImg(url: string | ArrayBuffer): void;
    /**
     * 向画布中添加文字
     */
    addTextbox(text: string): void;
    /**
     * 向画布中添加json
     */
    addJson(json: {
        [key: string]: string;
    } | string): void;
    /**
     * 替换画布中的json,并且按照原图片的高度比例缩放
     */
    replaceImg(url: string): void;
}
export default CommonHandler;