CapDrive
Benutzerhandbuch

Image

Zeigt ein Bild aus einer Messgerätressource an, z. B. einem Logo, einem dekorativen Hintergrund oder einer Kacheltextur. source Verwenden Sie den Ressourcennamen, um die Skalierungs-, Zuschneide- oder Wiederholungsmethode auf die verfügbaren Größen festzulegen.

Beispiel

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Verwendung

  • source benennt ein Bild im Instrumentpaket. original erhält Farben; nur template wird mit color eingefärbt. repeatMode kachelt Bilder statt Kinder; contentMode steuert normale Skalierung.
  • Maße sind Punkte. auto misst Inhalt, fill nutzt den zugeteilten Elternraum. Zuerst den Container bemessen; fill und langer Text vergrößern keinen festen Elternrahmen.

Eigenschaften

sourcestring

Dateiname eines mitgelieferten Bildes, kein SF-Symbol-Name.

Beispiel""
contentMode?"fit" | "fill" | "stretch"

fit zeigt alles; fill füllt und beschneidet; stretch verändert das Seitenverhältnis.

Beispiel"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Kacheln in Originalgröße: repeat beide Achsen, repeatX/repeatY eine, none keine.

Beispiel"none"
renderingMode?"original" | "template"

original erhält Bildfarben; template färbt mit color.

Beispiel"original"
color?Paint

Zeichenfarbe, einschließlich HDR-Farben.

BeispielHDR($env.foreground)
contentAnimation?ContentAnimation

Übergang bei Inhaltsänderung. Unterstützten type wählen; duration/delay in Sekunden.

Beispiel{type: "fade", duration: 0.25}
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
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={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.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
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Zurück

Group

Nächster Schritt

Auf dieser Seite

BeispielVerwendungEigenschaftenPraxisbeispielAnimationBeim WeglassenVerwandte APIs