React Native динамически регулируемая круговая диаграмма

Question

Я создаю собственное приложение для реагирования, в котором пользователь должен иметь возможность перемещать регулятор по круговой диаграмме, чтобы настроить начальный и конечный углы секторов.Я использую 3 panResponders и использовал идею / users / 681830 / val:

реагировать на анимацию преобразования собственного круга

Я рассчитываю кратчайшее расстояние долюбой из 36 снимков затем устанавливает анимированное значение на эту точку, однако это супер неэффективно и запаздывает.Кто-нибудь может предложить более эффективное решение?

'' '

this._panResponder1 = PanResponder.create(
  {
    onStartShouldSetPanResponder: (evt, gesture) =>true,
    onPanResponderMove: (evt, gesture) => {



      //we need the distance between the points and get the index of the minimum distance
      distances = [];
      for(var i = 0; i < 36; i++){
        var a = this.outputRangeX[i] - gesture.moveX;
        var b = this.outputRangeY[i] - gesture.moveY + 120;
        distances.push(Math.sqrt(a*a + b*b));
      }


      var minInd = distances.indexOf(Math.min(...distances));
      this.setState({indexOfAdj1 : minInd});
      this.adj1Anim.setValue((1/36)* minInd);





      var isPos1 = minInd/36;
      var isPos2 = (minInd)/36;
      if(minInd>24){
        isPos1 = -1 * ((36-minInd)/36);
        isPos2 = minInd/36;
        this.setState({data: [
          {
            number: 1,
            startAngle: isPos1* Math.PI * 2,
            endAngle: this.state.data[0].endAngle,
        },
        {
            number: 30,
            startAngle: this.state.data[1].startAngle,
            endAngle: this.state.data[1].endAngle,
        },
        {
            number: 1,
            startAngle: this.state.data[1].endAngle,
            endAngle: isPos2* Math.PI * 2,
        },
        ]});
      }else{
        this.setState({data: [
          {
            number: 1,
            startAngle: isPos1* Math.PI * 2,
            endAngle: this.state.data[0].endAngle,
        },
        {
            number: 30,
            startAngle: this.state.data[1].startAngle,
            endAngle: this.state.data[1].endAngle,
        },
        {
            number: 1,
            startAngle: -((Math.PI * 2)-this.state.data[1].endAngle),
            endAngle: isPos2* Math.PI * 2,
        },
        ]});
      }



    }

' ''