CapDrive
Benutzerhandbuch

Circle

Zeichnet einen perfekten Kreis oder Bogen innerhalb des verfügbaren Bereichs, geeignet für kreisförmige Fortschritts- und Meterskalen. Der Durchmesser nimmt den kleineren Wert von Breite und Mitte an. startAngle und sweepAngle steuern den Anzeigebereich. Wenn der gesamte Kreis geschlossen ist, kann der Hintergrund ausgefüllt werden.

Beispiel

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

Verwendung

  • Circle zeichnet mittig einen Kreis mit dem kleineren Maß als Durchmesser: 160×100 ergibt 100. startAngle/sweepAngle ändern die Kontur, transform das fertige Ergebnis.
  • Winkel in Grad: 0 rechts, 90 unten, positive Bögen im Uhrzeigersinn. startAngle modulo 360, sweepAngle auf −360…360 begrenzt. 0 ist leer, ±360 ein Vollkreis. wrap:360 nur für startAngle, nicht sweepAngle.
  • Ellipse und Arc nutzen die gesamten Breiten-/Höhenmaße; gleiche Werte ergeben einen Kreis. Teilbögen bleiben offen, ohne Verbindung zum Mittelpunkt. background füllt nur eine geschlossene volle Umdrehung.

Eigenschaften

startAngle?number

Startwinkel in Grad, bei der Abtastung modulo 360 normalisiert.

Beispiel0
sweepAngle?number

Winkelbereich in Grad, bei der Abtastung auf -360…360 begrenzt. Positive Werte verlaufen im Uhrzeigersinn; wrap wird nicht unterstützt.

Beispiel360
background?Paint

Füllung eines vollständigen geschlossenen Kreises oder einer Ellipse. Bei Teilbögen ignoriert.

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

Linienfarbe oder Verlauf; clear blendet die Linie aus.

Beispiel"clear"
lineWidth?number

Linienstärke in Punkten; 0 zeichnet keine Linie.

Beispiel2
strokePosition?"inside" | "center" | "outside"

Strichposition relativ zur vollständigen Kreis- oder Ellipsenkontur. Standard ist inside.

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

Linienende: butt endet am Punkt, square verlängert eckig, round rundet.

Beispiel"round"
dash?number[]

Abwechselnde Strich- und Lückenlängen in Punkten; leeres Array bedeutet durchgezogen.

Beispiel[]
dashPhase?number

Versatz des Strichmusters in Punkten.

Beispiel0
Allgemeine Eigenschaften
width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"
height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"
x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0
transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}
opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1
clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse
clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"
mask?View | null

View als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.

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

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0
blur?number

Unschärferadius in Punkten; 0 deaktiviert die Unschärfe.

Beispiel4
innerShadow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

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

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

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

Farbe des äußeren Schattens.

BeispielHDR("black")
shadowOpacity?number

Schattendeckkraft 0–1; 0 blendet ihn aus.

Beispiel0
shadowRadius?number

Unschärferadius des äußeren Schattens in Punkten.

Beispiel4
shadowX?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel0
shadowY?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel2
animations?CircleAnimation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

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

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

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>
  );
}

Animation

Animation

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

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

EigenschaftenBeim Weglassen
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Arc

Ellipse

Animation

Color / Gradient

RadialLayout

Zurück

Ellipse

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs