Реагируйте на трассировку фигуры собственного трека по пути SVG

Я создал путь с реагировать-родной-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 центрируется в виде. Спасибо!

0 ответов

Другие вопросы по тегам