2

我正在构建一个反应原生应用程序，用户应该能够在饼图周围移动调整器以调整饼图的开始和结束角度。我正在使用 3 个 panResponder 并使用 /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,
        },
        ]});
      }



    }

'''

4

0 回答 0