psyche-editor-render/dist/handlers/crop-image/CropUI.d.ts

编辑器渲染器

import CropImageHandler, { ICropUIImpl } from '../CropImageHandler';
declare module 'fabric' {
    namespace fabric {
        interface Object {
            /**
             * 裁剪缩放比例
             * */
            cropScale?: number;
        }
    }
}
export declare class CropUI implements ICropUIImpl {
    private rootNode?;
    private sliderBall;
    private sliderFill;
    private sliderBallTooltips;
    private sliderWidth;
    private slideStartPageX;
    private slideStartLeft;
    private cropImageHandler;
    dispose(): void;
    init(cropImageHandler: CropImageHandler): void;
    /**
     * 设置ui位置
     * @param pageX 屏幕坐标x
     * @param pageY 屏幕坐标y
     * */
    setPosition(pageX: number, pageY: number): this;
    /**
     * 显示ui
     * */
    show(): this;
    /**
     * 隐藏ui
     * */
    hide(): this;
    /**
     * 根据shell位置更新裁剪浮窗位置
     * */
    updatePosition(): void;
    /**
     * 挂载ui
     * @param mounted 挂载的节点位置
     * */
    private render;
    /**
     * 创建一个简易按钮
     * @param text 按钮文本
     * @param buttonStyle 按钮样式
     * @param clickHanlder 点击动作
     * @returns 按钮span元素
     * */
    private createButton;
    /**
     * 创建滑条
     * @returns 滑条容器元素
     * */
    private createSlider;
    /**
     * 滚条开始拖动时
     * */
    private onStartSlide;
    /**
     * 滚条拖动时
     * */
    private onSliding;
    /**
     * 滚条停止拖动
     * */
    private onSlideEnd;
    /**
     * 缩放滑条变动，更新原图片
     * @param value 0-1的小数，1表示到最右侧
     * */
    private onSliderValueChange;
    /**
     * 裁剪框适配图片尺寸
     * */
    private fitImageHanlder;
}