CapDrive
Benutzerhandbuch

Path

Erstellen Sie Pfade mit Befehlen wie „Verschieben“, „Linie“, „Quadrat“, „Kubisch“, „Bogen“ und „Schließen“. Geeignet zum Anpassen von Zeigern, Kurven und kombinierten Umrissen sowie zum Festlegen von Füllregeln und Strichen.

Beispiel

function main() {
  return (
    <Path
      commands={[
        { op: 'move', x: 10, y: 80 },
        { op: 'line', x: 60, y: 10 },
        { op: 'line', x: 110, y: 80 },
        { op: 'close' },
      ]}
      background={$env.accent}
      stroke={$env.foreground}
      lineWidth={2}
    />
  );
}

Verwendung

  • commands laufen der Reihe nach: move beginnt, line/quad/cubic/arc ergänzen, close schließt. Bei arc ist x/y der Mittelpunkt. evenOdd ermöglicht Löcher. Zum Start zurückzukehren entspricht nicht close.
  • contentAnimation betrifft Text, Bilder und strukturierte Daten. interpolate benötigt passende Polyline-Punktzahl/closed, Path-Befehlsfolge oder Diagrammstruktur. Strukturänderungen werden sofort übernommen.

Eigenschaften

commandsReadonlyArray<PathCommand>

Lokale Pfadbefehle in Punkten. Ein leeres Array zeichnet nichts.

Beispiel[{op: "move", x: 0, y: 0}, {op: "line", x: 100, y: 80}]
fillRule?"nonZero" | "evenOdd"

Pfadfüllregel: nonZero oder evenOdd.

Beispiel"nonZero"
background?Paint

Füllung des Pfadinneren. Standardmäßig transparent.

Beispiel"clear"
stroke?Paint

Linienfarbe oder Verlauf; clear blendet die Linie aus.

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

Linienstärke in Punkten; 0 zeichnet keine Linie.

Beispiel2
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
contentAnimation?ContentAnimation

Optionaler Inhaltsübergang. interpolate erfordert dieselbe Befehlsanzahl und Operationsfolge; sonst erfolgt die Aktualisierung sofort.

Beispiel{type: "interpolate", duration: 0.25}
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 (
    <Path
      width={140}
      height={100}
      fillRule="evenOdd"
      background={$env.accent}
      commands={[
        { op: 'move', x: 0, y: 0 },
        { op: 'line', x: 140, y: 0 },
        { op: 'line', x: 140, y: 100 },
        { op: 'line', x: 0, y: 100 },
        { op: 'close' },
        { op: 'move', x: 35, y: 25 },
        { op: 'line', x: 105, y: 25 },
        { op: 'line', x: 105, y: 75 },
        { op: 'line', x: 35, y: 75 },
        { op: 'close' },
      ]}
    />
  );
}

Animation

Animation

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
commands[]
fillRule"nonZero"
background"clear"
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Color / Gradient

Map

Zurück

BarChart

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs