RenderCap circle clips at the top of the circle, even with padding

Aperta
#218 7 commenti 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react-native
Ambito
mobile-dev

Direzione di ricerca

Riproduci il problema con l’esempio AnimatedCircularProgress fornito, in particolare renderCap con padding e un cap al centro del semicerchio. Inizia leggendo l’implementazione del componente che gestisce renderCap e padding; il lavoro è completato quando il cerchio del cap non viene più ritagliato nella posizione centrale, mantenendo il comportamento all’inizio e alla fine.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

First of all, incredible library! SO easy to use!

My issues is whenever I render a cap and then add some padding directly to the component, the cap circle is clipped off. The progress bar is a semi circle and when the cap is rendered either at the beginning, end, or middle, it would clip when the padding prop wasn't being used. After adding padding, it stopped clipping at the beginning and end but not the middle.

Am I perhaps missing something?

Here's some code!

 <AnimatedCircularProgress
        size={350}
        width={13}
        fill={fillAmount()}
        tintColor={Colors.PRIMARY_WHITE}
        onAnimationComplete={() => console.log('onAnimationComplete')}
        backgroundColor="#96CBDF"
        arcSweepAngle={180}
        renderCap={({ center }) => (
          <Circle
            cx={center.x}
            cy={center.y}
            r="13"
            fill={Colors.PRIMARY_WHITE}
          />
        )}
        padding={10}
        rotation={-90}>
        {renderFillAmount}
      </AnimatedCircularProgress>

Here's some screenshots!
Padding fixed this clipping issue ~
Screen Shot 2019-11-08 at 2 54 26 PM

But not this one :( ~

Screen Shot 2019-11-08 at 2 54 34 PM

Lingua principale
JavaScript
Stelle
2.2k
Fork
418
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di bartgryszko/react-native-circular-progress

Tutte le issue di bartgryszko/react-native-circular-progress

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.