CapDrive
Guida all’uso

Circle

Disegna un cerchio o un arco perfetto all'interno dell'area disponibile, adatto per l'avanzamento circolare e le scale metriche. Il diametro assume il valore più piccolo tra larghezza e centro. startAngle e sweepAngle controllano l'intervallo di visualizzazione. Quando l'intero cerchio è chiuso, lo sfondo può essere riempito.

Esempio

function main() {
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={240}
      strokePosition="inside"
    />
  );
}

Utilizzo

  • Circle usa il lato minore e centra il cerchio: 160×100 produce diametro 100. startAngle/sweepAngle cambiano il contorno; transform modifica il risultato intero.
  • Angoli in gradi: 0 destra, 90 basso, sweep positivo orario. startAngle modulo 360, sweepAngle limitato a −360…360. Zero non disegna, ±360 chiude. wrap:360 solo per startAngle.
  • Ellipse e Arc usano tutta larghezza e altezza; uguali danno un cerchio. Gli archi parziali restano aperti senza unirsi al centro. background riempie solo un giro intero chiuso.

Proprietà

startAngle?number

Angolo iniziale in gradi, normalizzato modulo 360 durante il campionamento.

Esempio0
sweepAngle?number

Ampiezza in gradi, limitata a -360…360 durante il campionamento. I valori positivi seguono il senso orario; wrap non è supportato.

Esempio360
background?Paint

Riempimento di un cerchio o ellisse completi e chiusi. Ignorato per archi parziali.

EsempioHDR($env.dark ? "white" : "black")
stroke?Paint

Colore o gradiente del tratto; clear lo nasconde.

Esempio"clear"
lineWidth?number

Spessore del tratto in punti; 0 non disegna il tratto.

Esempio2
strokePosition?"inside" | "center" | "outside"

Posizione del tratto rispetto al contorno completo del cerchio o dell’ellisse. Valore predefinito: inside.

Esempio"inside"
lineCap?"round" | "butt" | "square"

Estremità: butt taglia, square prolunga in quadrato, round arrotonda.

Esempio"round"
dash?number[]

Lunghezze alternate di tratto e spazio in punti; array vuoto per linea continua.

Esempio[]
dashPhase?number

Spostamento del motivo tratteggiato in punti.

Esempio0
Proprietà comuni
width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"
height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"
x?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
y?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0
transform?ViewTransform

Trasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.

Esempio{rotation: 0}
opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1
clipped?boolean

Ritaglia il disegno oltre i limiti del View.

Esempiofalse
clip?"rectangle" | "ellipse"

Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.

Esempio"rectangle"
mask?View | null

View per la maschera alfa. Centrata senza modificare il layout; null disattiva la maschera.

Esempio<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordine tra elementi fratelli; valori più grandi appaiono davanti.

Esempio0
blur?number

Raggio della sfocatura in punti; 0 la disattiva.

Esempio4
innerShadow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

Esempio{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

Esempio{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Colore dell’ombra esterna.

EsempioHDR("black")
shadowOpacity?number

Opacità dell’ombra 0–1; 0 la nasconde.

Esempio0
shadowRadius?number

Raggio di sfocatura dell’ombra esterna in punti.

Esempio4
shadowX?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio0
shadowY?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio2
animations?CircleAnimation[]

Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.

Esempio[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identità stabile tra elementi fratelli.

Esempio pratico

function main() {
  return (
    <ZStack width={140} height={140}>
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke="#88888833"
        lineWidth={10}
      />
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke={$env.accent}
        lineWidth={10}
        startAngle={-90}
        sweepAngle={270}
        lineCap="round"
      />
      <Text fontSize={36}>75%</Text>
    </ZStack>
  );
}

Animazione

Animazione

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYdashPhasestrokelineWidthstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

Quando omesso

La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.

ProprietàQuando omesso
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Arc

Ellipse

Animazione

Color / Gradient

RadialLayout

Precedente

Ellipse

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate