写一个图片预览器（react-native）,温习一下初中数学

statistics

需求很简单：

1. 可以放大任意一处我想放大的地方
2. 可以移动，查看任意图片细节
3. 支持网络图片和本地图片

技术实现

一、加载图片和获取图片尺寸

二、设置尺寸、放大到刚好满屏、居中

1. react-native图片transform的缩放的中心点在图片的中心，因此，把图片先发居中就好
2. 比较图片的长宽比和屏幕的宽高比，如果是图片比较宽那么就横向满屏，如果比较高就纵向满屏，如下图：
   

/*
    * center and zoom to fit the window
    * @ _width: the picture width
    * @ _height: the picture height
    * */
    center(_width,_height){
        let {width,height} = Dimensions.get('window'),rateImage = _width/_height,rateWindow = width/height,top,left,scale
        if (rateImage > rateWindow) {
            scale = width/_width
        } else {
            scale = height/_height
        }
        top = (height - _height)/2
        left = (width - _width)/2
        this.setState({
            left,width:_width,height: _height,scale,rate: scale
        })
    }

三、准备移动和缩放动作

1.设置两个变量来记录（上一次手指的和缩放的）状态

this._touches = [
            {},{}
        ]
        this._zoom = undefined

2.每次动作结束之后清除状态

onPanResponderRelease: (evt,gestureState) => {
                // reset
                this._touches = [
                    {},{}
                ]
                this._zoom = undefined
            }

3.每次开始触摸的时候的时候记录状态

// touche start
onPanResponderGrant:(evt,gestureState) => {
    // mark touches info
    for (let x in this._touches) {
    if (evt.nativeEvent.touches[x]) {
        this._touches[x].x = evt.nativeEvent.touches[x].pageX
        this._touches[x].y = evt.nativeEvent.touches[x].pageY
        this._touches[x].identifier = evt.nativeEvent.touches[x].identifier
        }
    }
},

4.每次移动的时候，如果没有记录状态就记录状态，如果有记录就开始做动作啦↓↓↓

四、移动图片

1.这个很简单，只要图片跟着手指动就可以了，因为缩放变换的中心是图片的中心，所以只需要简单的改变left 和 top 就可以了，

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!