CapDrive
Panduan penggunaan

Polyline

Gambarlah polyline dengan menghubungkan sekumpulan titik secara berurutan. closed dapat menghubungkan titik terakhir dan titik pertama untuk membentuk kontur tertutup, dan memungkinkan pengisian; koordinatnya menggunakan jumlah titik di View saat ini.

Contoh

function main() {
  return (
    <Polyline
      points={[
        { x: 0, y: 80 },
        { x: 60, y: 10 },
        { x: 120, y: 80 },
      ]}
      closed={true}
      background="#30B3A233"
      stroke={$env.accent}
      lineWidth={3}
    />
  );
}

Penggunaan

  • points tersambung sesuai urutan; kurang dari dua tidak digambar. closed=true menyambung akhir ke awal dan mengizinkan background. Koordinat berupa poin, bukan persen.
  • contentAnimation mengubah teks, gambar atau struktur data. interpolate perlu jumlah titik/closed Polyline, urutan Path atau struktur grafik yang cocok. Perubahan struktur diterapkan langsung.

Properti

pointsReadonlyArray<ViewPoint>

Koordinat titik lokal dalam satuan poin. Kurang dari dua titik tidak menggambar apa pun.

Contoh[{x: 0, y: 20}, {x: 40, y: 0}, {x: 80, y: 40}]
closed?boolean

Hubungkan titik terakhir ke pertama; bentuk tertutup dapat diisi dengan background.

Contohfalse
background?Paint

Isian poligaris tertutup. Diabaikan jika closed bernilai false.

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
lineCap?"round" | "butt" | "square"

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

Contoh"round"
lineJoin?"round" | "miter" | "bevel"

Bentuk sambungan garis: miter, round atau bevel.

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
trimStart?number

Bagian jalur terlihat trimStart–trimEnd dalam 0–1. Circle/Ellipse/Arc memakai sudut.

Contoh0
trimEnd?number

Bagian jalur terlihat trimStart–trimEnd dalam 0–1. Circle/Ellipse/Arc memakai sudut.

Contoh1
contentAnimation?ContentAnimation

Transisi konten opsional. interpolate memerlukan jumlah titik dan status penutupan yang sama; jika tidak, konten langsung diperbarui.

Contoh{type: "interpolate", duration: 0.25}
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?Animation[]

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 (
    <HStack spacing={12}>
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={false}
        background="#30B3A244"
        stroke={$env.accent}
      />
      <Polyline
        width={100}
        height={80}
        points={[
          { x: 0, y: 70 },
          { x: 50, y: 10 },
          { x: 100, y: 70 },
        ]}
        closed={true}
        background="#30B3A244"
        stroke={$env.accent}
      />
    </HStack>
  );
}

Animasi

Animasi

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
closedfalse
background"clear"
lineWidth2
trimStart0
trimEnd1
strokeHDR($env.dark ? 'white' : 'black')

Path

LineChart

Color / Gradient

Arc

Sebelumnya

Map

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait