bee-ui/ImageZoom/index.js

import React, { Component, } from 'react';
import { View, PanResponder, Animated, Platform, } from 'react-native';
export class PropsGaea {
    constructor() {
        this.gaeaName = '图片手势操作';
        this.gaeaIcon = 'square-o';
        this.gaeaUniqueKey = 'nt-image-zoom';
    }
}
export class Props extends PropsGaea {
    constructor() {
        super(...arguments);
        this.onClick = () => {
        };
        this.onLongPress = () => {
        };
        this.panToMove = true;
        this.pinchToZoom = true;
        this.cropWidth = 100;
        this.cropHeight = 100;
        this.imageWidth = 100;
        this.imageHeight = 100;
        this.source = '';
        this.longPressTime = 800;
        this.leaveStayTime = 100;
        this.leaveDistance = 10;
        this.maxOverflow = 100;
        this.horizontalOuterRangeOffset = () => {
        };
        this.responderRelease = () => {
        };
        this.onDoubleClick = () => {
        };
    }
}
export class State {
    constructor() {
        this.centerX = 0.5;
        this.centerY = 0.5;
    }
}
/**
 * 样式表
 */
const styles = {
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
        // fix 0.36 bug, see: https://github.com/facebook/react-native/issues/10782
        backgroundColor: 'transparent',
    },
};
const isMobile = () => {
    if (Platform.OS === 'web') {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
            .test(navigator.userAgent);
    }
    else {
        return true;
    }
};
//
export default class ImageViewer extends Component {
    constructor() {
        super(...arguments);
        this.state = new State();
        // 上次/当前/动画 x 位移
        this.lastPositionX = null;
        this.positionX = 0;
        this.animatedPositionX = new Animated.Value(0);
        // 上次/当前/动画 y 位移
        this.lastPositionY = null;
        this.positionY = 0;
        this.animatedPositionY = new Animated.Value(0);
        // 缩放大小
        this.scale = 1;
        this.animatedScale = new Animated.Value(1);
        this.zoomLastDistance = null;
        this.zoomCurrentDistance = 0;
        // 滑动过程中，整体横向过界偏移量
        this.horizontalWholeOuterCounter = 0;
        // 滑动过程中，x y的总位移
        this.horizontalWholeCounter = 0;
        this.verticalWholeCounter = 0;
        // 两手距离中心点位置
        this.centerDiffX = 0;
        this.centerDiffY = 0;
        // 上一次点击的时间
        this.lastClickTime = 0;
        // 双击时的位置
        this.doubleClickX = 0;
        this.doubleClickY = 0;
        // 是否双击缩放了
        this.isDoubleClickScale = false;
    }
    componentWillMount() {
        const setResponder = isMobile();
        this.imagePanResponder = PanResponder.create({
            // 要求成为响应者：
            onStartShouldSetPanResponder: () => setResponder,
            onStartShouldSetPanResponderCapture: (event, gestureState) => {
                // 这个event判断其实没什么卵用, 主要是为了clear掉tslint的报错
                return event && setResponder && gestureState.dx !== 0 && gestureState.dy !== 0;
            },
            onMoveShouldSetPanResponder: () => setResponder,
            onMoveShouldSetPanResponderCapture: (event, gestureState) => {
                // 这个event判断其实没什么卵用, 主要是为了clear掉tslint的报错
                return event && setResponder && gestureState.dx !== 0 && gestureState.dy !== 0;
            },
            onPanResponderTerminationRequest: () => false,
            onPanResponderGrant: (evt) => {
                // 开始手势操作
                this.lastPositionX = null;
                this.lastPositionY = null;
                this.zoomLastDistance = null;
                this.horizontalWholeCounter = 0;
                this.verticalWholeCounter = 0;
                this.lastTouchStartTime = new Date().getTime();
                this.isDoubleClickScale = false;
                if (evt.nativeEvent.changedTouches.length > 1) {
                    this.centerDiffX = (evt.nativeEvent.changedTouches[0].pageX
                        + evt.nativeEvent.changedTouches[1].pageX) / 2 - this.props.cropWidth / 2;
                    this.centerDiffY = (evt.nativeEvent.changedTouches[0].pageY
                        + evt.nativeEvent.changedTouches[1].pageY) / 2 - this.props.cropHeight / 2;
                }
                // 计算长按
                if (this.longPressTimeout) {
                    clearTimeout(this.longPressTimeout);
                }
                this.longPressTimeout = setTimeout(() => {
                    this.props.onLongPress();
                }, this.props.longPressTime);
                if (evt.nativeEvent.changedTouches.length <= 1) {
                    // 一个手指的情况
                    if (new Date().getTime() - this.lastClickTime < 150) {
                        // 认为触发了双击
                        this.lastClickTime = 0;
                        this.props.onDoubleClick();
                        // 取消长按
                        clearTimeout(this.longPressTimeout);
                        // 因为可能触发放大，因此记录双击时的坐标位置
                        this.doubleClickX = evt.nativeEvent.changedTouches[0].pageX;
                        this.doubleClickY = evt.nativeEvent.changedTouches[0].pageY;
                        // 缩放
                        this.isDoubleClickScale = true;
                        if (this.scale > 1 || this.scale < 1) {
                            // 回归原位
                            this.scale = 1;
                            this.positionX = 0;
                            this.positionY = 0;
                        }
                        else {
                            // 开始在位移地点缩放
                            // 记录之前缩放比例
                            // 此时 this.scale 一定为 1
                            const beforeScale = this.scale;
                            // 开始缩放
                            this.scale = 2;
                            // 缩放 diff
                            const diffScale = this.scale - beforeScale;
                            // 找到两手中心点距离页面中心的位移
                            // 移动位置
                            this.positionX = (this.props.cropWidth / 2
                                - this.doubleClickX) * diffScale / this.scale;
                            this.positionY = (this.props.cropHeight / 2
                                - this.doubleClickY) * diffScale / this.scale;
                        }
                        Animated.parallel([
                            Animated.timing(this.animatedScale, {
                                toValue: this.scale,
                                duration: 100,
                            }),
                            Animated.timing(this.animatedPositionX, {
                                toValue: this.positionX,
                                duration: 100,
                            }),
                            Animated.timing(this.animatedPositionY, {
                                toValue: this.positionY,
                                duration: 100,
                            }),
                        ]).start();
                    }
                    else {
                        this.lastClickTime = new Date().getTime();
                    }
                }
            },
            onPanResponderMove: (evt, gestureState) => {
                if (evt.nativeEvent.changedTouches.length <= 1) {
                    // x 位移
                    let diffX = gestureState.dx - this.lastPositionX;
                    if (this.lastPositionX === null) {
                        diffX = 0;
                    }
                    // y 位移
                    let diffY = gestureState.dy - this.lastPositionY;
                    if (this.lastPositionY === null) {
                        diffY = 0;
                    }
                    // 保留这一次位移作为下次的上一次位移
                    this.lastPositionX = gestureState.dx;
                    this.lastPositionY = gestureState.dy;
                    this.horizontalWholeCounter += diffX;
                    this.verticalWholeCounter += diffY;
                    if (Math.abs(this.horizontalWholeCounter) > 5 ||
                        Math.abs(this.verticalWholeCounter) > 5) {
                        // 如果位移超出手指范围，取消长按监听
                        clearTimeout(this.longPressTimeout);
                    }
                    if (this.props.panToMove) {
                        // diffX > 0 表示手往右滑，图往左移动，反之同理
                        // horizontalWholeOuterCounter > 0 表示溢出在左侧，反之在右侧，绝对值越大溢出越多
                        if (this.props.imageWidth * this.scale > this.props.cropWidth) {
                            // 没有溢出偏移量或者这次位移完全收回了偏移量才能拖拽
                            if (this.horizontalWholeOuterCounter > 0) {
                                if (diffX < 0) {
                                    if (this.horizontalWholeOuterCounter > Math.abs(diffX)) {
                                        // 偏移量还没有用完
                                        this.horizontalWholeOuterCounter += diffX;
                                        diffX = 0;
                                    }
                                    else {
                                        // 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动
                                        diffX += this.horizontalWholeOuterCounter;
                                        this.horizontalWholeOuterCounter = 0;
                                        this.props.horizontalOuterRangeOffset(0);
                                    }
                                }
                                else {
                                    this.horizontalWholeOuterCounter += diffX;
                                }
                            }
                            else if (this.horizontalWholeOuterCounter < 0) {
                                if (diffX > 0) {
                                    if (Math.abs(this.horizontalWholeOuterCounter) > diffX) {
                                        // 偏移量还没有用完
                                        this.horizontalWholeOuterCounter += diffX;
                                        diffX = 0;
                                    }
                                    else {
                                        // 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动
                                        diffX += this.horizontalWholeOuterCounter;
                                        this.horizontalWholeOuterCounter = 0;
                                        this.props.horizontalOuterRangeOffset(0);
                                    }
                                }
                                else {
                                    this.horizontalWholeOuterCounter += diffX;
                                }
                            }
                            else {
                                // 溢出偏移量为0，正常移动
                            }
                            // 产生位移
                            this.positionX += diffX / this.scale;
                            // 但是横向不能出现黑边
                            // 横向能容忍的绝对值
                            const horizontalMax = (this.props.imageWidth *
                                this.scale - this.props.cropWidth) / 2 / this.scale;
                            if (this.positionX < -horizontalMax) {
                                this.positionX = -horizontalMax;
                                // 让其产生细微位移，偏离轨道
                                this.horizontalWholeOuterCounter += -1 / 1e10;
                            }
                            else if (this.positionX > horizontalMax) {
                                this.positionX = horizontalMax;
                                // 让其产生细微位移，偏离轨道
                                this.horizontalWholeOuterCounter += 1 / 1e10;
                            }
                            this.animatedPositionX.setValue(this.positionX);
                        }
                        else {
                            // 不能横向拖拽，全部算做溢出偏移量
                            this.horizontalWholeOuterCounter += diffX;
                        }
                        // 溢出量不会超过设定界限
                        if (this.horizontalWholeOuterCounter > this.props.maxOverflow) {
                            this.horizontalWholeOuterCounter = this.props.maxOverflow;
                        }
                        else if (this.horizontalWholeOuterCounter < -this.props.maxOverflow) {
                            this.horizontalWholeOuterCounter = -this.props.maxOverflow;
                        }
                        if (this.horizontalWholeOuterCounter !== 0) {
                            // 如果溢出偏移量不是0，执行溢出回调
                            this.props.horizontalOuterRangeOffset(this.horizontalWholeOuterCounter);
                        }
                        if (this.props.imageHeight * this.scale > this.props.cropHeight) {
                            // 如果图片高度大图盒子高度， 可以纵向拖拽
                            this.positionY += diffY / this.scale;
                            this.animatedPositionY.setValue(this.positionY);
                        }
                    }
                }
                else {
                    // 多个手指的情况
                    // 取消长按状态
                    if (this.longPressTimeout) {
                        clearTimeout(this.longPressTimeout);
                    }
                    if (this.props.pinchToZoom) {
                        // 找最小的 x 和最大的 x
                        let minX;
                        let maxX;
                        if (evt.nativeEvent.changedTouches[0].locationX >
                            evt.nativeEvent.changedTouches[1].locationX) {
                            minX = evt.nativeEvent.changedTouches[1].pageX;
                            maxX = evt.nativeEvent.changedTouches[0].pageX;
                        }
                        else {
                            minX = evt.nativeEvent.changedTouches[0].pageX;
                            maxX = evt.nativeEvent.changedTouches[1].pageX;
                        }
                        let minY;
                        let maxY;
                        if (evt.nativeEvent.changedTouches[0].locationY >
                            evt.nativeEvent.changedTouches[1].locationY) {
                            minY = evt.nativeEvent.changedTouches[1].pageY;
                            maxY = evt.nativeEvent.changedTouches[0].pageY;
                        }
                        else {
                            minY = evt.nativeEvent.changedTouches[0].pageY;
                            maxY = evt.nativeEvent.changedTouches[1].pageY;
                        }
                        const widthDistance = maxX - minX;
                        const heightDistance = maxY - minY;
                        const diagonalDistance = Math.sqrt(widthDistance * widthDistance
                            + heightDistance * heightDistance);
                        this.zoomCurrentDistance = Number(diagonalDistance.toFixed(1));
                        if (this.zoomLastDistance !== null) {
                            const distanceDiff = (this.zoomCurrentDistance - this.zoomLastDistance) / 200;
                            let zoom = this.scale + distanceDiff;
                            if (zoom < 0.6) {
                                zoom = 0.6;
                            }
                            if (zoom > 10) {
                                zoom = 10;
                            }
                            // 记录之前缩放比例
                            const beforeScale = this.scale;
                            // 开始缩放
                            this.scale = zoom;
                            this.animatedScale.setValue(this.scale);
                            // 图片要慢慢往两个手指的中心点移动
                            // 缩放 diff
                            const diffScale = this.scale - beforeScale;
                            // 找到两手中心点距离页面中心的位移
                            // 移动位置
                            this.positionX -= this.centerDiffX * diffScale / this.scale;
                            this.positionY -= this.centerDiffY * diffScale / this.scale;
                            this.animatedPositionX.setValue(this.positionX);
                            this.animatedPositionY.setValue(this.positionY);
                        }
                        this.zoomLastDistance = this.zoomCurrentDistance;
                    }
                }
            },
            onPanResponderRelease: (evt, gestureState) => {
                // 双击缩放了，结束手势就不需要操作了
                if (this.isDoubleClickScale) {
                    return;
                }
                if (this.scale < 1) {
                    // 如果缩放小于1，强制重置为 1
                    this.scale = 1;
                    Animated.timing(this.animatedScale, {
                        toValue: this.scale,
                        duration: 100,
                    }).start();
                }
                if (this.props.imageWidth * this.scale <= this.props.cropWidth) {
                    // 如果图片宽度小于盒子宽度，横向位置重置
                    this.positionX = 0;
                    Animated.timing(this.animatedPositionX, {
                        toValue: this.positionX,
                        duration: 100,
                    }).start();
                }
                if (this.props.imageHeight * this.scale <= this.props.cropHeight) {
                    // 如果图片高度小于盒子高度，纵向位置重置
                    this.positionY = 0;
                    Animated.timing(this.animatedPositionY, {
                        toValue: this.positionY,
                        duration: 100,
                    }).start();
                }
                // 横向肯定不会超出范围，由拖拽时控制
                // 如果图片高度大于盒子高度，纵向不能出现黑边
                if (this.props.imageHeight * this.scale > this.props.cropHeight) {
                    // 纵向能容忍的绝对值
                    const verticalMax = (this.props.imageHeight *
                        this.scale - this.props.cropHeight) / 2 / this.scale;
                    if (this.positionY < -verticalMax) {
                        this.positionY = -verticalMax;
                    }
                    else if (this.positionY > verticalMax) {
                        this.positionY = verticalMax;
                    }
                    Animated.timing(this.animatedPositionY, {
                        toValue: this.positionY,
                        duration: 100,
                    }).start();
                }
                // 拖拽正常结束后,如果没有缩放,直接回到0,0点
                if (this.scale === 1) {
                    this.positionX = 0;
                    this.positionY = 0;
                    Animated.timing(this.animatedPositionX, {
                        toValue: this.positionX,
                        duration: 100,
                    }).start();
                    Animated.timing(this.animatedPositionY, {
                        toValue: this.positionY,
                        duration: 100,
                    }).start();
                }
                // 水平溢出量置空
                this.horizontalWholeOuterCounter = 0;
                // 取消长按
                if (this.longPressTimeout) {
                    clearTimeout(this.longPressTimeout);
                }
                // 手势完成,如果是单个手指、距离上次按住只有预设秒、滑动距离小于预设值,认为是单击
                const stayTime = new Date().getTime() - this.lastTouchStartTime;
                const moveDistance = Math.sqrt(gestureState.dx
                    * gestureState.dx + gestureState.dy * gestureState.dy);
                if (evt.nativeEvent.changedTouches.length === 1 && stayTime < this.props.leaveStayTime && moveDistance < this.props.leaveDistance) {
                    this.props.onClick();
                }
                else {
                    this.props.responderRelease(gestureState.vx, this.scale);
                }
            },
            onPanResponderTerminate: () => {
            },
        });
    }
    /**
     * 重置大小和位置
     */
    reset() {
        this.scale = 1;
        this.animatedScale.setValue(this.scale);
        this.positionX = 0;
        this.animatedPositionX.setValue(this.positionX);
        this.positionY = 0;
        this.animatedPositionY.setValue(this.positionY);
    }
    render() {
        const animateConf = {
            transform: [{
                    scale: this.animatedScale,
                }, {
                    translateX: this.animatedPositionX,
                }, {
                    translateY: this.animatedPositionY,
                }],
        };
        return (React.createElement(View, Object.assign({ style: [styles.container, { width: this.props.cropWidth, height: this.props.cropHeight, backgroundColor: '#000' }] }, this.imagePanResponder.panHandlers),
            React.createElement(Animated.View, { style: animateConf },
                React.createElement(View, { onLayout: this.handleLayout, style: { width: this.props.imageWidth, height: this.props.imageHeight } }, this.props.children))));
    }
}
ImageViewer.defaultProps = new Props();
//# sourceMappingURL=index.js.map