Elemento de Forma

Los elementos de forma son gráficos vectoriales 2D que se pueden renderizar como rectángulos, círculos, estrellas, polígonos o rutas personalizadas.

Extrusión de Forma a 3D

Los elementos de forma se pueden convertir en elementos 3D en el editor a través de la extrusión. Cuando una forma se extruye:

Se crea un nuevo elemento con type: "3D"
Los parámetros de la forma 2D original se preservan en el campo extrusionSource
Propiedades adicionales específicas de 3D controlan la profundidad de extrusión, el biselado y los estilos de esquina

Para obtener detalles sobre las formas extruidas, consulte la documentación de Elemento 3D.

Propiedades de Forma

Prop	Tipo	Requerido	Ejemplo	Rango de Valores	Descripción
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	El tipo de elemento de forma, como rectángulo, círculo o polígono.
fill	string \| object	true	#FFFFFF	-	El relleno de la forma. Puede ser una cadena de color hexadecimal (por ejemplo, "#FFFFFF") o un objeto de degradado con tipo "lineal" o "radial", un array de colorStops y coordenadas de inicio/final. El editor también admite rellenos dinámicos avanzados (dynamicGradient, structureGradient, gridWave, dotWave) que se generan automáticamente y no están destinados a la construcción manual.
stroke	string	false	-	-	El color del trazo de la forma, en formato hexadecimal.
strokeWidth	number	false	-	>= 0	El ancho del trazo aplicado a la forma, en píxeles.
keyframes	array	false	-	-	Un array de fotogramas clave que definen los estados de animación y transiciones para el elemento de forma.
view	object	true	-	-	La configuración de vista para el elemento de forma, incluyendo posición, escala y rotación.
transform	object	true	-	-	La configuración de transformación para el elemento de forma, incluyendo sesgo y alfa.
paths	array	false	-	-	Un array de datos de ruta para el elemento de forma, utilizado cuando shapeType es SHAPE_PATH.

Nota: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR y SHAPE_POLYGON son formas básicas, mientras que SHAPE_PATH se refiere a una forma de ruta construida utilizando curvas de Bézier.

Vista

Prop	Tipo	Requerido	Ejemplo	Rango de Valores	Descripción
x	number	true	0	>= 0	La posición horizontal del elemento de forma, en píxeles.
y	number	true	0	>= 0	La posición vertical del elemento de forma, en píxeles.
width	number	true	100	>= 0	El ancho del elemento de forma, en píxeles.
height	number	true	100	>= 0	La altura del elemento de forma, en píxeles.
scaleX	number	true	1	> 0	El factor de escala horizontal del elemento de forma. Un valor mayor que 1 agranda el elemento, mientras que un valor entre 0 y 1 lo reduce.
scaleY	number	true	1	> 0	El factor de escala vertical del elemento de forma. Un valor mayor que 1 agranda el elemento, mientras que un valor entre 0 y 1 lo reduce.
rotation	number	true	0	>= 0	El ángulo de rotación del elemento de forma, en grados.

Transformar

Prop	Tipo	Requerido	Ejemplo	Rango de Valores	Descripción
x	number	true	0	>= 0	La posición horizontal del elemento de forma, en píxeles.
y	number	true	0	>= 0	La posición vertical del elemento de forma, en píxeles.
anchorX	number	true	-	-	La coordenada x del punto de anclaje en relación con el elemento de forma, en píxeles.
anchorY	number	true	-	-	La coordenada y del punto de anclaje en relación con el elemento de forma, en píxeles.
rotation	number	true	0	>= 0	El ángulo de rotación del elemento de forma, en grados.
scaleX	number	true	1	> 0	El factor de escala horizontal del elemento de forma. Un valor mayor que 1 agranda el elemento, mientras que un valor entre 0 y 1 lo reduce.
scaleY	number	true	1	> 0	El factor de escala vertical del elemento de forma. Un valor mayor que 1 agranda el elemento, mientras que un valor entre 0 y 1 lo reduce.
alpha	number	true	1	0 - 1	El nivel de transparencia del elemento de forma. 1 representa opacidad total, y 0 representa transparencia total.

Ejemplo de Forma Básica

shapeElement.json


{
  "id": "ca6664b1-3ddf-4525-9137-1ad2440788bd",
  "type": "Shape",
  "start": 0,
  "duration": 5,
  "trackIndex": 1,
  "x": 250.04168816332555,
  "y": 5.833740234374999,
  "blendMode": "normal",
  "anchorX": 0,
  "anchorY": 0,
  "view": {
      "width": 300,
      "height": 300,
      "x": 0,
      "y": 0,
      "scaleX": 1,
      "scaleY": 1,
      "rotation": 0,
      "anchorX": 0,
      "anchorY": 0
  },
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "transform": {
      "x": 0,
      "y": 0,
      "anchorX": 0,
      "anchorY": 0,
      "rotation": 0,
      "scaleX": 1,
      "scaleY": 1,
      "alpha": 1
  },
  "keyframes": [],
  "shapeType": "SHAPE_RECT",
  "fill": "#818cf8",
  "stroke": "#4f46e5",
  "strokeWidth": 5
}

Ejemplo de Forma de Ruta