Elemento de Forma

Elementos de forma são gráficos vetoriais 2D que podem ser renderizados como retângulos, círculos, estrelas, polígonos ou caminhos personalizados.

Extrusão de Forma para 3D

Elementos de forma podem ser convertidos em elementos 3D no editor através da extrusão. Quando uma forma é extrudada:

Um novo elemento com type: "3D" é criado
Os parâmetros da forma 2D original são preservados no campo extrusionSource
Propriedades adicionais específicas de 3D controlam a profundidade da extrusão, chanfradura e estilos de canto

Para detalhes sobre formas extrudadas, consulte a documentação do Elemento 3D.

Propriedades da Forma

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	O tipo de elemento de forma, como retângulo, círculo ou polígono.
fill	string \| object	true	#FFFFFF	-	A preenchimento da forma. Pode ser uma string de cor hexadecimal (por exemplo, "#FFFFFF") ou um objeto de gradiente com tipo "linear" ou "radial", array de colorStops e coordenadas de início/fim. O editor também suporta preenchimentos dinâmicos avançados (dynamicGradient, structureGradient, gridWave, dotWave) que são gerados automaticamente e não destinados à construção manual.
stroke	string	false	-	-	A cor do traço da forma, em formato hexadecimal.
strokeWidth	number	false	-	>= 0	A largura do traço aplicado à forma, em pixels.
keyframes	array	false	-	-	Um array de quadros-chave definindo estados de animação e transições para o elemento de forma.
view	object	true	-	-	As configurações de visualização para o elemento de forma, incluindo posição, escala e rotação.
transform	object	true	-	-	As configurações de transformação para o elemento de forma, incluindo inclinação e alfa.
paths	array	false	-	-	Um array de dados de caminho para o elemento de forma, usado quando shapeType é SHAPE_PATH.

Nota: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR e SHAPE_POLYGON são formas básicas, enquanto SHAPE_PATH refere-se a uma forma de caminho construída usando curvas de Bézier.

Visualizar

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
x	number	true	0	>= 0	A posição horizontal do elemento de forma, em pixels.
y	number	true	0	>= 0	A posição vertical do elemento de forma, em pixels.
width	number	true	100	>= 0	A largura do elemento de forma, em pixels.
height	number	true	100	>= 0	A altura do elemento de forma, em pixels.
scaleX	number	true	1	> 0	O fator de escala horizontal do elemento de forma. Um valor maior que 1 aumenta o elemento, enquanto um valor entre 0 e 1 o reduz.
scaleY	number	true	1	> 0	O fator de escala vertical do elemento de forma. Um valor maior que 1 aumenta o elemento, enquanto um valor entre 0 e 1 o reduz.
rotation	number	true	0	>= 0	O ângulo de rotação do elemento de forma, em graus.

Transformar

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
x	number	true	0	>= 0	A posição horizontal do elemento de forma, em pixels.
y	number	true	0	>= 0	A posição vertical do elemento de forma, em pixels.
anchorX	number	true	-	-	A coordenada x do ponto âncora em relação ao elemento de forma, em pixels.
anchorY	number	true	-	-	A coordenada y do ponto âncora em relação ao elemento de forma, em pixels.
rotation	number	true	0	>= 0	O ângulo de rotação do elemento de forma, em graus.
scaleX	number	true	1	> 0	O fator de escala horizontal do elemento de forma. Um valor maior que 1 aumenta o elemento, enquanto um valor entre 0 e 1 o reduz.
scaleY	number	true	1	> 0	O fator de escala vertical do elemento de forma. Um valor maior que 1 aumenta o elemento, enquanto um valor entre 0 e 1 o reduz.
alpha	number	true	1	0 - 1	O nível de transparência do elemento de forma. 1 representa opacidade total, e 0 representa transparência total.

Exemplo 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
}

Exemplo de Forma de Caminho