fastlion-amis/lib/renderers/Lion/components/ImageViewer/index.d.ts

一种MIS页面生成工具

import React from 'react';
import './index.scss';
interface IProps {
    id: string;
    width: string | number;
    height: string | number;
    minimum: number;
    maximum: number;
    rate: number;
    children: any;
    className?: string;
    center?: boolean;
    contain?: boolean;
    cover?: boolean;
}
interface IState {
    focus: boolean;
    imageWidth: number;
    imageHeight: number;
    startX: number;
    startY: number;
    startLeft: number;
    startTop: number;
    currentLeft: number;
    currentTop: number;
    scale: number;
}
declare class ReactPictureViewer extends React.Component<IProps, IState> {
    static defaultProps: {
        id: string;
        width: string;
        height: string;
        minimum: number;
        maximum: number;
        rate: number;
        center: boolean;
    };
    state: {
        focus: boolean;
        imageWidth: number;
        imageHeight: number;
        startX: number;
        startY: number;
        startLeft: number;
        startTop: number;
        currentLeft: number;
        currentTop: number;
        scale: number;
    };
    viewportDOM: any;
    imgDOM: any;
    constructor(props: IProps);
    componentDidMount(): void;
    componentWillReceiveProps(nextProps: IProps): void;
    shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean;
    componentWillUpdate(nextProps: IProps, nextState: IState): void;
    initViewport: (width: string | number, height: string | number) => void;
    /**
     * 图片初始化，包括：
     * 1. 初始图片位置居中
     * 2. 记录初始图片尺寸
     * @param nextProps
     */
    initPicture: (nextProps?: IProps | undefined) => void;
    /**
     * 设置图片尺寸为 contain
     * @param src {String} 需要操作的图片的 src
     * @param callback {Function} changeToContain 完成后的回调函数，接受更新后的图片尺寸，即 imageWidth 和 imageHeight 两个参数
     */
    changeToContain: (src: string, callback: Function) => void;
    /**
     * 设置图片位置为 center
     */
    changeToCenter: () => void;
    /**
     * 设置图片尺寸为 cover
     */
    changeToCover: (src: string, callback: Function) => void;
    /**
     * 设置图片位置为基准点位置
     * 基准点位置，基于视口: top: 0 && left: 0
     */
    changeToBasePoint: () => void;
    /**
     * 重新计算图片尺寸，使宽高都不会超过视口尺寸
     * @param imageWidth
     * @param imageHeight
     * @returns {*}
     */
    recalcImageSizeToContain: (imageWidth: number, imageHeight: number) => {
        imageWidth: number;
        imageHeight: number;
    };
    recalcImageSizeToCover: (imageWidth: number, imageHeight: number) => {
        imageWidth: number;
        imageHeight: number;
    };
    /**
     * 改变图片位置
     * @param currentLeft {Number} 当前 left
     * @param currentTop {Number} 当前 top
     */
    changePosition(currentLeft: number, currentTop: number): void;
    /**
     * 调整尺寸
     * @param width
     * @param height
     */
    changeSize(width: number, height: number): void;
    /**
     * 处理鼠标按下
     * @param e
     */
    handleMouseDown: (e: any) => void;
    /**
     * 处理鼠标移动
     * @param e
     */
    handleMouseMove: (e: any) => void;
    /**
     * 处理鼠标放开
     */
    handleMouseUp: () => void;
    /**
     * 处理鼠标移出
     */
    handleMouseLeave: () => void;
    /**
     * 处理滚轮缩放
     * @param e {Event Object} 事件对象
     */
    handleMouseWheel: (e: any) => void;
    /**
     * 获取鼠标当前相对于某个元素的位置
     * @param e        {object}    原生事件对象
     * @param target {DOMobject} 目标DOM元素
     * @return object 包括offsetLeft和offsetTop
     *
     * Tips:
     * 1.offset 相关属性在 display: none 的元素上失效，为0
     * 2.offsetWidth/offsetHeight 包括border-width，clientWidth/clientHeight不包括border-width，只是可见区域而已
     * 3.offsetLeft/offsetTop 是从当前元素边框外缘开始算，一直到定位父元素的距离，clientLeft/clientTop其实就是border-width
     */
    _getOffsetInElement: (e: any, target: any) => {
        top: number;
        left: number;
        right: number;
        bottom: number;
    };
    /**
     * 判断一个DOM元素是否包裹在另一个DOM元素中【父子关系或者层级嵌套都可以】
     * @param  {Object} DOM         事件对象中的event.target/或者是需要检测的DOM元素
     * @param  {Object} targetDOM   作为限制范围的DOM元素
     * @return {Boolean}            true----是包裹关系，false----不是包裹关系
     */
    /**
     * 获取某个 DOM 元素相对视口的位置信息
     * @param el {object} 目标元素
     * @return object {object} 位置信息对象
     */
    _getOffset: (el: any) => {
        left: any;
        top: any;
        right: number;
        bottom: number;
    };
    /**
     * 获取图片原始尺寸信息
     * @param image
     * @returns {Promise<any>}
     * @private
     */
    _getImageOriginSize: (image: any) => Promise<unknown>;
    render(): JSX.Element;
}
export default ReactPictureViewer;