Line

Dibuja una línea recta entre dos puntos finales en coordenadas locales. Adecuado para líneas indicadoras, ticks y divisores, puede configurar el color, el ancho, el guión y los estilos de punto final.

Ejemplo

function main() {
  return (
    <Line
      start={{ x: 0, y: 20 }}
      end={{ x: 160, y: 60 }}
      stroke={$env.accent}
      lineWidth={4}
      lineCap="round"
    />
  );
}

Uso

start/end son coordenadas locales: origen arriba a la izquierda, x derecha, y abajo. No escalan al cambiar width/height. Calcula extremos para tamaños adaptables. Line no tiene interior rellenable.
x/y y transform actúan después de reservar espacio. Mover un hijo no empuja a sus hermanos; usa spacing o Spacer. Giro y escala afectan al dibujo completo.

Propiedades

start?ViewPoint

Extremo en coordenadas locales, en puntos: x derecha, y abajo.

Ejemplo{x: 0, y: 0}

end?ViewPoint

Extremo en coordenadas locales, en puntos: x derecha, y abajo.

Ejemplo{x: 100, y: 80}

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"

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

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 (
    <Line
      width={$env.width}
      height={40}
      start={{ x: 0, y: 20 }}
      end={{ x: $env.width, y: 20 }}
      stroke={$env.accent}
      lineWidth={3}
      dash={[8, 4]}
      dashPhase={0}
    />
  );
}

Animación

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.y

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
`lineWidth`	`2`
`lineCap`	`"round"`
`trimStart`	`0`
`trimEnd`	`1`
`dash`	`[]`
`dashPhase`	`0`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Ejemplo

Uso

Propiedades

Ejemplo práctico

Animación

Al omitir

Polyline

Path

Color / Gradient

En esta página

Line

Ejemplo

Uso

Propiedades

Ejemplo práctico

Animación

Al omitir

API relacionadas

Polyline

Path

Color / Gradient

En esta página