Question

我用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在视图中居中，您可以提供任何公式来帮助转换坐标。谢谢！

沿SVG路径进行本机轨迹图形跟踪

0 个答案: