CapDrive
사용 가이드

RadialLayout

원 주위에 눈금, 숫자 또는 기호를 배포합니다. radius은 View의 중심에서 레이아웃 중심까지의 거리를 제어하고 startAngle 및 sweepAngle은 배포 범위를 제어합니다.

예제

function main() {
  return (
    <RadialLayout
      radius={70}
      startAngle={-90}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 60, 120, 180].map((value) => (
        <Text key={value}>{value}</Text>
      ))}
    </RadialLayout>
  );
}

사용법

  • 반지름은 자식 중심 위치이며 컨테이너 외곽이 아닙니다. includeEnd=false는 n등분, true는 n−1등분합니다. 한 바퀴에 끝점을 넣으면 처음과 끝이 겹칩니다. childRotation은 자식 방향입니다.
  • 각도는 도 단위로 0 오른쪽, 90 아래, 양수 sweep은 시계 방향입니다. startAngle은 360 주기, sweepAngle은 방향을 유지해 −360…360 제한입니다. 0은 빈 그림, ±360은 한 바퀴입니다. wrap:360은 startAngle만 가능합니다.
  • 배열 key는 안정적인 데이터 ID를 사용해 업데이트와 애니메이션의 View를 유지하세요. 순서가 바뀌는 배열에서는 인덱스를 영구 ID로 쓰지 마세요.

속성

children?ViewContent

자식 그리기 콘텐츠.

radius?number

배치 반경(포인트)입니다. radius는 양축, radiusX/radiusY는 개별 값이며 음수는 0입니다.

예제80
radiusX?number

배치 반경(포인트)입니다. radius는 양축, radiusX/radiusY는 개별 값이며 음수는 0입니다.

예제80
radiusY?number

배치 반경(포인트)입니다. radius는 양축, radiusX/radiusY는 개별 값이며 음수는 0입니다.

예제80
startAngle?number

시작 각도(도)입니다. 샘플링할 때 360의 나머지로 정규화합니다.

예제-90
sweepAngle?number

스윕 각도(도)입니다. 샘플링할 때 -360…360으로 제한합니다. 양수는 시계 방향이며 wrap은 지원하지 않습니다.

예제360
includeEnd?boolean

배치에 끝각을 포함할지 정합니다. 전체 원은 false로 두어 첫 항목과 끝 항목의 겹침을 피합니다.

예제false
childRotation?"none" | "radial" | "tangent"

none은 유지, radial은 반경 방향, tangent는 추가 90도 회전입니다.

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

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

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

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

예제80
padding?number

콘텐츠 안쪽 여백(포인트).

예제0
x?number

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

예제0
y?number

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

예제0
transform?ViewTransform

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

예제{rotation: 0}
background?Paint

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

예제"clear"
opacity?number

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

예제1
cornerRadius?number

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

예제0
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?RadialLayoutAnimation[]

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

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

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

조합 예제

function main() {
  return (
    <RadialLayout
      width={200}
      height={200}
      radius={76}
      startAngle={-135}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 50, 100, 150, 200].map((value) => (
        <Text key={value} fontSize={14}>
          {value}
        </Text>
      ))}
    </RadialLayout>
  );
}

애니메이션

애니메이션

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

생략 시 동작

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

속성생략 시 동작
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

이전

Circle

다음 단계

이 페이지의 내용

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