CapDrive
Benutzerhandbuch

Rectangle

Zeichnet ein Rechteck mit optional abgerundeten Ecken zur Verwendung mit Hintergründen, Fortschrittsbalken und Rahmen. background füllt den Innenraum, stroke Striche, lineWidth und strokePosition steuern die Breite und Position des Strichs.

Beispiel

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

Verwendung

  • background füllt innen, stroke zeichnet die Kontur. cornerRadius ist höchstens die halbe kurze Seite. inside liegt innen, center auf der Grenze, outside außen; Eltern-Clipping kann äußere Linien abschneiden.
  • mask verwendet Alpha: deckende Bereiche bleiben sichtbar, transparente verschwinden. Schwarz und Weiß mit gleichem Alpha wirken gleich. Masken beeinflussen das Layout nicht; Maße explizit setzen und von clipped unterscheiden.
  • 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

background?Paint

Hintergrundfarbe oder Verlauf; clear ist transparent.

BeispielHDR($env.dark ? "white" : "black")
cornerRadius?number

Eckenradius in Punkten.

Beispiel0
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"

Linienposition relativ zur Kontur: inside, center oder outside.

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

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

Beispiel"round"
lineJoin?"round" | "miter" | "bevel"

Form von Linienverbindungen: miter, round oder bevel.

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

Sichtbarer Pfadabschnitt trimStart bis trimEnd in 0–1. Circle/Ellipse/Arc nutzen Winkel.

Beispiel0
trimEnd?number

Sichtbarer Pfadabschnitt trimStart bis trimEnd in 0–1. Circle/Ellipse/Arc nutzen Winkel.

Beispiel1
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?Animation[]

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 (
    <HStack spacing={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Animation

Animation

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
cornerRadius0
lineWidth2
strokePosition"inside"
trimStart0
trimEnd1
backgroundHDR($env.dark ? 'white' : 'black')

Color / Gradient

ZStack

Ellipse

Zurück

Line

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs