@likg/magnifier/dist/types/index.d.ts

网页放大镜

import './index.css';
type Size = {
    width: number;
    height: number;
};
export interface MagnifierOptions {
    /** 放大镜初始尺寸，默认值200x200 */
    initialSize?: Size;
    /** 放大镜最小尺寸，默认值500x500 */
    minSize?: Size;
    /** 放大镜最大尺寸，默认值100x100 */
    maxSize?: Size;
    /** 四周触发拖拽缩放的间距，默认值 20 */
    resizeSpacing?: number;
    /** 缩放比例，默认值 1 */
    scaleRatio?: number;
    /** 边框颜色，默认值 #7B68EE */
    borderColor?: string;
    /** 是否允许跨源图像污染画布 */
    allowTaint?: boolean;
    /** 跨域地址 */
    useCORS?: boolean;
    proxy?: string;
    /** 调试模式 */
    debug?: boolean;
    /** 异常处理 */
    onError?: (error: Error) => void;
}
export default class Magnifier {
    /** 放大镜初始尺寸，默认值200x200 */
    private initialSize;
    /** 放大镜最小尺寸，默认值500x500 */
    private minSize;
    /** 放大镜最大尺寸，默认值100x100 */
    private maxSize;
    /** 四周触发拖拽缩放的间距，默认值 20 */
    private resizeSpacing;
    /** 缩放比例，默认值 1 */
    private scaleRatio;
    /** 边框颜色，默认值 #7B68EE */
    private borderColor;
    /** 跨域地址 */
    private allowTaint?;
    private useCORS?;
    private proxy?;
    /** 调试模式（显示边框） */
    private debug;
    private onError?;
    /** 类名前缀 */
    private prefixCls;
    /** 标识当前是否激活缩放状态 */
    private isResizing;
    /** 标识是否从放大镜【左侧】/【顶部】激活缩放状态，用于判断是否需要更新位置 */
    private isResizeTopLeft;
    /** 标识当前是否激活拖拽状态 */
    private isDragging;
    /** 记录放大镜拖拽时的坐标 */
    private originalPoint;
    /** 记录放大镜拖拽时的尺寸 */
    private originalSize;
    /** 记录放大镜拖拽时的偏移位置 */
    private originalOffset;
    /** 容器元素 */
    private container;
    /** 加载元素 */
    private loadingEl;
    /** 放大镜 */
    private magnifier;
    /** 拖拽区域 */
    private dragBox;
    /** 裁剪区域 */
    private cropBox;
    /** 缩放图片 */
    private scaleImg;
    /** 屏幕截图 */
    private screenshots;
    /**
     * 构造函数
     * @param {MagnifierOptions} options 可选项
     */
    constructor(options?: MagnifierOptions);
    /**
     * 挂载放大镜（激活）
     */
    mount: () => void;
    /**
     * 销毁放大镜（失活）
     */
    destroy: () => void;
    /**
     * 下载屏幕截图（主要用于测试）
     * @param canvas
     */
    private _downloadScreenshots;
    /**
     * 计算放大镜初始位置（屏幕正中间）
     */
    private _calcMagnifierPosition;
    /**
     * 计算裁剪区域初始位置（屏幕正中间）
     * @returns
     */
    private _calcCropBoxPosition;
    /**
     * 获取屏幕截图
     * @returns
     */
    private _getScreenshots;
    /**
     * 构建必要元素
     */
    private _createElement;
    /**
     * 更新放大镜显示内容
     * @returns
     */
    private _updateScaleImg;
    /**
     * 开始拖拽
     * @param event
     * @returns
     */
    private _onDragStart;
    /**
     * 拖拽中
     * @param event
     * @returns
     */
    private _onDragging;
    /**
     * 拖拽结束
     * @param event
     */
    private _onDragEnd;
    /**
     * 开始缩放
     * @param event
     * @returns
     */
    private _onResizeStart;
    /**
     * 缩放中
     * @param event
     * @returns
     */
    private _onResizing;
    /**
     * 缩放结束
     */
    private _onReszieEnd;
}
export {};