react-native--手绘直线(手势)
Posted time_iter
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native--手绘直线(手势)相关的知识,希望对你有一定的参考价值。
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
);
以上是关于react-native--手绘直线(手势)的主要内容,如果未能解决你的问题,请参考以下文章