反应原生滚动方向圆

Question

您好，我如何拖动图像圆弧（圆）线。我关注了一个主题，他们使用PanResponder，但只能自由拖动。我只是在拖动时才接受图像遵循如下的arc（circle）线： example

这是可使代码自由拖动的代码。我知道我们可以计算translateX：this.state.pan.x和translateY：this.state.pan.y，但不知道如何执行：

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  PanResponder,
  Animated,
  Easing,
  Dimensions
} from 'react-native';

export default class Viewport extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showDraggable: true,
      dropZoneValues: null,
      pan: new Animated.ValueXY(0)
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null, {
          dx: this.state.pan.x,
          dy: this.state.pan.y
        },

      ],{listener: (event, gestureState) => console.log( event.nativeEvent)}),
      onPanResponderRelease: (e, gesture) => {
        Animated.spring(this.state.pan, {
          toValue: {
            x: 0,
            y: 0
          }
        }).start();
      }
    });
  }

  getStyle() {
    return [
              styles.circle,
              {
                transform: [
                  {
                    translateX: this.state.pan.x
                  }

                ]
              }
            ];
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        {this.renderDraggable()}
      </View>
    );
  }

  renderDraggable() {
    if (this.state.showDraggable) {
      return (
        <View style={styles.draggableContainer}>
          <Animated.View {...this.panResponder.panHandlers} style={this.getStyle()}>
          </Animated.View>
        </View>
      );
    }
  }
}

let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
let styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    textAlign: 'center',
    color: '#fff'
  },
  draggableContainer: {
    position: 'absolute',
    top: Window.height / 2 - CIRCLE_RADIUS,
    left: Window.width / 2 - CIRCLE_RADIUS
  },
  circle: {
    backgroundColor: '#1abc9c',
    width: CIRCLE_RADIUS * 2,
    height: CIRCLE_RADIUS * 2,
    borderRadius: CIRCLE_RADIUS
  }
});