Circle

Mevcut alan içerisinde dairesel ilerlemeye ve metre ölçeklerine uygun mükemmel bir daire veya yay çizer. Çap, genişlik ve merkezin daha küçük değerini alır. startAngle ve sweepAngle görüntü aralığını kontrol eder. Çemberin tamamı kapatıldığında arka plan doldurulabilir.

Örnek

function main() {
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={240}
      strokePosition="inside"
    />
  );
}

Kullanım

Circle küçük kenarla ortalanmış daire çizer: 160×100 çap 100 verir. startAngle/sweepAngle çevreyi, transform bütün sonucu değiştirir.
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.
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.

Ö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?CircleAnimation[]

Ö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 (
    <ZStack width={140} height={140}>
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke="#88888833"
        lineWidth={10}
      />
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke={$env.accent}
        lineWidth={10}
        startAngle={-90}
        sweepAngle={270}
        lineCap="round"
      />
      <Text fontSize={36}>75%</Text>
    </ZStack>
  );
}

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

Arc

Ellipse

Animasyon

Color / Gradient

Bu sayfada

Circle

Örnek

Kullanım

Özellikler

Pratik örnek

Animasyon

Atlandığında

İlgili API’ler

Arc

Ellipse

Animasyon

Color / Gradient

Bu sayfada