CapDrive
Guía de uso

Path

Construya caminos con comandos como mover, línea, cuadrilátero, cúbico, arco y cerrar. Adecuado para personalizar punteros, curvas y contornos combinados, y establecer reglas de relleno y trazos.

Ejemplo

function main() {
  return (
    <Path
      commands={[
        { op: 'move', x: 10, y: 80 },
        { op: 'line', x: 60, y: 10 },
        { op: 'line', x: 110, y: 80 },
        { op: 'close' },
      ]}
      background={$env.accent}
      stroke={$env.foreground}
      lineWidth={2}
    />
  );
}

Uso

  • commands se ejecuta en orden: move inicia, line/quad/cubic/arc añade y close cierra. x/y de arc es el centro. evenOdd permite huecos anidados. Volver al punto inicial no equivale a close.
  • contentAnimation cambia texto, imágenes o datos estructurados. interpolate requiere puntos/closed de Polyline, secuencia Path o muestras compatibles. Los cambios de estructura se aplican inmediatamente.

Propiedades

commandsReadonlyArray<PathCommand>

Comandos de ruta locales en puntos. Un arreglo vacío no dibuja nada.

Ejemplo[{op: "move", x: 0, y: 0}, {op: "line", x: 100, y: 80}]
fillRule?"nonZero" | "evenOdd"

Regla de relleno: nonZero o evenOdd.

Ejemplo"nonZero"
background?Paint

Relleno del interior de la ruta. Transparente por defecto.

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
lineCap?"round" | "butt" | "square"

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

Ejemplo"round"
lineJoin?"round" | "miter" | "bevel"

Unión de segmentos: miter, round o bevel.

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
trimStart?number

Intervalo visible trimStart–trimEnd dentro de 0–1. Circle/Ellipse/Arc usan ángulos.

Ejemplo0
trimEnd?number

Intervalo visible trimStart–trimEnd dentro de 0–1. Circle/Ellipse/Arc usan ángulos.

Ejemplo1
contentAnimation?ContentAnimation

Transición de contenido opcional. interpolate requiere igual cantidad de comandos y secuencia de operaciones; de lo contrario se actualiza inmediatamente.

Ejemplo{type: "interpolate", duration: 0.25}
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?Animation[]

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 (
    <Path
      width={140}
      height={100}
      fillRule="evenOdd"
      background={$env.accent}
      commands={[
        { op: 'move', x: 0, y: 0 },
        { op: 'line', x: 140, y: 0 },
        { op: 'line', x: 140, y: 100 },
        { op: 'line', x: 0, y: 100 },
        { op: 'close' },
        { op: 'move', x: 35, y: 25 },
        { op: 'line', x: 105, y: 25 },
        { op: 'line', x: 105, y: 75 },
        { op: 'line', x: 35, y: 75 },
        { op: 'close' },
      ]}
    />
  );
}

Animación

Animación

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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
commands[]
fillRule"nonZero"
background"clear"
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Color / Gradient

Map

Anterior

BarChart

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas