Reaktif-yerel olarak nasıl dairesel bir kaydırıcı yapılır

Question

Benzer bir aralık bileşeni eklemek istiyorum. Ama aslında dairesel olan ve nasıl yapılacağını bilmiyorum. Bana biraz yardım edebilir misiniz lütfen? istediğim şeyin

Te örnek:

Answer 1

serin projesi. yarattığınız şeyleri paylaştığınızdan emin olun. Bence başkaları da bunu yararlı bulacaktır. Maalesef henüz çok beğenmedim. Eğer bunu yapıyor olsaydım, jQuery eklentilerinin bunu nasıl yaptığına bakarak başlarım. https://github.com/magicismight/react-native-svg gibi bir şey, şekilleri çizmenize yardımcı olabilir. Keşke daha fazla yardımcı olabilirdim. İyi şanslar!

Answer 2

Son zamanlarda react-native-svg ile çalışıyorum ve bunun harika olduğunu düşünüyorum - SVG ve React, geek-heaven'de yapılan bir eşleme, yalnızca yerel kullanıcılara bırakmaya gerek kalmadan özel UI'ler oluşturmak için mükemmel kodu.

Burada yukarıda tanımladığı uygulayan bu biraz CircularSlider bileşenidir:

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 

tam örnek proje kodu github here içindedir.

Bu size fikir vermek için hızlı prototip sadece, ama burada o (aynı merkezlere sahip böylece mutlak olarak konumlanmış CircularSlider iki örneğini,) nasıl göründüğü: Kaydedilen