Question

我已经成功地将各种部分记录的代码片段（主要是here）中的圆形滑块组件组合在一起。我整理了一下东西，现在有了一些可以用作可滑动控制拨盘的东西，在其中可以为可滑动区域设置任意最大角度：

但是，我想要更大的灵活性-我也希望能够选择任意的起始角度。例如，这将使我能够创建类似于汽车仪表盘控件的表盘。下面显示的是我尝试使其工作的尝试。如您所见，这会弄乱触摸处理：

很明显，我需要补偿触摸处理中的旋转。

我通过在视图中封装SVG组件（包含此处显示的所有图形和文本）来实现所有这些目的。对于我遇到的示例，我旋转了容器视图（请注意也将旋转值传递给文本，以便将文本旋转回垂直位置。）

打字稿组件：

import React, { Component } from 'react';
import ReactNative, { PanResponder, View, Dimensions } from 'react-native';
import Svg, {
  Path,
  Circle,
  G,
  Text,
  Defs,
  LinearGradient,
  Stop,
  Linecap
} from 'react-native-svg';

interface Props {
  value: number;
  dialRadius: number;
  btnRadius: number;
  startCoord: number;
  startGradient: string;
  endGradient: string;
  dialWidth: number;
  cap: Linecap;
  dialBgWidth: number;
  backgroundColor: string;
  textSize: number;
  textColor: string;
  showValue: boolean;
  btnFill: string;
  maxAngle: number;
  rotationOffset: number;
  onValueChange (angle: number): void;
}

interface State {
  angle: number;
  xCenter: number;
  yCenter: number;
}

export default class CircularSlider extends Component<Props, State> {
  static defaultProps = {
    btnRadius: 10,
    dialRadius: 80,
    dialWidth: 20,
    textColor: 'white',
    textSize: 30,
    value: 0,
    showValue: true,
    startGradient: '#12D8FA',
    endGradient: '#12D8FA',
    backgroundColor: 'white',
    startCoord: 0,
    cap: 'butt',
    btnFill: 'transparent',
    dialBgWidth: 20,
    maxAngle: 360,
    onValueChange: null,
    rotationOffset: 0
  };

  _panResponder: any;
  circleSlider: any;
  container: any;

