editor-render-v2/dist/handlers/EffectHandler.d.ts

编辑器渲染器

import Handler from './Handler';
import { fabric } from 'fabric';
interface IShadowOption {
    blur?: number;
    color?: string;
    offsetX?: number;
    offsetY?: number;
}
interface IPresets {
    thumbUrl?: string;
    fillType?: string;
    fill?: string | fabric.IGradientOptions;
    strokeType?: string;
    stroke?: string | fabric.IGradientOptions;
    strokeWidth?: number;
    shadow?: IShadowOption;
}
interface ISetTextPresets {
    fillType?: string;
    fill?: string | fabric.IGradientOptions;
    shadow?: IShadowOption;
    strokeType?: string;
    stroke?: string | fabric.IGradientOptions;
    strokeWidth?: number;
}
interface ISetFillOffset {
    offsetX: number;
    offsetY: number;
}
interface IResetPresets {
    stroke?: boolean;
    shadow?: boolean;
    fill?: boolean;
    object?: fabric.Object;
}
/**
 * 画布元素效果
 */
declare class EffectHandler {
    /** @ignore */
    handler: Handler;
    /** @ignore */
    constructor(handler: Handler);
    /**
     * 设置文字的填充效果
     * @example
     * type: "rgba" - 纯色的背景类型
     * type: "gradient" - 渐变的背景类型
     * type: "image" - 填充图
     * @param color - 修改的颜色，可以是纯色，也可以是fabric的渐变颜色对象，也可以是图片的url或base64
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     *
     *
     * 如何将CSS的渐变属性转换为fabric的渐变对象请查看：
     * {@link ColorHandler.cssGradient2FabricGradient}
     * @returns
     */
    setTextFill(type: string, color: string | fabric.IGradientOptions, obj?: fabric.Object): void;
    /**
     * 设置画布元素填充的位置偏移属性
     * @param ISetFillOffset 设置的位置偏移属性{ offsetX, offsetY }
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @returns
     */
    setTextFillOffset({ offsetX, offsetY }: ISetFillOffset, obj?: fabric.Object): void;
    /**
     * 设置文字的描边颜色效果
     * @example
     * type: "rgba" - 纯色的背景类型
     * type: "gradient" - 渐变的背景类型
     * @param color - 修改的颜色，可以是纯色，也可以是fabric的渐变颜色对象
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     *
     *
     * 如何将CSS的渐变属性转换为fabric的渐变对象请查看：
     * {@link ColorHandler.cssGradient2FabricGradient}
     * @returns
     */
    setStroke(type: string, color: string | fabric.IGradientOptions, obj?: fabric.Object): {
        version: string;
        objects: fabric.Object[];
    };
    /**
     * 设置文字的描边大小
     * @param value 描边大小值
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     * @returns
     */
    setStrokeWidth(value: number, obj?: fabric.Object): {
        version: string;
        objects: fabric.Object[];
    };
    /**
     * 设置文字描边虚线
     * @param value 虚线的长度和间隔数组
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     * @returns
     */
    setStrokeDash(value: number[], obj?: fabric.Object): void;
    /**
     * 设置文字描边虚线的行尾样式
     * @example
     * value: "butt" - 默认
     * value: "round" - 圆形
     * value: "square" - 方形
     * @param value 设置的行尾样式，为“butt”或“round”或“square”
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     * @returns
     */
    setStrokeCap(value: string, obj?: fabric.Object): void;
    /**
     * 设置文字描边的角样式
     * @example
     * value: "miter" - 斜接
     * value: "round" - 圆形
     * value: "bevel" - 斜角
     * @param value 设置的角样式，为“miter”或“round”或“bevel”
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     * @returns
     */
    setStrokeJoin(value: string, obj?: fabric.Object): void;
    /**
     * 设置文字的阴影
     * @param shadowOption 阴影的效果对象，可以设置的值为blur、color、offsetX、offsetY
     * @defaultValue shadowOption - { blur: 10, color: '#fff', offsetX: 0, offsetY: 10 }
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @param save 是否保存，默认为true
     * @defaultValue true 存储修改状态，false不存储状态
     * @returns
     */
    setShadow({ blur, color, offsetX, offsetY }: IShadowOption, obj?: fabric.Object): void;
    /**
     * 获取预设的文字效果
     * @returns 预设文字效果的json
     */
    getTextPresets(): IPresets[];
    /**
     * 获取预设的图片效果
     * @returns 预设图片效果的json
     */
    getImagePresets(): IPresets[];
    /**
     * 设置文字的预设效果，可以使用getTextPresets获取到预设后，传入需要的效果
     * @param ISetTextPresets 设置元素效果的属性 { fillType, fill, shadow, strokeType, stroke, strokeWidth }
     * @example
     * fillType属性值可以为'rgba'或'gradient'或'image'
     * fill属性值需要根据fillType属性设置为对应的颜色或渐变色或图片地址
     * shadow属性为fabric的shadow属性值
     * strokeType属性值可以为'rgba'或'gradient'
     * stroke属性需要根据strokeType属性设置为对应的颜色或渐变色
     * strokeWidth属性为描边的大小
     * @param obj 需要设置的画布元素，不传入时默认画布中当前选择的元素
     * @returns
     */
    setPresets({ fillType, fill, shadow, strokeType, stroke, strokeWidth }: ISetTextPresets, obj?: fabric.Object): {
        version: string;
        objects: fabric.Object[];
    };
    /**
     * 重制样式
     * @param IResetPresets 重制元素的样式属性 { stroke, shadow, fill, object }
     * @returns
     */
    resetPresets({ stroke, shadow, fill, object }: IResetPresets): {
        version: string;
        objects: fabric.Object[];
    };
}
export default EffectHandler;