Elemento Forma

Gli elementi forma sono grafica vettoriale 2D che possono essere renderizzati come rettangoli, cerchi, stelle, poligoni o percorsi personalizzati.

Estrusione della Forma in 3D

Gli elementi forma possono essere convertiti in elementi 3D nell'editor tramite estrusione. Quando una forma viene estrusa:

Viene creato un nuovo elemento con type: "3D"
I parametri della forma 2D originale sono preservati nel campo extrusionSource
Proprietà specifiche per il 3D controllano la profondità dell'estrusione, la smussatura e gli stili degli angoli

Per dettagli sulle forme estruse, vedere la documentazione Elemento 3D.

Proprietà della Forma

Proprietà	Tipo	Richiesto	Esempio	Intervallo di valori	Descrizione
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Il tipo di elemento forma, come rettangolo, cerchio o poligono.
fill	string \| object	true	#FFFFFF	-	Il riempimento della forma. Può essere una stringa di colore esadecimale (ad es., "#FFFFFF") o un oggetto gradiente con tipo "lineare" o "radiale", array di colorStops e coordinate di inizio/fine. L'editor supporta anche riempimenti dinamici avanzati (dynamicGradient, structureGradient, gridWave, dotWave) che vengono generati automaticamente e non sono destinati alla costruzione manuale.
stroke	string	false	-	-	Il colore del contorno della forma, in formato esadecimale.
strokeWidth	number	false	-	>= 0	La larghezza del contorno applicato alla forma, in pixel.
keyframes	array	false	-	-	Un array di fotogrammi chiave che definiscono stati di animazione e transizioni per l'elemento forma.
view	object	true	-	-	Le impostazioni di visualizzazione per l'elemento forma, inclusi posizione, scala e rotazione.
transform	object	true	-	-	Le impostazioni di trasformazione per l'elemento forma, inclusi inclinazione e alpha.
paths	array	false	-	-	Un array di dati di percorso per l'elemento forma, utilizzato quando shapeType è SHAPE_PATH.

Nota: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR e SHAPE_POLYGON sono forme di base, mentre SHAPE_PATH si riferisce a una forma di percorso costruita utilizzando curve di Bézier.

Vista

Proprietà	Tipo	Richiesto	Esempio	Intervallo di valori	Descrizione
x	number	true	0	>= 0	La posizione orizzontale dell'elemento forma, in pixel.
y	number	true	0	>= 0	La posizione verticale dell'elemento forma, in pixel.
width	number	true	100	>= 0	La larghezza dell'elemento forma, in pixel.
height	number	true	100	>= 0	La altezza dell'elemento forma, in pixel.
scaleX	number	true	1	> 0	Il fattore di scala orizzontale dell'elemento forma. Un valore maggiore di 1 ingrandisce l'elemento, mentre un valore compreso tra 0 e 1 lo riduce.
scaleY	number	true	1	> 0	Il fattore di scala verticale dell'elemento forma. Un valore maggiore di 1 ingrandisce l'elemento, mentre un valore compreso tra 0 e 1 lo riduce.
rotation	number	true	0	>= 0	L'angolo di rotazione dell'elemento forma, in gradi.

Trasformare

Proprietà	Tipo	Richiesto	Esempio	Intervallo di valori	Descrizione
x	number	true	0	>= 0	La posizione orizzontale dell'elemento forma, in pixel.
y	number	true	0	>= 0	La posizione verticale dell'elemento forma, in pixel.
anchorX	number	true	-	-	La coordinata x del punto di ancoraggio rispetto all'elemento forma, in pixel.
anchorY	number	true	-	-	La coordinata y del punto di ancoraggio rispetto all'elemento forma, in pixel.
rotation	number	true	0	>= 0	L'angolo di rotazione dell'elemento forma, in gradi.
scaleX	number	true	1	> 0	Il fattore di scala orizzontale dell'elemento forma. Un valore maggiore di 1 ingrandisce l'elemento, mentre un valore compreso tra 0 e 1 lo riduce.
scaleY	number	true	1	> 0	Il fattore di scala verticale dell'elemento forma. Un valore maggiore di 1 ingrandisce l'elemento, mentre un valore compreso tra 0 e 1 lo riduce.
alpha	number	true	1	0 - 1	Il livello di trasparenza dell'elemento forma. 1 rappresenta opacità totale e 0 rappresenta trasparenza totale.

Esempio di Forma Base

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
}

Esempio di Forma di Percorso