CapDriveCircle
원형 진행 및 미터 눈금에 적합한 사용 가능한 영역 내에 완벽한 원이나 호를 그립니다. 직경은 너비와 중심 중 작은 값을 취합니다. startAngle 및 sweepAngle은 표시 범위를 제어합니다. 원 전체를 닫으면 배경을 채울 수 있습니다.
예제
function main() {
return (
<Circle
width={120}
height={120}
background="clear"
stroke={$env.accent}
lineWidth={8}
startAngle={-90}
sweepAngle={240}
strokePosition="inside"
/>
);
}
사용법
- Circle은 짧은 변을 지름으로 중앙에 원을 그립니다. 160×100이면 지름 100입니다. startAngle/sweepAngle은 윤곽 범위, transform은 완성된 전체를 바꿉니다.
- 각도는 도 단위로 0 오른쪽, 90 아래, 양수 sweep은 시계 방향입니다. startAngle은 360 주기, sweepAngle은 방향을 유지해 −360…360 제한입니다. 0은 빈 그림, ±360은 한 바퀴입니다. wrap:360은 startAngle만 가능합니다.
- Ellipse와 Arc는 전체 폭·높이로 타원을 그리며 같으면 원입니다. 부분 호는 중심까지 연결된 부채꼴이 아닙니다. background는 완전히 닫힌 한 바퀴에서만 채웁니다.
속성
startAngle?number시작 각도(도)입니다. 샘플링할 때 360의 나머지로 정규화합니다.
0sweepAngle?number스윕 각도(도)입니다. 샘플링할 때 -360…360으로 제한합니다. 양수는 시계 방향이며 wrap은 지원하지 않습니다.
360background?Paint완전히 닫힌 원 또는 타원의 채우기입니다. 부분 호에서는 무시됩니다.
HDR($env.dark ? "white" : "black")stroke?Paint선 색상 또는 그라디언트입니다. clear로 숨깁니다.
"clear"lineWidth?number선 두께(포인트)이며 0은 선을 그리지 않습니다.
2strokePosition?"inside" | "center" | "outside"전체 원 또는 타원 윤곽을 기준으로 한 선 위치입니다. 기본값은 inside입니다.
"inside"lineCap?"round" | "butt" | "square"선 끝 모양: butt는 절단, square는 사각 연장, round는 원형입니다.
"round"dash?number[]선과 빈 구간 길이를 교대로 지정합니다(포인트). 빈 배열은 실선입니다.
[]dashPhase?number점선 패턴 이동량(포인트)입니다.
0공통 속성
width?number | "auto" | "fill"너비: 포인트, 자동 크기 또는 부모 영역 채우기.
"fill"height?number | "auto" | "fill"높이: 포인트, 자동 크기 또는 부모 영역 채우기.
"fill"x?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0y?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0transform?ViewTransform레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.
{rotation: 0}opacity?number전체 View 불투명도: 0은 투명, 1은 불투명입니다.
1clipped?booleanView 경계를 벗어난 내용을 자릅니다.
falseclip?"rectangle" | "ellipse"자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.
"rectangle"mask?View | null알파 마스크 View입니다. 레이아웃에 영향을 주지 않고 중앙에 배치되며, null이면 마스크가 비활성화됩니다.
<Circle width="fill" height="fill" background="white"/>zIndex?number형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.
0blur?number흐림 반경(포인트)이며 0은 흐림 없음입니다.
4innerShadow?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은 숨김입니다.
0shadowRadius?number바깥 그림자의 흐림 반경(포인트)입니다.
4shadowX?number그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.
0shadowY?number그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.
2animations?CircleAnimation[]속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number형제 요소 사이의 안정적인 식별자.
조합 예제
function main() {
return (
<ZStack width={140} height={140}>
<Circle
width="fill"
height="fill"
background="clear"
stroke="#88888833"
lineWidth={10}
/>
<Circle
width="fill"
height="fill"
background="clear"
stroke={$env.accent}
lineWidth={10}
startAngle={-90}
sweepAngle={270}
lineCap="round"
/>
<Text fontSize={36}>75%</Text>
</ZStack>
);
}
애니메이션
widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYdashPhasestrokelineWidthstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY생략 시 동작
표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.
| 속성 | 생략 시 동작 |
|---|---|
startAngle | 0 |
sweepAngle | 360 |
lineWidth | 2 |
strokePosition | "inside" |
background | HDR($env.dark ? 'white' : 'black') |