CapDrive
Panduan penggunaan

Circle

Menggambar lingkaran atau busur sempurna dalam area yang tersedia, cocok untuk kemajuan melingkar dan skala meter. Diameter mengambil nilai lebar dan pusat yang lebih kecil. startAngle dan sweepAngle mengontrol rentang tampilan. Ketika seluruh lingkaran ditutup, latar belakang dapat diisi.

Contoh

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

Penggunaan

  • Circle memakai sisi kecil dan terpusat: 160×100 menghasilkan diameter 100. startAngle/sweepAngle mengubah kontur; transform mengubah seluruh hasil.
  • Sudut dalam derajat: 0 kanan, 90 bawah, sweep positif searah jarum jam. startAngle modulo 360, sweepAngle dibatasi −360…360. Nol kosong, ±360 penuh. wrap:360 hanya untuk startAngle.
  • Ellipse dan Arc memakai seluruh lebar/tinggi; sama berarti lingkaran. Busur sebagian tetap terbuka tanpa sambungan ke pusat. background hanya mengisi putaran penuh tertutup.

Properti

startAngle?number

Sudut awal dalam derajat, dinormalisasi modulo 360 saat pengambilan sampel.

Contoh0
sweepAngle?number

Rentang sudut dalam derajat, dibatasi ke -360…360 saat pengambilan sampel. Nilai positif searah jarum jam; wrap tidak didukung.

Contoh360
background?Paint

Isian lingkaran atau elips penuh yang tertutup. Diabaikan untuk busur parsial.

ContohHDR($env.dark ? "white" : "black")
stroke?Paint

Warna atau gradasi garis; clear menyembunyikannya.

Contoh"clear"
lineWidth?number

Ketebalan garis dalam poin; 0 tidak menggambar garis.

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

Posisi garis terhadap kontur lingkaran atau elips penuh. Default: inside.

Contoh"inside"
lineCap?"round" | "butt" | "square"

Ujung garis: butt memotong, square memanjang persegi, round membulat.

Contoh"round"
dash?number[]

Panjang garis dan celah bergantian dalam poin; larik kosong membuat garis utuh.

Contoh[]
dashPhase?number

Offset pola putus-putus dalam poin.

Contoh0
Properti umum
width?number | "auto" | "fill"

Lebar dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh"fill"
height?number | "auto" | "fill"

Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh"fill"
x?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
y?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
transform?ViewTransform

Transformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.

Contoh{rotation: 0}
opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1
clipped?boolean

Potong gambar yang melewati batas View.

Contohfalse
clip?"rectangle" | "ellipse"

Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.

Contoh"rectangle"
mask?View | null

View masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.

Contoh<Circle width="fill" height="fill" background="white"/>
zIndex?number

Urutan gambar antar saudara; nilai lebih besar di depan.

Contoh0
blur?number

Radius buram dalam poin; 0 menonaktifkan.

Contoh4
innerShadow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

Contoh{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Warna bayangan luar.

ContohHDR("black")
shadowOpacity?number

Opasitas bayangan 0–1; 0 menyembunyikannya.

Contoh0
shadowRadius?number

Radius buram bayangan luar dalam poin.

Contoh4
shadowX?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh0
shadowY?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh2
animations?CircleAnimation[]

Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.

Contoh[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identitas stabil di antara elemen sejajar.

Contoh praktis

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

Animasi

Animasi

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

Jika dihilangkan

Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.

PropertiJika dihilangkan
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Arc

Ellipse

Animasi

Color / Gradient

RadialLayout

Sebelumnya

Ellipse

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait