CapDrive
Benutzerhandbuch

Ellipse

Zeichnet eine Ellipse oder einen elliptischen Bogen innerhalb einer bestimmten Breite und Höhe. Elliptische Schuppen oder dekorative Umrisse können durch Startwinkel, Schwungwinkel, Füllung und Strich gebildet werden.

Beispiel

function main() {
  return (
    <Ellipse
      width={180}
      height={100}
      background="clear"
      stroke={$env.accent}
      lineWidth={6}
      startAngle={0}
      sweepAngle={270}
      strokePosition="center"
    />
  );
}

Verwendung

  • 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.
  • 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.
  • background/stroke akzeptieren Color oder Gradient. Drei Gradient-Funktionen erzeugen Verläufe. Stopps und Mittelpunkt nutzen 0–1, radiale Radien Punkte. HDR umschließt eine Farbe; Helligkeit hängt von Gerät und Anzeige ab.

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?EllipseAnimation[]

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 (
    <VStack spacing={12}>
      <Ellipse width={180} height={80} background={$env.accent} />
      <Ellipse
        width={180}
        height={80}
        background="clear"
        stroke={$env.accent}
        lineWidth={6}
        startAngle={180}
        sweepAngle={180}
      />
    </VStack>
  );
}

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')

Circle

Arc

Color / Gradient

Circle

Zurück

Rectangle

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs