可缩放图像与捏到变焦

我试图在我的React本机应用程序（Android）中显示图像，我想给用户放大和缩小该图像的能力。这也需要图像在放大后可以滚动。可缩放图像与捏到变焦

我该怎么办？

我试图使用ScrollView来显示更大的图像，但在Android上它可以垂直或水平滚动，而不是两种方式。即使在那里工作也有一个问题，使pinch-to-zoom工作。

据我所知，我需要在自定义视图上使用PanResponder来缩放图像并相应地放置图像。有更容易的方法吗？

来源

2016-04-02 Leonti

你可以看出来为Android双指缩放图片浏览库并将其映射到一个反应天然成分。 – whitep4nther

我有同样的问题，@Leonti，你解决了吗？ – savelichalex

@savelichalex是的，我不得不写我自己的组件，请参阅答案 – Leonti

我结束了滚动我自己的ZoomableImage组件。到目前为止，它一直工作得非常好，这里是代码：

import React, {Component, PropTypes} from 'react'; 
 
import { Text, View, PanResponder, Image } from 'react-native'; 
 

 
function calcDistance(x1, y1, x2, y2) { 
 
    let dx = Math.abs(x1 - x2) 
 
    let dy = Math.abs(y1 - y2) 
 
    return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); 
 
} 
 

 
function calcCenter(x1, y1, x2, y2) { 
 

 
    function middle(p1, p2) { 
 
     return p1 > p2 ? p1 - (p1 - p2)/2 : p2 - (p2 - p1)/2; 
 
    } 
 

 
    return { 
 
     x: middle(x1, x2), 
 
     y: middle(y1, y2), 
 
    }; 
 
} 
 

 
function maxOffset(offset, windowDimension, imageDimension) { 
 
    let max = windowDimension - imageDimension; 
 
    if (max >= 0) { 
 
     return 0; 
 
    } 
 
    return offset < max ? max : offset; 
 
} 
 

 
function calcOffsetByZoom(width, height, imageWidth, imageHeight, zoom) { 
 
    let xDiff = imageWidth * zoom - width; 
 
    let yDiff = imageHeight * zoom - height; 
 
    return { 
 
     left: -xDiff/2, 
 
     top: -yDiff/2, 
 
    } 
 
} 
 

 
class ZoomableImage extends Component { 
 

 
    constructor(props) { 
 
     super(props); 
 

 
     this._onLayout = this._onLayout.bind(this); 
 

 
     this.state = { 
 
      zoom: null, 
 
      minZoom: null, 
 
      layoutKnown: false, 
 
      isZooming: false, 
 
      isMoving: false, 
 
      initialDistance: null, 
 
      initialX: null, 
 
      initalY: null, 
 
      offsetTop: 0, 
 
      offsetLeft: 0, 
 
      initialTop: 0, 
 
      initialLeft: 0, 
 
      initialTopWithoutZoom: 0, 
 
      initialLeftWithoutZoom: 0, 
 
      initialZoom: 1, 
 
      top: 0, 
 
      left: 0 
 
     } 
 
    } 
 

 
    processPinch(x1, y1, x2, y2) { 
 
     let distance = calcDistance(x1, y1, x2, y2); 
 
     let center = calcCenter(x1, y1, x2, y2); 
 

 
     if (!this.state.isZooming) { 
 
      let offsetByZoom = calcOffsetByZoom(this.state.width, this.state.height, 
 
          this.props.imageWidth, this.props.imageHeight, this.state.zoom); 
 
      this.setState({ 
 
       isZooming: true, 
 
       initialDistance: distance, 
 
       initialX: center.x, 
 
       initialY: center.y, 
 
       initialTop: this.state.top, 
 
       initialLeft: this.state.left, 
 
       initialZoom: this.state.zoom, 
 
       initialTopWithoutZoom: this.state.top - offsetByZoom.top, 
 
       initialLeftWithoutZoom: this.state.left - offsetByZoom.left, 
 
      }); 
 

 
     } else { 
 
      let touchZoom = distance/this.state.initialDistance; 
 
      let zoom = touchZoom * this.state.initialZoom > this.state.minZoom 
 
       ? touchZoom * this.state.initialZoom : this.state.minZoom; 
 

 
      let offsetByZoom = calcOffsetByZoom(this.state.width, this.state.height, 
 
       this.props.imageWidth, this.props.imageHeight, zoom); 
 
      let left = (this.state.initialLeftWithoutZoom * touchZoom) + offsetByZoom.left; 
 
      let top = (this.state.initialTopWithoutZoom * touchZoom) + offsetByZoom.top; 
 

 
      this.setState({ 
 
       zoom: zoom, 
 
       left: 0, 
 
       top: 0, 
 
       left: left > 0 ? 0 : maxOffset(left, this.state.width, this.props.imageWidth * zoom), 
 
       top: top > 0 ? 0 : maxOffset(top, this.state.height, this.props.imageHeight * zoom), 
 
      }); 
 
     } 
 
    } 
 

 
    processTouch(x, y) { 
 

 
     if (!this.state.isMoving) { 
 
      this.setState({ 
 
       isMoving: true, 
 
       initialX: x, 
 
       initialY: y, 
 
       initialTop: this.state.top, 
 
       initialLeft: this.state.left, 
 
      }); 
 
     } else { 
 
      let left = this.state.initialLeft + x - this.state.initialX; 
 
      let top = this.state.initialTop + y - this.state.initialY; 
 

 
      this.setState({ 
 
       left: left > 0 ? 0 : maxOffset(left, this.state.width, this.props.imageWidth * this.state.zoom), 
 
       top: top > 0 ? 0 : maxOffset(top, this.state.height, this.props.imageHeight * this.state.zoom), 
 
      }); 
 
     } 
 
    } 
 

 
    _onLayout(event) { 
 
     let layout = event.nativeEvent.layout; 
 

 
     if (layout.width === this.state.width 
 
      && layout.height === this.state.height) { 
 
      return; 
 
     } 
 

 
     let zoom = layout.width/this.props.imageWidth; 
 

 
     let offsetTop = layout.height > this.props.imageHeight * zoom ? 
 
      (layout.height - this.props.imageHeight * zoom)/2 
 
      : 0; 
 

 
     this.setState({ 
 
      layoutKnown: true, 
 
      width: layout.width, 
 
      height: layout.height, 
 
      zoom: zoom, 
 
      offsetTop: offsetTop, 
 
      minZoom: zoom 
 
     }); 
 
    } 
 

 
    componentWillMount() { 
 
     this._panResponder = PanResponder.create({ 
 
      onStartShouldSetPanResponder: (evt, gestureState) => true, 
 
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true, 
 
      onMoveShouldSetPanResponder: (evt, gestureState) => true, 
 
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, 
 
      onPanResponderGrant: (evt, gestureState) => {}, 
 
      onPanResponderMove: (evt, gestureState) => { 
 
       let touches = evt.nativeEvent.touches; 
 
       if (touches.length == 2) { 
 
        let touch1 = touches[0]; 
 
        let touch2 = touches[1]; 
 

 
        this.processPinch(touches[0].pageX, touches[0].pageY, 
 
         touches[1].pageX, touches[1].pageY); 
 
       } else if (touches.length == 1 && !this.state.isZooming) { 
 
        this.processTouch(touches[0].pageX, touches[0].pageY); 
 
       } 
 
      }, 
 

 
      onPanResponderTerminationRequest: (evt, gestureState) => true, 
 
      onPanResponderRelease: (evt, gestureState) => { 
 
       this.setState({ 
 
        isZooming: false, 
 
        isMoving: false 
 
       }); 
 
      }, 
 
      onPanResponderTerminate: (evt, gestureState) => {}, 
 
      onShouldBlockNativeResponder: (evt, gestureState) => true, 
 
     }); 
 
    } 
 

 
    render() { 
 
     return (
 
      <View 
 
      style={this.props.style} 
 
      {...this._panResponder.panHandlers} 
 
      onLayout={this._onLayout}> 
 
      <Image style={{ 
 
        position: 'absolute', 
 
        top: this.state.offsetTop + this.state.top, 
 
        left: this.state.offsetLeft + this.state.left, 
 
        width: this.props.imageWidth * this.state.zoom, 
 
        height: this.props.imageHeight * this.state.zoom 
 
      }} 
 
      source={this.props.source} /> 
 
      </View> 
 
     ); 
 
    } 
 

 
} 
 

 
ZoomableImage.propTypes = { 
 
    imageWidth: PropTypes.number.isRequired, 
 
    imageHeight: PropTypes.number.isRequired, 
 
    source: PropTypes.object.isRequired, 
 
}; 
 
