Arc

Gambarlah busur elips sesuai dengan sudut awal dan sudut sapuan, cocok untuk busur skala dan tampilan kemajuan. Batasnya ditentukan oleh lebar dan tinggi. Lebar, titik akhir, dan posisi guratan dapat dikonfigurasi, dan latar belakang diperbolehkan terisi saat tertutup penuh.

Contoh

function main() {
  return (
    <Arc
      width={120}
      height={120}
      startAngle={-90}
      sweepAngle={240}
      stroke={$env.accent}
      lineWidth={8}
      lineCap="round"
      strokePosition="center"
    />
  );
}

Penggunaan

Ellipse dan Arc memakai seluruh lebar/tinggi; sama berarti lingkaran. Busur sebagian tetap terbuka tanpa sambungan ke pusat. background hanya mengisi putaran penuh tertutup.
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.
background/stroke menerima Color atau Gradient. Gunakan tiga konstruktor Gradient: posisi warna/pusat 0–1, radius dalam poin. HDR membungkus satu warna; kecerahan bergantung perangkat dan tampilan.

Properti

startAngle?number

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

Contoh-90

sweepAngle?number

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

Contoh270

background?Paint

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

Contoh"clear"

stroke?Paint

Warna atau gradasi garis; clear menyembunyikannya.

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

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

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 (
    <Arc
      width={180}
      height={100}
      startAngle={180}
      sweepAngle={180}
      background="clear"
      stroke={LinearGradient(['#30B3A2', '#A9E56F'])}
      lineWidth={8}
      strokePosition="inside"
      lineCap="round"
    />
  );
}

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.

Properti	Jika dihilangkan
`startAngle`	`-90`
`sweepAngle`	`270`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`"clear"`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Contoh

Penggunaan

Properti

Contoh praktis

Animasi

Jika dihilangkan

Circle

Ellipse

RadialLayout

Color / Gradient

Di halaman ini

Arc

Contoh

Penggunaan

Properti

Contoh praktis

Animasi

Jika dihilangkan

API terkait

Circle

Ellipse

RadialLayout

Color / Gradient

Di halaman ini