Ellipse

Belirli bir genişlik ve yükseklik dahilinde bir elips veya eliptik yay çizer. Başlangıç açısı, süpürme açısı, dolgu ve kontur ile eliptik ölçekler veya dekoratif ana hatlar oluşturulabilir.

Örnek

function main() {
  return (
    <Ellipse
      width={180}
      height={100}
      background="clear"
      stroke={$env.accent}
      lineWidth={6}
      startAngle={0}
      sweepAngle={270}
      strokePosition="center"
    />
  );
}

Kullanım

Ellipse ve Arc tüm genişlik/yüksekliği kullanır; eşitse dairedir. Kısmi yaylar merkeze bağlanmaz. background yalnız kapalı tam turda dolar.
Açı derece: 0 sağ, 90 aşağı, pozitif sweep saat yönü. startAngle mod 360, sweepAngle −360…360 sınırlı. 0 çizmez, ±360 tam turdur. wrap:360 yalnız startAngle için.
background/stroke Color veya Gradient alır. Üç Gradient kurucusunu kullanın; durak ve merkezler 0–1, yarıçaplar nokta. HDR tek rengi sarar; parlaklık cihaz ve ortama bağlıdır.

Özellikler

startAngle?number

Derece cinsinden başlangıç açısı; örnekleme sırasında 360 modunda normalleştirilir.

Örnek0

sweepAngle?number

Derece cinsinden tarama açısı; örnekleme sırasında -360…360 ile sınırlanır. Pozitif değer saat yönündedir; wrap desteklenmez.

Örnek360

background?Paint

Tam kapalı daire veya elips dolgusu. Kısmi yaylarda yok sayılır.

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

stroke?Paint

Çizgi rengi veya gradyanı; clear gizler.

Örnek"clear"

lineWidth?number

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

Örnek2

strokePosition?"inside" | "center" | "outside"

Tam daire veya elips konturuna göre çizgi konumu. Varsayılan inside.

Örnek"inside"

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

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?EllipseAnimation[]

Ö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 (
    <VStack spacing={12}>
      <Ellipse width={180} height={80} background={$env.accent} />
      <Ellipse
        width={180}
        height={80}
        background="clear"
        stroke={$env.accent}
        lineWidth={6}
        startAngle={180}
        sweepAngle={180}
      />
    </VStack>
  );
}

Animasyon

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYdashPhasestrokelineWidthstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

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
`startAngle`	`0`
`sweepAngle`	`360`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`HDR($env.dark ? 'white' : 'black')`

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

Circle

Arc

Color / Gradient

Bu sayfada

Ellipse

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

İlgili API’ler

Circle

Arc

Color / Gradient

Bu sayfada