react-native--手绘直线（手势）_react 画直线-优快云博客

本文链接：https://blog.youkuaiyun.com/tiem_erhu/article/details/53518213

本文介绍如何在React Native中实现一个SinglePointAnim组件，该组件能够根据用户的触摸手势在屏幕上动态绘制直线，起点固定在屏幕中心，终点跟随手指移动，结合了手势识别和动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
    }
});