Polyline

Zeichnen Sie eine Polylinie, indem Sie eine Reihe von Punkten nacheinander verbinden. closed kann den letzten Punkt und den ersten Punkt verbinden, um eine geschlossene Kontur zu bilden, und ermöglicht das Füllen; Die Koordinaten verwenden die Anzahl der Punkte im aktuellen View.

Beispiel

function main() {
  return (
    <Polyline
      points={[
        { x: 0, y: 80 },
        { x: 60, y: 10 },
        { x: 120, y: 80 },
      ]}
      closed={true}
      background="#30B3A233"
      stroke={$env.accent}
      lineWidth={3}
    />
  );
}

Verwendung

points verbinden sich in Arrayreihenfolge; unter zwei Punkten wird nichts gezeichnet. closed=true verbindet Ende und Anfang und erlaubt background. Koordinaten sind Punkte, keine Prozentwerte.
contentAnimation betrifft Text, Bilder und strukturierte Daten. interpolate benötigt passende Polyline-Punktzahl/closed, Path-Befehlsfolge oder Diagrammstruktur. Strukturänderungen werden sofort übernommen.

Eigenschaften

pointsReadonlyArray<ViewPoint>

Lokale Punktkoordinaten in Punkten. Weniger als zwei Punkte werden nicht gezeichnet.

Beispiel[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]

closed?boolean

Letzten mit erstem Punkt verbinden; geschlossene Polylinien erlauben background-Füllung.

Beispielfalse

background?Paint

Füllung einer geschlossenen Polylinie. Wird bei closed=false ignoriert.

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 Punktanzahl und denselben Schließzustand; 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 (
    <HStack spacing={12}>
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={false}
        background="#30B3A244"
        stroke={$env.accent}
      />
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={true}
        background="#30B3A244"
        stroke={$env.accent}
      />
    </HStack>
  );
}

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.

Eigenschaften	Beim Weglassen
`closed`	`false`
`background`	`"clear"`
`lineWidth`	`2`
`trimStart`	`0`
`trimEnd`	`1`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Path

LineChart

Color / Gradient

Auf dieser Seite

Polyline

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Verwandte APIs

Path

LineChart

Color / Gradient

Auf dieser Seite