Ellipse

Desenha uma elipse ou arco elíptico dentro de uma determinada largura e altura. Escalas elípticas ou contornos decorativos podem ser formados pelo ângulo inicial, ângulo de varredura, preenchimento e traço.

Exemplo

function main() {
  return (
    <Ellipse
      width={180}
      height={100}
      background="clear"
      stroke={$env.accent}
      lineWidth={6}
      startAngle={0}
      sweepAngle={270}
      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.

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

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 (
    <VStack spacing={12}>
      <Ellipse width={180} height={80} background={$env.accent} />
      <Ellipse
        width={180}
        height={80}
        background="clear"
        stroke={$env.accent}
        lineWidth={6}
        startAngle={180}
        sweepAngle={180}
      />
    </VStack>
  );
}

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

Circle

Arc

Color / Gradient

Nesta página

Ellipse

Exemplo

Uso

Propriedades

Exemplo prático

Animação

Quando omitido

APIs relacionadas

Circle

Arc

Color / Gradient

Nesta página