  constructor (props: any) {
    super(props);

    this.state = {
      angle: this.props.value,
      xCenter: 0,
      yCenter: 0
    };

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e, gs) => true,
      onStartShouldSetPanResponderCapture: (e, gs) => true,
      onMoveShouldSetPanResponder: (e, gs) => true,
      onMoveShouldSetPanResponderCapture: (e, gs) => true,
      onPanResponderMove: (e, gs) => {
        let xOrigin =
          this.state.xCenter - (this.props.dialRadius + this.props.btnRadius);
        let yOrigin =
          this.state.yCenter - (this.props.dialRadius + this.props.btnRadius);
        let a = this.cartesianToPolar(gs.moveX - xOrigin, gs.moveY - yOrigin);
        this.setState({ angle: Math.min(a, this.props.maxAngle) });
      }
    });
  }

  polarToCartesian (angle: number) {
    let r = this.props.dialRadius;
    let hC = this.props.dialRadius + this.props.btnRadius;
    let a = ((angle - (90)) * Math.PI) / (180.0) ;

    let x = hC + r * Math.cos(a);
    let y = hC + r * Math.sin(a);
    return { x, y };
  }

  cartesianToPolar (x: number, y: number) {
    let hC = this.props.dialRadius + this.props.btnRadius;
    if (x === 0) {
      return y > hC ? 0 : 180;
    } else if (y === 0) {
      return x > hC ? 90 : 270;
    } else {
      return (
        Math.round((Math.atan((y - hC) / (x - hC)) * 180) / Math.PI) +
        (x >= hC ? 90 : 270)
      );
    }
  }

  handleMeasure = (ox: number, oy: number, width: number, height: number, px: number, py: number) => {
    this.setState({
      xCenter: px + (this.props.dialRadius + this.props.btnRadius),
      yCenter: py + (this.props.dialRadius + this.props.btnRadius)
    });
  }

  handleOnLayout = () => {
    this.circleSlider.measure(this.handleMeasure);
  }

  render () {
    let {
      btnRadius,
      dialRadius,
      rotationOffset,
      textSize
    } = this.props;
    let width = (dialRadius + btnRadius) * 2;
    let startCoord = this.polarToCartesian(this.props.startCoord);
    let endCoord = this.polarToCartesian(this.state.angle);
    let maxAngle = this.polarToCartesian(this.props.maxAngle);

    return (
      <View
        ref={r => this.container = r }
        style={{ flex: 1, margin: 50, transform: [{ rotate: `${rotationOffset}deg` }] }}
      >
        <Svg
          onLayout={this.handleOnLayout}
          ref={r => this.circleSlider = r}
          width={width}
          height={width}
        >
          <Defs>
            <LinearGradient id='gradient1' x1='0%' y1='0%' x2='100%' y2='0%'>
              <Stop offset='0%' stopColor={this.props.startGradient} />
              <Stop offset='100%' stopColor={this.props.endGradient} />
            </LinearGradient>
          </Defs>
          <Text
              transform={`rotate(${-rotationOffset}, 90, 90)`} // compensate for rotated container
              x={width / 2}
              y={width / 2 + textSize / 4}
              fontSize={textSize}
              fill={this.props.textColor}
              textAnchor='middle'
            >
              {this.props.showValue &&
                this.props.onValueChange(this.state.angle) + ''}
            </Text>
          <G>
            <Path
              stroke={this.props.backgroundColor}
              strokeWidth={this.props.dialWidth}
              fill='none'
              strokeLinecap={this.props.cap}
              strokeLinejoin='round'
              d={`M${startCoord.x} ${startCoord.y} A ${dialRadius} ${dialRadius} 0 ${
                  (this.props.startCoord + 180) % 360 > (this.props.maxAngle) ? 0 : 1
                } 1 ${maxAngle.x} ${maxAngle.y}`}
            />
            <Path
              stroke={'url(#gradient1)'}
              strokeWidth={this.props.dialWidth}
              fill='none'
              strokeLinecap={this.props.cap}
              strokeLinejoin='round'
              d={`M${startCoord.x} ${startCoord.y} A ${dialRadius} ${dialRadius} 0 ${
                (this.props.startCoord + 180) % 360 > this.state.angle ? 0 : 1
              } 1 ${endCoord.x} ${endCoord.y}`}
            />
            <G x={endCoord.x - btnRadius} y={endCoord.y - btnRadius}>
              <Circle
                r={btnRadius}
                cx={btnRadius}
                cy={btnRadius}
                fill={this.props.btnFill}
                {...this._panResponder.panHandlers}
              />
            </G>
          </G>
        </Svg>
      </View>
    );
  }
}

该组件目前以这种方式使用： <CircularSlider rotationOffset={-135} maxAngle={270} onValueChange={(angle) => angle } />（或第一个gif示例不带偏移）。

我尝试过：

在插入PolarToCartesian（）函数之前先调整当前角度，但这确实很混乱，并且没有任何意义，至少我是这样做的。
使用this.container.measure(this.handleMeasure)而不是this.circleSlider.measure(this.handleMeasure)和this.circleSlider.measureLayout(ReactNative.findNodeHandle(this.container), this.handleMeasure)进行实验，并从handleMeasure中删除多余的参数px: number, py: number并读取偏移量（ox和oy），但这没有。根本不能做出正确的动作...

那么如何在触摸处理中补偿容器视图的旋转？还是有一种完全不同的方法来实现我所需的行为？

（顺便使用React Native 0.57.0和react-native-svg ^ 7.0.2）

Answer 1

我在正确的方向上调整了onPanResponderMove（）函数中的cartesianToPolar（）函数的角度，只是我没有考虑正确处理maxAngle（大约为0）。因此在onPanResponderMove（）中，我需要这个：

let a2 = 0;
if (a + this.props.rotationOffset > 0) {
  a2 = a - (360 + this.props.rotationOffset);
} else {
  a2 = a - this.props.rotationOffset;
}

this.setState({ angle: a2 > 0 ? Math.min(a2, this.props.maxAngle) : this.props.maxAngle });

我还从视图中删除了旋转变换，并将弧形路径旋转为一个组，而不是：

<G transform={`rotate(${this.props.rotationOffset} ${width / 2} ${width / 2})`}>
... my paths ... 
</G>

如何补偿圆形滑块组件中旋转的容器视图？

1 个答案: