我用react-native-svg创建了一条路径。我在每个段的端点上画了一个圆圈。我希望能够检测用户是否用手指正确地跟踪了路径。如果我可以检查整个路径,那就太好了,但是至少我希望能够检查用户是否已通过所有端点圆。
这是我的代码的简化版本:
constructor(props) {
super(props);
this.PanResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (e, gesture) => {
},
onPanResponderRelease: (e, gesture) => {
}
});
}
render() {
return (
<View style={styles.container}>
<Svg width="300" height="300" {...this.PanResponder.panHandlers}>
<Path
d="M150 40 C 180 40, 200 60, 210 80
S 225 120, 210 160"
fill="none"
stroke="#C51162"
strokeWidth="16"
/>
{this.renderFigure8Points()}
<Circle
cx="150"
cy="40"
r="12"
stroke="#000"
strokeWidth="10"
fill="#000"
/>
<Circle
cx="210"
cy="80"
r="12"
stroke="#000"
strokeWidth="10"
fill="#000"
/>
<Circle
cx="210"
cy="60"
r="12"
stroke="#000"
strokeWidth="10"
fill="#000"
/>
</Svg>
</View>
);}
现在,我可以获得PanResponder坐标,并且我想我可以做一些数学运算来转换端点的SVG坐标以匹配屏幕坐标,从而找出用户是否在圆圈内触摸。这是解决此问题的好方法吗?还有其他想法吗?如果使用PanResponder,只要SVG在视图中居中,您可以提供任何公式来帮助转换坐标。谢谢!