Javascript 如何在react native中制作圆形滑块

我想添加一个类似范围的组件。但实际上是圆形的，我不知道怎么做。 你能给我指一些帮助吗

例如，我想要什么：

---

酷项目。一定要分享你所创造的。我想其他人也会觉得这很有用。不幸的是，我还没有看到太多类似的东西。如果我这样做的话，我会先看看jQuery插件是如何做到这一点的。类似的东西可以帮助您绘制形状。但愿我能帮上忙。祝你好运

我最近一直在使用react native svg，我认为它非常棒——svg和react是极客天堂的一对组合，非常适合创建自定义UI，而无需下载到本机绘图代码

下面是一个小的

循环滑翔器
组件，它实现了您上面描述的功能：

import React,{Component} from 'react'
import {PanResponder,View} from 'react-native'
import Svg,{Path,Circle,G,Text} from 'react-native-svg'

class CircularSlider extends Component {
  constructor(props){
    super(props)
    this.handlePanResponderMove = this.handlePanResponderMove.bind(this)
    this.cartesianToPolar = this.cartesianToPolar.bind(this)
    this.polarToCartesian = this.polarToCartesian.bind(this)
    const {width,height} = props
    const smallestSide = (Math.min(width,height))
    this.state = {
      cx: width/2,
      cy: height/2,
      r: (smallestSide/2)*0.85
    }
  }
  componentWillMount = () => {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: this.handlePanResponderMove
    })
  }
  polarToCartesian(angle){
    const {cx,cy,r} = this.state
        , a = (angle-270) * Math.PI / 180.0
        , x = cx + (r * Math.cos(a))
        , y = cy + (r * Math.sin(a))
    return {x,y}
  }
  cartesianToPolar(x,y){
    const {cx,cy} = this.state
    return Math.round((Math.atan((y-cy)/(x-cx)))/(Math.PI/180)+((x>cx) ? 270 : 90))
  }
  handlePanResponderMove({nativeEvent:{locationX,locationY}}){
    this.props.onValueChange(this.cartesianToPolar(locationX,locationY))
  }
  render(){
    const {width,height,value,meterColor,textColor,onValueChange} = this.props
        , {cx,cy,r} = this.state
        , startCoord = this.polarToCartesian(0)
        , endCoord = this.polarToCartesian(value)
    return (
      <Svg onLayout={this.onLayout} width={width} height={height}>
        <Circle cx={cx} cy={cy} r={r} stroke='#eee' strokeWidth={0.5} fill='none'/>
        <Path stroke={meterColor} strokeWidth={5} fill='none'
          d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}/>
        <G x={endCoord.x-7.5} y={endCoord.y-7.5}>
          <Circle cx={7.5} cy={7.5} r={10} fill={meterColor} {...this._panResponder.panHandlers}/>
          <Text key={value+''} x={7.5} y={1} fontSize={10} fill={textColor} textAnchor="middle">{value+''}</Text>
        </G>
      </Svg>
    )
  }
}

export default CircularSlider

import React，{Component}来自“React”
从“react native”导入{PanResponder，View}
从“react native Svg”导入Svg，{Path，Circle，G，Text}
类循环滑块扩展组件{
建造师（道具）{
超级（道具）
this.handlePanResponderMove=this.handlePanResponderMove.bind（this）
this.cartesianToPolar=this.cartesianToPolar.bind（this）
this.polarToCartesian=this.polarToCartesian.bind（this）
常数{width，height}=props
const smallestSide=（数学最小值（宽度、高度））
此.state={
cx：宽度/2，
cy：高度/2，
r：（最小面/2）*0.85
}
}
组件将装入=（）=>{
这是.\u panResponder=panResponder.create({
onStartShouldSetPanResponder:（）=>true，
onMoveShouldSetPanResponder:（）=>true，
onPanResponderMove:this.handlePanResponderMove
})
}
极笛卡尔（角）{
const{cx，cy，r}=this.state
，a=（角度-270）*Math.PI/180.0
，x=cx+（r*Math.cos（a））
，y=cy+（r*Math.sin（a））
返回{x，y}
}
笛卡尔南极（x，y）{
const{cx，cy}=this.state
返回Math.round（（Math.atan（（y-cy）/（x-cx））/（Math.PI/180）+（x>cx）？270:90））
}
handlePanResponderMove（{nativeEvent:{locationX，locationY}}）{
this.props.onValueChange（this.cartesianToPolar（locationX，locationY））
}
render（）{
const{width，height，value，meterColor，textColor，onValueChange}=this.props
，{cx，cy，r}=this.state
，startCoord=this.polarToCartesian（0）
，endCoord=this.polarToCartesian（值）
返回(
180？1:0}1${endCoord.x}${endCoord.y}`}/>
{value+'''}
)
}
}
导出默认循环滑块

完整的示例项目代码在github中

这只是一个简单的原型，让您了解这个想法，但下面是它的外观（两个圆形滑块实例，绝对定位，因此它们具有相同的中心）：

非常感谢，为我节省了很多时间。@KD在github上查看这个非常好的实现，做得很好！如何编辑此代码以使滑块从顶部而不是底部开始？