react-native--手绘直线（手势）

Posted 2022-11-13 time_iter

SinglePointAnim是可根据手指点击或者移动的位置，绘制直线的终点，起始点为手机屏幕的正中心，结合手势的一个动画。

import React,Component from 'react'
import  
    View,
    ART,
    StyleSheet,
    Dimensions,
    Text,
    PanResponder,
    Animated,
 from  'react-native'


var 
    Surface,
    Shape,
    Path
 = ART;

var 
    height: deviceHeight,
    width: deviceWidth
 = Dimensions.get('window');

var path;

export  default  class SinglePointAnim extends Component
    constructor(props)
        super(props);
        this.state = 
            changeX: 30,
            changeY: 30,
        
    

    componentWillMount() 
        this._panResponder=PanResponder.create(
           onStartShouldSetPanResponder:this._handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder:this._handleMoveShouldSetPanResponder,
            onPanResponderGrant:this._handlePanResponderGrant,
            onPanResponderMove:this._onPanResponderMove,
            onPanResponderRelease:this._handlePanResponderEnd,
            onPanResponderTerminate:this._handlePanResponderEnd,
        );
    

    _handleStartShouldSetPanResponder=(e,gestureState)=>
        return true;
    

    _handleMoveShouldSetPanResponder=(e,gestureState)=>
        return true;
    


    _handlePanResponderGrant=(e,gestureState)=>
        this.setState(
            changeX:e.nativeEvent.pageX,
            changeY:e.nativeEvent.pageY,
        )
        console.log(e.nativeEvent.pageY+"e._handlePanResponderGrant.pageY"+e.nativeEvent.pageX);
    

    _onPanResponderMove=(e,gestureState)=>
        this.setState(
            changeX:e.nativeEvent.pageX,
            changeY:e.nativeEvent.pageY,
        )
        console.log(e.nativeEvent.pageY+"e.nativeEvent.pageY"+e.nativeEvent.pageX);
    

    _handlePanResponderEnd=()=>

    


  render()
        path = Path()
        .moveTo(deviceWidth/2,deviceHeight/2)
        .lineTo(this.state.changeX,this.state.changeY);

      return(
         <View style=styles.container
             ...this._panResponder.panHandlers>
             <View
                   style=styles.container>
                 <Surface width=deviceWidth height=deviceHeight>
                     <Shape d=path stroke="#000000" strokeWidth=1 />
                 </Surface>
             </View>
      </View>
      );
  




var styles = StyleSheet.create(
    container: 
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    ,
    box: 
        width: 100,
        height: 100
    
);