CapDrive
Kullanım kılavuzu

Path

Taşıma, çizgi, dörtlü, kübik, yay ve kapatma gibi komutlarla yollar oluşturun. İşaretçileri, eğrileri ve birleştirilmiş ana hatları özelleştirmek ve dolgu kuralları ile konturları ayarlamak için uygundur.

Örnek

function main() {
  return (
    <Path
      commands={[
        { op: 'move', x: 10, y: 80 },
        { op: 'line', x: 60, y: 10 },
        { op: 'line', x: 110, y: 80 },
        { op: 'close' },
      ]}
      background={$env.accent}
      stroke={$env.foreground}
      lineWidth={2}
    />
  );
}

Kullanım

  • commands sırayla işler: move başlar, line/quad/cubic/arc ekler, close kapatır. arc x/y merkezidir. evenOdd iç içe delikler sağlar. Başa dönmek close değildir.
  • 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

commandsReadonlyArray<PathCommand>

Yerel yol komutları, punto cinsinden. Boş dizi çizim yapmaz.

Örnek[{op: "move", x: 0, y: 0}, {op: "line", x: 100, y: 80}]
fillRule?"nonZero" | "evenOdd"

Yol dolgu kuralı: nonZero veya evenOdd.

Örnek"nonZero"
background?Paint

Yolun iç dolgusu. Varsayılan olarak saydamdı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ı komut sayısını ve işlem sırasını 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 (
    <Path
      width={140}
      height={100}
      fillRule="evenOdd"
      background={$env.accent}
      commands={[
        { op: 'move', x: 0, y: 0 },
        { op: 'line', x: 140, y: 0 },
        { op: 'line', x: 140, y: 100 },
        { op: 'line', x: 0, y: 100 },
        { op: 'close' },
        { op: 'move', x: 35, y: 25 },
        { op: 'line', x: 105, y: 25 },
        { op: 'line', x: 105, y: 75 },
        { op: 'line', x: 35, y: 75 },
        { op: 'close' },
      ]}
    />
  );
}

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
commands[]
fillRule"nonZero"
background"clear"
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Color / Gradient

Map

Önceki

BarChart

Sonraki adım

Bu sayfada

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