Line

Yerel koordinatlarda iki uç nokta arasına düz bir çizgi çizer. Gösterge çizgileri, işaretler ve bölücüler için uygundur; rengi, genişliği, çizgi ve uç nokta stillerini ayarlayabilirsiniz.

Örnek

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

Kullanım

start/end yerel koordinatlardır: sol üst başlangıç, x sağa, y aşağı. width/height ile ölçeklenmezler; uyumlu boyutlar için hesaplayın. Line doldurulacak iç alana sahip değildir.
x/y ve transform yerleşimden sonra uygulanır. Çocuğu taşımak kardeşleri itmez; aralık için spacing veya Spacer kullanın. Dönüş ve ölçek tüm çizimi etkiler.

Özellikler

start?ViewPoint

Yerel uç koordinatı, punto: x sağa, y aşağı.

Örnek{x: 0, y: 0}

end?ViewPoint

Yerel uç koordinatı, punto: x sağa, y aşağı.

Örnek{x: 100, y: 80}

stroke?Paint

Çizgi rengi veya gradyanı; clear gizler.

ÖrnekHDR($env.dark ? "white" : "black")

lineWidth?number

Çizgi kalınlığı, punto; 0 çizmez.

Örnek2

lineCap?"round" | "butt" | "square"

Çizgi ucu: butt keser, square kare uzatır, round yuvarlar.

Örnek"round"

dash?number[]

Çizgi ve boşluk uzunlukları sırayla, punto; boş dizi düz çizgidir.

Örnek[]

dashPhase?number

Kesik çizgi desen kayması, punto.

Örnek0

trimStart?number

trimStart–trimEnd görünür yol aralığı 0–1. Circle/Ellipse/Arc açı kullanır.

Örnek0

trimEnd?number

trimStart–trimEnd görünür yol aralığı 0–1. Circle/Ellipse/Arc açı kullanır.

Örnek1

Ortak özellikler

width?number | "auto" | "fill"

Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.

Örnek"fill"

height?number | "auto" | "fill"

Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.

Örnek"fill"

x?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0

y?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0

transform?ViewTransform

Yerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.

Örnek{rotation: 0}

opacity?number

Tüm View opaklığı: 0 saydam, 1 opak.

Örnek1

clipped?boolean

View sınırlarını aşan çizimi kırpar.

Örnekfalse

clip?"rectangle" | "ellipse"

Kırpma şekli rectangle veya ellipse; Material için false kapatır.

Örnek"rectangle"

mask?View | null

Alfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.

Örnek<Circle width="fill" height="fill" background="white"/>

zIndex?number

Kardeşler arasında çizim sırası; büyük değer öndedir.

Örnek0

blur?number

Bulanıklık yarıçapı, punto; 0 kapatır.

Örnek4

innerShadow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Dış gölge rengi.

ÖrnekHDR("black")

shadowOpacity?number

Gölge opaklığı 0–1; 0 gizler.

Örnek0

shadowRadius?number

Dış gölge bulanıklık yarıçapı, punto.

Örnek4

shadowX?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek0

shadowY?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek2

animations?Animation[]

Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.

Örnek[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Kardeş öğeler arasında kararlı kimlik.

Pratik örnek

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}
    />
  );
}

Animasyon

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.y

Atlandığında

Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.

Özellikler	Atlandığında
`lineWidth`	`2`
`lineCap`	`"round"`
`trimStart`	`0`
`trimEnd`	`1`
`dash`	`[]`
`dashPhase`	`0`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

Polyline

Path

Color / Gradient

Bu sayfada

Line

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

İlgili API’ler

Polyline

Path

Color / Gradient

Bu sayfada