Arc

Desenhe um arco elíptico de acordo com o ângulo inicial e o ângulo de varredura, adequado para arcos de escala e exibição de progresso. A borda é determinada pela largura e altura. A largura, o ponto final e a posição do traço são configuráveis, e o fundo pode ser preenchido quando totalmente fechado.

Exemplo

function main() {
  return (
    <Arc
      width={120}
      height={120}
      startAngle={-90}
      sweepAngle={240}
      stroke={$env.accent}
      lineWidth={8}
      lineCap="round"
      strokePosition="center"
    />
  );
}

Uso

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.
Â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.
background/stroke aceitam Color ou Gradient. Use três construtores Gradient; posições e centros 0–1, raios em pontos. HDR envolve uma cor; brilho depende do aparelho e do ambiente.

Propriedades

startAngle?number

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

Exemplo-90

sweepAngle?number

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

Exemplo270

background?Paint

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

Exemplo"clear"

stroke?Paint

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

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

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?ArcAnimation[]

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 (
    <Arc
      width={180}
      height={100}
      startAngle={180}
      sweepAngle={180}
      background="clear"
      stroke={LinearGradient(['#30B3A2', '#A9E56F'])}
      lineWidth={8}
      strokePosition="inside"
      lineCap="round"
    />
  );
}

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`	`-90`
`sweepAngle`	`270`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`"clear"`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

Circle

Ellipse

RadialLayout

Color / Gradient

Nesta página

Arc

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

Circle

Ellipse

RadialLayout

Color / Gradient

Nesta página