Line

Zeichnet eine gerade Linie zwischen zwei Endpunkten in lokalen Koordinaten. Geeignet für Indikatorlinien, Häkchen und Trennlinien. Sie können Farbe, Breite, Strich- und Endpunktstile festlegen.

Beispiel

function main() {
  return (
    <Line
      start={{ x: 0, y: 20 }}
      end={{ x: 160, y: 60 }}
      stroke={$env.accent}
      lineWidth={4}
      lineCap="round"
    />
  );
}

Verwendung

start/end sind lokale Punkte: Ursprung links oben, x rechts, y unten. Feste Endpunkte skalieren nicht mit width/height. Responsive Endpunkte selbst berechnen. Line besitzt keine Füllfläche.
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

start?ViewPoint

Endpunkt in lokalen Punktkoordinaten: x rechts, y unten.

Beispiel{x: 0, y: 0}

end?ViewPoint

Endpunkt in lokalen Punktkoordinaten: x rechts, y unten.

Beispiel{x: 100, y: 80}

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"

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 (
    <Line
      width={$env.width}
      height={40}
      start={{ x: 0, y: 20 }}
      end={{ x: $env.width, y: 20 }}
      stroke={$env.accent}
      lineWidth={3}
      dash={[8, 4]}
      dashPhase={0}
    />
  );
}

Animation

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.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.

Eigenschaften	Beim Weglassen
`lineWidth`	`2`
`lineCap`	`"round"`
`trimStart`	`0`
`trimEnd`	`1`
`dash`	`[]`
`dashPhase`	`0`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Polyline

Path

Color / Gradient

Auf dieser Seite

Line

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Verwandte APIs

Polyline

Path

Color / Gradient

Auf dieser Seite