Circle

Desenha um círculo ou arco perfeito dentro da área disponível, adequado para progresso circular e escalas métricas. O diâmetro assume o menor valor de largura e centro. startAngle e sweepAngle controlam o intervalo de exibição. Quando todo o círculo estiver fechado, o fundo poderá ser preenchido.

Exemplo

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

Uso

Circle usa o menor lado e centraliza: 160×100 produz diâmetro 100. startAngle/sweepAngle mudam o contorno; transform altera o resultado inteiro.
Ângulos em graus: 0 à direita, 90 abaixo, sweep positivo horário. startAngle módulo 360; sweepAngle limitado a −360…360. Zero não desenha, ±360 fecha. wrap:360 só em startAngle.
Ellipse e Arc usam toda a largura e altura; valores iguais dão círculo. Arcos parciais ficam abertos, sem ligar ao centro. background só preenche uma volta completa fechada.

Propriedades

startAngle?number

Ângulo inicial em graus, normalizado módulo 360 na amostragem.

Exemplo0

sweepAngle?number

Varredura em graus, limitada a -360…360 na amostragem. Valores positivos seguem o sentido horário; wrap não é compatível.

Exemplo360

background?Paint

Preenchimento de um círculo ou elipse completos e fechados. Ignorado em arcos parciais.

ExemploHDR($env.dark ? "white" : "black")

stroke?Paint

Cor ou gradiente do traço; clear o oculta.

Exemplo"clear"

lineWidth?number

Espessura do traço em pontos; 0 não desenha traço.

Exemplo2

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

Posição do traço em relação ao contorno completo do círculo ou da elipse. Padrão: inside.

Exemplo"inside"

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

Ponta da linha: butt corta, square estende em quadrado, round arredonda.

Exemplo"round"

dash?number[]

Comprimentos alternados de traço e espaço em pontos; matriz vazia faz linha contínua.

Exemplo[]

dashPhase?number

Deslocamento do padrão tracejado em pontos.

Exemplo0

Propriedades comuns

width?number | "auto" | "fill"

Largura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"

height?number | "auto" | "fill"

Altura em pontos, tamanho automático ou preenchimento do contêiner.

Exemplo"fill"

x?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

y?number

Deslocamento visual em pontos: x à direita, y para baixo; não muda o espaço no layout.

Exemplo0

transform?ViewTransform

Transforma o View inteiro sem mudar o layout. Translação em pontos, rotação/inclinação em graus, escala 1 sem mudança, âncoras 0–1.

Exemplo{rotation: 0}

opacity?number

Opacidade de todo o View: 0 transparente, 1 opaco.

Exemplo1

clipped?boolean

Recorta o desenho que ultrapassa os limites do View.

Exemplofalse

clip?"rectangle" | "ellipse"

Recorte rectangle ou ellipse; Material também aceita false para desativar.

Exemplo"rectangle"

mask?View | null

View de máscara alfa. Centralizada sem afetar o layout; null desativa a máscara.

Exemplo<Circle width="fill" height="fill" background="white"/>

zIndex?number

Ordem entre elementos irmãos; valores maiores ficam na frente.

Exemplo0

blur?number

Raio do desfoque em pontos; 0 desativa.

Exemplo4

innerShadow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Cor, opacidade, raio de desfoque e deslocamento x/y do efeito; distâncias em pontos.

Exemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Cor da sombra externa.

ExemploHDR("black")

shadowOpacity?number

Opacidade da sombra entre 0 e 1; 0 oculta.

Exemplo0

shadowRadius?number

Raio de desfoque da sombra externa em pontos.

Exemplo4

shadowX?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo0

shadowY?number

Deslocamento da sombra em pontos: x à direita, y para baixo.

Exemplo2

animations?CircleAnimation[]

Anima mudanças de propriedade. duration/delay em segundos; from/to são extremos; repeat/autoreverse controlam repetição e wrap o período.

Exemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Identidade estável entre elementos irmãos.

Exemplo prático

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

Animação

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

Quando omitido

A tabela apresenta omissões verificadas na implementação. Exemplos não são padrões. Para resultado fixo, passe valor explícito; dimensões e cores de contexto não são constantes.

Propriedades	Quando omitido
`startAngle`	`0`
`sweepAngle`	`360`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`HDR($env.dark ? 'white' : 'black')`

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

Arc

Ellipse

Animação

Color / Gradient

Nesta página

Circle

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

Arc

Ellipse

Animação

Color / Gradient

Nesta página