Arc

Dibuje un arco elíptico según el ángulo inicial y el ángulo de barrido, adecuado para arcos de escala y visualización de progreso. El borde está determinado por el ancho y el alto. El ancho, el punto final y la posición del trazo son configurables, y se permite que el fondo se llene cuando está completamente cerrado.

Ejemplo

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

Uso

Ellipse y Arc usan todo el ancho y alto; solo son círculos si coinciden. Los arcos parciales no unen extremos al centro. background rellena únicamente una vuelta completa cerrada.
Ángulos en grados: 0 derecha, 90 abajo, sweep positivo horario. startAngle módulo 360; sweepAngle limitado a −360…360. 0 no dibuja; ±360 cierra. wrap:360 es para startAngle, no sweepAngle.
background/stroke aceptan Color o Gradient. Usa los tres constructores Gradient: posiciones y centros 0–1, radios en puntos. HDR envuelve un color; el brillo depende del dispositivo y del entorno.

Propiedades

startAngle?number

Ángulo inicial en grados, normalizado módulo 360 al muestrear.

Ejemplo-90

sweepAngle?number

Barrido en grados, limitado a -360…360 al muestrear. Los valores positivos giran en sentido horario; no admite wrap.

Ejemplo270

background?Paint

Relleno de un círculo o elipse completos y cerrados. Se ignora en arcos parciales.

Ejemplo"clear"

stroke?Paint

Color o degradado del trazo; clear lo oculta.

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

lineWidth?number

Grosor del trazo en puntos; 0 no dibuja trazo.

Ejemplo2

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

Posición del trazo respecto al contorno completo del círculo o la elipse. Por defecto, inside.

Ejemplo"inside"

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

Extremos: butt corta, square prolonga en cuadrado, round redondea.

Ejemplo"round"

dash?number[]

Longitudes alternas de trazo y hueco en puntos; matriz vacía para línea continua.

Ejemplo[]

dashPhase?number

Desplazamiento del patrón de guiones en puntos.

Ejemplo0

Propiedades comunes

width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"

height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"

x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0

y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0

transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}

opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1

clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse

clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"

mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

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

zIndex?number

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0

blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4

innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

glow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

shadowColor?Color

Color de la sombra exterior.

EjemploHDR("black")

shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0

shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4

shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0

shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2

animations?ArcAnimation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

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

key?string | number

Identidad estable entre elementos hermanos.

Ejemplo práctico

function main() {
  return (
    <Arc
      width={180}
      height={100}
      startAngle={180}
      sweepAngle={180}
      background="clear"
      stroke={LinearGradient(['#30B3A2', '#A9E56F'])}
      lineWidth={8}
      strokePosition="inside"
      lineCap="round"
    />
  );
}

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

Propiedades	Al omitir
`startAngle`	`-90`
`sweepAngle`	`270`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`"clear"`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Ejemplo

Uso

Propiedades

Ejemplo práctico

Animación

Al omitir

Circle

Ellipse

RadialLayout

Color / Gradient

En esta página

Arc

Ejemplo

Uso

Propiedades

Ejemplo práctico

Animación

Al omitir

API relacionadas

Circle

Ellipse

RadialLayout

Color / Gradient

En esta página