可縮放圖像與捏到變焦

我試圖在我的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

可縮放圖像與捏到變焦

回答

相關問題