Circle

Vẽ một vòng tròn hoặc vòng cung hoàn hảo trong khu vực có sẵn, phù hợp với tiến trình vòng tròn và thang đo mét. Đường kính lấy giá trị nhỏ hơn của chiều rộng và tâm. startAngle và sweepAngle điều khiển phạm vi hiển thị. Khi toàn bộ vòng tròn được đóng lại, nền có thể được lấp đầy.

Ví dụ

function main() {
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={240}
      strokePosition="inside"
    />
  );
}

Cách sử dụng

Circle dùng cạnh nhỏ để vẽ tròn ở giữa: 160×100 cho đường kính 100. startAngle/sweepAngle đổi đường bao; transform đổi cả hình.
Góc tính độ: 0 phải, 90 xuống, sweep dương theo kim đồng hồ. startAngle modulo 360; sweepAngle giới hạn −360…360. 0 không vẽ, ±360 đầy vòng. wrap:360 chỉ cho startAngle.
Ellipse và Arc dùng cả chiều rộng/cao; bằng nhau mới tròn. Cung một phần không nối vào tâm. background chỉ tô một vòng đầy khép kín.

Thuộc tính

startAngle?number

Góc bắt đầu tính bằng độ, lấy phần dư theo 360 khi lấy mẫu.

Ví dụ0

sweepAngle?number

Góc quét tính bằng độ, giới hạn ở -360…360 khi lấy mẫu. Giá trị dương theo chiều kim đồng hồ; không hỗ trợ wrap.

Ví dụ360

background?Paint

Màu tô hình tròn hoặc elip đầy đủ và khép kín. Bỏ qua với cung không trọn.

Ví dụHDR($env.dark ? "white" : "black")

stroke?Paint

Màu hoặc chuyển màu của nét; clear ẩn nét.

Ví dụ"clear"

lineWidth?number

Độ dày nét theo điểm; 0 không vẽ nét.

Ví dụ2

strokePosition?"inside" | "center" | "outside"

Vị trí nét so với đường bao hình tròn hoặc elip đầy đủ. Mặc định là inside.

Ví dụ"inside"

lineCap?"round" | "butt" | "square"

Đầu nét: butt cắt tại điểm, square kéo dài vuông, round bo tròn.

Ví dụ"round"

dash?number[]

Độ dài nét và khoảng trống xen kẽ theo điểm; mảng rỗng là nét liền.

Ví dụ[]

dashPhase?number

Độ dịch mẫu nét đứt theo điểm.

Ví dụ0

Thuộc tính chung

width?number | "auto" | "fill"

Chiều rộng tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"fill"

height?number | "auto" | "fill"

Chiều cao tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"fill"

x?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

y?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

transform?ViewTransform

Biến đổi toàn View không đổi bố cục. Dịch chuyển theo điểm, xoay/nghiêng theo độ, tỷ lệ 1 giữ nguyên, điểm neo 0–1.

Ví dụ{rotation: 0}

opacity?number

Độ đục toàn bộ View: 0 trong suốt, 1 đục hoàn toàn.

Ví dụ1

clipped?boolean

Cắt phần vẽ vượt ra ngoài View.

Ví dụfalse

clip?"rectangle" | "ellipse"

Hình cắt rectangle hoặc ellipse; Material còn nhận false để tắt.

Ví dụ"rectangle"

mask?View | null

View mặt nạ alpha. Căn giữa mà không ảnh hưởng bố cục; null tắt mặt nạ.

Ví dụ<Circle width="fill" height="fill" background="white"/>

zIndex?number

Thứ tự vẽ giữa các phần tử cùng cấp; giá trị lớn nằm trước.

Ví dụ0

blur?number

Bán kính làm mờ theo điểm; 0 là tắt.

Ví dụ4

innerShadow?DrawingEffect

Màu, độ đục, bán kính mờ và độ lệch x/y của hiệu ứng; khoảng cách theo điểm.

Ví dụ{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Màu, độ đục, bán kính mờ và độ lệch x/y của hiệu ứng; khoảng cách theo điểm.

Ví dụ{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Màu bóng đổ bên ngoài.

Ví dụHDR("black")

shadowOpacity?number

Độ đục bóng 0–1; 0 ẩn bóng.

Ví dụ0

shadowRadius?number

Bán kính làm mờ bóng ngoài theo điểm.

Ví dụ4

shadowX?number

Độ lệch bóng theo điểm: x sang phải, y xuống.

Ví dụ0

shadowY?number

Độ lệch bóng theo điểm: x sang phải, y xuống.

Ví dụ2

animations?CircleAnimation[]

Hoạt ảnh khi thuộc tính đổi. duration/delay theo giây; from/to là đầu cuối; repeat/autoreverse điều khiển lặp, wrap là chu kỳ.

Ví dụ[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Định danh ổn định giữa các phần tử cùng cấp.

Ví dụ kết hợp

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

Hoạt ảnh

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

Khi bỏ qua

Bảng ghi hành vi bỏ qua đã kiểm tra từ triển khai; ví dụ không phải mặc định. Muốn kết quả cố định hãy truyền giá trị rõ, kích thước và màu theo ngữ cảnh không phải hằng số.

Thuộc tính	Khi bỏ qua
`startAngle`	`0`
`sweepAngle`	`360`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`HDR($env.dark ? 'white' : 'black')`

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

Arc

Ellipse

Hoạt ảnh

Color / Gradient

Trên trang này

Circle

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

API liên quan

Arc

Ellipse

Hoạt ảnh

Color / Gradient

Trên trang này