CapDrive
사용 가이드

Rectangle

배경, 진행률 표시줄 및 테두리와 함께 사용하기 위해 선택적으로 둥근 모서리가 있는 직사각형을 그립니다. background은 내부를 채우고, stroke 획은 lineWidth 및 strokePosition은 획의 너비와 위치를 제어합니다.

예제

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

사용법

  • background는 내부, stroke는 테두리입니다. cornerRadius는 짧은 변 절반까지입니다. inside는 안, center는 경계 양쪽, outside는 밖이며 부모 클리핑에 잘릴 수 있습니다.
  • mask는 알파로 불투명 부분을 보이고 투명 부분을 숨깁니다. 같은 알파의 흑백은 같습니다. 본체 배치에 참여하지 않으므로 크기를 지정하고 clipped 경계 잘라내기와 구분하세요.
  • background/stroke는 Color 또는 Gradient입니다. 세 Gradient 생성 함수를 사용하고 색 위치·중심은 0–1, 방사 반지름은 포인트입니다. HDR은 단일 색을 감싸며 밝기는 기기와 환경에 달립니다.

속성

background?Paint

배경 색상 또는 그라디언트입니다. clear는 투명입니다.

예제HDR($env.dark ? "white" : "black")
cornerRadius?number

모서리 반경(포인트)입니다.

예제0
stroke?Paint

선 색상 또는 그라디언트입니다. clear로 숨깁니다.

예제"clear"
lineWidth?number

선 두께(포인트)이며 0은 선을 그리지 않습니다.

예제2
strokePosition?"inside" | "center" | "outside"

윤곽선 기준 선 위치: inside, center, outside입니다.

예제"inside"
lineCap?"round" | "butt" | "square"

선 끝 모양: butt는 절단, square는 사각 연장, round는 원형입니다.

예제"round"
lineJoin?"round" | "miter" | "bevel"

선 연결 모양: miter, round, bevel입니다.

예제"round"
dash?number[]

선과 빈 구간 길이를 교대로 지정합니다(포인트). 빈 배열은 실선입니다.

예제[]
dashPhase?number

점선 패턴 이동량(포인트)입니다.

예제0
trimStart?number

trimStart부터 trimEnd까지 0–1 경로 구간입니다. Circle/Ellipse/Arc는 각도를 사용합니다.

예제0
trimEnd?number

trimStart부터 trimEnd까지 0–1 경로 구간입니다. Circle/Ellipse/Arc는 각도를 사용합니다.

예제1
공통 속성
width?number | "auto" | "fill"

너비: 포인트, 자동 크기 또는 부모 영역 채우기.

예제"fill"
height?number | "auto" | "fill"

높이: 포인트, 자동 크기 또는 부모 영역 채우기.

예제"fill"
x?number

시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.

예제0
y?number

시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.

예제0
transform?ViewTransform

레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.

예제{rotation: 0}
opacity?number

전체 View 불투명도: 0은 투명, 1은 불투명입니다.

예제1
clipped?boolean

View 경계를 벗어난 내용을 자릅니다.

예제false
clip?"rectangle" | "ellipse"

자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.

예제"rectangle"
mask?View | null

알파 마스크 View입니다. 레이아웃에 영향을 주지 않고 중앙에 배치되며, null이면 마스크가 비활성화됩니다.

예제<Circle width="fill" height="fill" background="white"/>
zIndex?number

형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.

예제0
blur?number

흐림 반경(포인트)이며 0은 흐림 없음입니다.

예제4
innerShadow?DrawingEffect

효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.

예제{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.

예제{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

바깥 그림자 색상입니다.

예제HDR("black")
shadowOpacity?number

그림자 불투명도 0–1이며 0은 숨김입니다.

예제0
shadowRadius?number

바깥 그림자의 흐림 반경(포인트)입니다.

예제4
shadowX?number

그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.

예제0
shadowY?number

그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.

예제2
animations?Animation[]

속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.

예제[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

형제 요소 사이의 안정적인 식별자.

조합 예제

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

애니메이션

애니메이션

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

생략 시 동작

표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.

속성생략 시 동작
cornerRadius0
lineWidth2
strokePosition"inside"
trimStart0
trimEnd1
backgroundHDR($env.dark ? 'white' : 'black')

Color / Gradient

ZStack

Ellipse

이전

Line

다음 단계

이 페이지의 내용

예제사용법속성조합 예제애니메이션생략 시 동작관련 API