CapDrive
Kullanım kılavuzu

Polyline

Bir dizi noktayı sırayla birleştirerek bir sürekli çizgi çizin. closed son noktayı ve ilk noktayı kapalı bir kontur oluşturacak şekilde bağlayabilir ve doldurmaya izin verir; koordinatlar mevcut View'deki nokta sayısını kullanır.

Örnek

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

Kullanım

  • points sırayla birleşir; ikiden az çizmez. closed=true sonu başa bağlar ve background açar. Koordinatlar yüzde değil noktadır.
  • contentAnimation yazı, resim ve yapısal veriyi geçirir. interpolate için Polyline nokta sayısı/closed, Path komutları veya grafik yapısı eşleşmelidir. Yapı değişirse anında güncellenir.

Özellikler

pointsReadonlyArray<ViewPoint>

Yerel nokta koordinatları, punto cinsinden. İkiden az nokta varsa çizilmez.

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

Son noktayı ilk noktaya bağlar; kapalı çizgi background ile doldurulabilir.

Örnekfalse
background?Paint

Kapalı çoklu çizginin dolgusu. closed false ise yok sayılır.

Örnek"clear"
stroke?Paint

Çizgi rengi veya gradyanı; clear gizler.

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

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

Örnek2
lineCap?"round" | "butt" | "square"

Çizgi ucu: butt keser, square kare uzatır, round yuvarlar.

Örnek"round"
lineJoin?"round" | "miter" | "bevel"

Birleşim şekli: miter, round veya bevel.

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

trimStart–trimEnd görünür yol aralığı 0–1. Circle/Ellipse/Arc açı kullanır.

Örnek0
trimEnd?number

trimStart–trimEnd görünür yol aralığı 0–1. Circle/Ellipse/Arc açı kullanır.

Örnek1
contentAnimation?ContentAnimation

İsteğe bağlı içerik geçişi. interpolate aynı nokta sayısını ve kapanma durumunu gerektirir; aksi halde hemen güncellenir.

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

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

Animasyon

Animasyon

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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.

ÖzelliklerAtlandığında
closedfalse
background"clear"
lineWidth2
trimStart0
trimEnd1
strokeHDR($env.dark ? 'white' : 'black')

Path

LineChart

Color / Gradient

Arc

Önceki

Map

Sonraki adım

Bu sayfada

ÖrnekKullanımÖzelliklerPratik örnekAnimasyonAtlandığındaİlgili API’ler