CapDrive
Kullanım kılavuzu

Rectangle

Arka planlar, ilerleme çubukları ve kenarlıklarla birlikte kullanılmak üzere isteğe bağlı yuvarlatılmış köşelere sahip bir dikdörtgen çizer. background iç kısmı doldurur, stroke konturları, lineWidth ve strokePosition konturun genişliğini ve konumunu kontrol eder.

Örnek

function main() {
  return (
    <Rectangle
      width={160}
      height={80}
      cornerRadius={16}
      background={LinearGradient(['#A9E56F', '#30B3A2'])}
      stroke={$env.foreground}
      lineWidth={2}
      strokePosition="inside"
    />
  );
}

Kullanım

  • background doldurur, stroke çevreler. cornerRadius kısa kenarın yarısına sınırlıdır. inside iç, center sınırın iki yanı, outside dıştır; üst kapsayıcı dış çizgiyi kırpabilir.
  • mask alfa kullanır: opak gösterir, saydam gizler. Aynı alfa ile siyah ve beyaz eşittir. Yerleşimi etkilemez; boyut verin ve clipped kırpmasından ayırın.
  • background/stroke Color veya Gradient alır. Üç Gradient kurucusunu kullanın; durak ve merkezler 0–1, yarıçaplar nokta. HDR tek rengi sarar; parlaklık cihaz ve ortama bağlıdır.

Özellikler

background?Paint

Arka plan rengi veya gradyanı; clear saydamdır.

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

Köşe yarıçapı, punto.

Örnek0
stroke?Paint

Çizgi rengi veya gradyanı; clear gizler.

Örnek"clear"
lineWidth?number

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

Örnek2
strokePosition?"inside" | "center" | "outside"

Kontura göre çizgi konumu: inside, center veya outside.

Örnek"inside"
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
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={20}>
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="inside"
      />
      <Rectangle
        width={90}
        height={60}
        background="clear"
        stroke={$env.accent}
        lineWidth={8}
        strokePosition="outside"
      />
    </HStack>
  );
}

Animasyon

Animasyon

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
cornerRadius0
lineWidth2
strokePosition"inside"
trimStart0
trimEnd1
backgroundHDR($env.dark ? 'white' : 'black')

Color / Gradient

ZStack

Ellipse

Önceki

Line

Sonraki adım

Bu sayfada

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