CapDrive
Guía de uso

Circle

Dibuja un círculo o arco perfecto dentro del área disponible, adecuado para progreso circular y escalas de metros. El diámetro toma el valor menor de ancho y centro. startAngle y sweepAngle controlan el rango de visualización. Cuando se cierra todo el círculo, se puede rellenar el fondo.

Ejemplo

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

Uso

  • Circle usa el lado menor para un círculo centrado: 160×100 produce diámetro 100. startAngle/sweepAngle cambian el contorno; transform cambia el dibujo completo.
  • Á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.
  • 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.

Propiedades

startAngle?number

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

Ejemplo0
sweepAngle?number

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

Ejemplo360
background?Paint

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

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

Color o degradado del trazo; clear lo oculta.

Ejemplo"clear"
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?CircleAnimation[]

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

Animación

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.

PropiedadesAl omitir
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Arc

Ellipse

Animación

Color / Gradient

RadialLayout

Anterior

Ellipse

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas