CapDrive
Benutzerhandbuch

RepeatedLayout

Dupliziert regelmäßig ein Muster im Zuschneidefenster, geeignet für die kontinuierliche Bewegung von Maßstäben und Zirkeln. period legt das Wiederholungsintervall fest, value und anchor bestimmen, wo der aktuelle Wert ausgerichtet wird.

Beispiel

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

Verwendung

  • children beschreibt eine Kachel, period ihre Wiederholung. value liegt an anchor; größere Werte bewegen die Kacheln entgegengesetzt. offset ergänzt Punkte. both wiederholt auf zwei Achsen, {x,y} getrennt. Der Ausschnitt wird stets beschnitten.
  • x/y und transform folgen der Platzberechnung. Verschieben verdrängt keine Geschwister; Abstände ändern spacing oder Spacer. Rotation und Skalierung betreffen die fertige Zeichnung.

Eigenschaften

children?ViewContent

Untergeordneter Zeicheninhalt.

axis?"horizontal" | "vertical" | "both"

horizontal, vertical oder both wiederholen; both bildet ein Raster.

Beispiel"horizontal"
period?RepeatAxisValue

Abstand der Kopien in Punkten; x/y erlaubt getrennte Achsenwerte.

Beispiel360
value?RepeatAxisValue

Inhaltskoordinate am anchor. Größere Werte bewegen Kopien entgegengesetzt; keine Geschwindigkeit.

Beispiel$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

Anteil der sichtbaren Fläche: 0 Anfang, 0.5 Mitte, 1 Ende.

Beispiel0.5
offset?RepeatAxisValue

Zusätzlicher Versatz in Punkten nach Ausrichtung von value am anchor.

Beispiel0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

Überlagerte Kinder an einer von neun Rand-/Mittelpositionen ausrichten.

Beispiel"topLeading"
Allgemeine Eigenschaften
width?number | "auto" | "fill"

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

Beispiel100
height?number | "auto" | "fill"

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

Beispiel80
padding?number

Innenabstand des Inhalts in Punkten.

Beispiel0
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}
background?Paint

Hintergrundfarbe oder Verlauf; clear ist transparent.

Beispiel"clear"
opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1
cornerRadius?number

Eckenradius in Punkten.

Beispiel0
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 (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

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
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

Animation

Symbol

Zurück

RadialLayout

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs