CapDrive
Guida all’uso

Polyline

Disegna una polilinea collegando una serie di punti in sequenza. closed può collegare l'ultimo punto e il primo punto per formare un contorno chiuso e consente il riempimento; le coordinate utilizzano il numero di punti nell'attuale View.

Esempio

function main() {
  return (
    <Polyline
      points={[
        { x: 0, y: 80 },
        { x: 60, y: 10 },
        { x: 120, y: 80 },
      ]}
      closed={true}
      background="#30B3A233"
      stroke={$env.accent}
      lineWidth={3}
    />
  );
}

Utilizzo

  • points collega nell’ordine; meno di due non disegna. closed=true unisce fine e inizio e permette background. Le coordinate sono punti, non percentuali; calcolale per adattarle.
  • contentAnimation riguarda testo, immagini o dati strutturati. interpolate richiede punti/closed Polyline, sequenza Path o campioni compatibili. Cambi strutturali aggiornano subito.

Proprietà

pointsReadonlyArray<ViewPoint>

Coordinate locali in punti. Con meno di due punti non viene disegnato nulla.

Esempio[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]
closed?boolean

Collega ultimo punto e primo; la polilinea chiusa accetta il riempimento background.

Esempiofalse
background?Paint

Riempimento di una polilinea chiusa. Ignorato se closed è false.

Esempio"clear"
stroke?Paint

Colore o gradiente del tratto; clear lo nasconde.

EsempioHDR($env.dark ? "white" : "black")
lineWidth?number

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

Esempio2
lineCap?"round" | "butt" | "square"

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

Esempio"round"
lineJoin?"round" | "miter" | "bevel"

Forma delle giunzioni: miter, round o bevel.

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
trimStart?number

Intervallo visibile trimStart–trimEnd in 0–1. Circle/Ellipse/Arc usano angoli.

Esempio0
trimEnd?number

Intervallo visibile trimStart–trimEnd in 0–1. Circle/Ellipse/Arc usano angoli.

Esempio1
contentAnimation?ContentAnimation

Transizione di contenuto facoltativa. interpolate richiede lo stesso numero di punti e stato di chiusura; altrimenti aggiorna immediatamente.

Esempio{type: "interpolate", duration: 0.25}
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?Animation[]

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 (
    <HStack spacing={12}>
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={false}
        background="#30B3A244"
        stroke={$env.accent}
      />
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={true}
        background="#30B3A244"
        stroke={$env.accent}
      />
    </HStack>
  );
}

Animazione

Animazione

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
closedfalse
background"clear"
lineWidth2
trimStart0
trimEnd1
strokeHDR($env.dark ? 'white' : 'black')

Path

LineChart

Color / Gradient

Arc

Precedente

Map

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate