89 lines
2.1 KiB
JavaScript
89 lines
2.1 KiB
JavaScript
|
import React, { Component } from 'react'
|
||
|
|
import { View, PanResponder, GestureResponderEvent } from 'react-native'
|
||
|
|
import Svg, {
|
||
|
|
Circle,
|
||
|
|
Ellipse,
|
||
|
|
G,
|
||
|
|
LinearGradient,
|
||
|
|
RadialGradient,
|
||
|
|
Line,
|
||
|
|
Path,
|
||
|
|
Polygon,
|
||
|
|
Polyline,
|
||
|
|
Rect,
|
||
|
|
Symbol,
|
||
|
|
Use,
|
||
|
|
Defs,
|
||
|
|
Stop
|
||
|
|
} from 'react-native-svg';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export default class Foo extends Component {
|
||
|
|
|
||
|
|
panResponder = null;
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
this.state = { x: 200, y: 200, initX: 0, initY: 0 }
|
||
|
|
|
||
|
|
this.panResponder = PanResponder.create({
|
||
|
|
onStartShouldSetPanResponder: (evt, gestureState) => true,
|
||
|
|
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
|
||
|
|
onMoveShouldSetPanResponder: (evt, gestureState) => true,
|
||
|
|
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
|
||
|
|
onPanResponderGrant: () => {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
onPanResponderStart: (evt, gestureState) => {
|
||
|
|
console.log("start", gestureState);
|
||
|
|
this.setState({ initX: this.state.x, initY: this.state.y });
|
||
|
|
},
|
||
|
|
|
||
|
|
onPanResponderMove: (evt, gs) => {
|
||
|
|
//console.log(gs.dx + ' ' + gs.dy)
|
||
|
|
|
||
|
|
const newX = this.state.initX + gs.dx;
|
||
|
|
const newY = this.state.initY + gs.dy;
|
||
|
|
|
||
|
|
this.setState({ x: newX, y: newY });
|
||
|
|
},
|
||
|
|
onPanResponderTerminationRequest: (evt, gestureState) => true,
|
||
|
|
|
||
|
|
onPanResponderRelease: (evt, gs) => {
|
||
|
|
console.log('Release ' + gs.dx + ' ' + gs.dy);
|
||
|
|
//this.setState({ x: this.state.x, y: 0 });
|
||
|
|
},
|
||
|
|
onShouldBlockNativeResponder: (evt, gestureState) => {
|
||
|
|
// Returns whether this component should block native components from becoming
|
||
|
|
// the JS responder. Returns true by default. Is currently only supported on
|
||
|
|
// android.
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Svg height="500" width="500">
|
||
|
|
<Circle
|
||
|
|
{...this.panResponder.panHandlers}
|
||
|
|
x={this.state.x}
|
||
|
|
y={this.state.y}
|
||
|
|
cx="50"
|
||
|
|
cy="50"
|
||
|
|
r="20"
|
||
|
|
stroke="blue"
|
||
|
|
strokeWidth="3.5"
|
||
|
|
fill="white" />
|
||
|
|
</Svg>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|