export default ZoomableImage;

来源

2016-05-26 01:01:47 Leonti

这正是我正在寻找的。谢谢！ :) –

谢谢！也许你应该从github上创建一个Component，我们（人）会改进它。 –

嗨，我无法让这个答案在最新的RN 0.46 /世博会中工作。对于我来说，当图像上有两个手指时，“onPanResponderMove”永远不会被触发。任何想法？你能否发布一个展示如何正确使用你的代码的Expo/CRNA应用程序？根据这个问题，我不是一个人有这个问题：https://github.com/stoffern/react-native-image-cropper/issues/8 –

现在有一个更简单的方法。只是做一个ScollView与minimumZoomScale和maximumZoomScale：

import React, { Component } from 'react'; 
import { AppRegistry, ScrollView, Text } from 'react-native'; 

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component { 
    render() { 
     return (
     <ScrollView minimumZoomScale={1} maximumZoomScale={5} > 
      <Text style={{fontSize:96}}>Scroll me plz</Text> 
      <Text style={{fontSize:96}}>If you like</Text> 
      <Text style={{fontSize:96}}>Scrolling down</Text> 
      <Text style={{fontSize:96}}>What's the best</Text> 
      <Text style={{fontSize:96}}>Framework around?</Text> 
      <Text style={{fontSize:80}}>React Native</Text> 
     </ScrollView> 
    ); 
    } 
} 

// skip these lines if using Create React Native App 
AppRegistry.registerComponent(
    'AwesomeProject', 
() => IScrolledDownAndWhatHappenedNextShockedMe);

来源

2017-12-31 08:20:15

可缩放图像与捏到变焦

回答

相关问题