Élément de forme

Les éléments de forme sont des graphiques vectoriels 2D qui peuvent être rendus sous forme de rectangles, cercles, étoiles, polygones ou chemins personnalisés.

Extrusion de forme en 3D

Les éléments de forme peuvent être convertis en éléments 3D dans l'éditeur par extrusion. Lorsqu'une forme est extrudée :

Un nouvel élément avec type: "3D" est créé
Les paramètres de la forme 2D d'origine sont préservés dans le champ extrusionSource
Des propriétés spécifiques à la 3D supplémentaires contrôlent la profondeur d'extrusion, le biseautage et les styles de coin

Pour des détails sur les formes extrudées, consultez la documentation Élément 3D.

Propriétés de la forme

Propriété	Type	Requis	Exemple	Plage de valeurs	Description
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Le type d'élément de forme, tel que rectangle, cercle ou polygone.
fill	string \| object	true	#FFFFFF	-	Le remplissage de la forme. Peut être une chaîne de couleur hexadécimale (par exemple, "#FFFFFF") ou un objet dégradé avec type "linéaire" ou "radial", tableau colorStops et coordonnées de début/fin. L'éditeur prend également en charge des remplissages dynamiques avancés (dynamicGradient, structureGradient, gridWave, dotWave) qui sont générés automatiquement et ne sont pas destinés à une construction manuelle.
stroke	string	false	-	-	La couleur de contour de la forme, au format hexadécimal.
strokeWidth	number	false	-	>= 0	La largeur du contour appliqué à la forme, en pixels.
keyframes	array	false	-	-	Un tableau de keyframes définissant les états d'animation et les transitions pour l'élément de forme.
view	object	true	-	-	Les paramètres de vue pour l'élément de forme, y compris la position, l'échelle et la rotation.
transform	object	true	-	-	Les paramètres de transformation pour l'élément de forme, y compris le décalage et l'alpha.
paths	array	false	-	-	Un tableau de données de chemin pour l'élément de forme, utilisé lorsque shapeType est SHAPE_PATH.

Remarque : SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR et SHAPE_POLYGON sont des formes de base, tandis que SHAPE_PATH fait référence à une forme de chemin construite à l'aide de courbes de Bézier.

Vue

Propriété	Type	Requis	Exemple	Plage de valeurs	Description
x	number	true	0	>= 0	La position horizontale de l'élément de forme, en pixels.
y	number	true	0	>= 0	La position verticale de l'élément de forme, en pixels.
width	number	true	100	>= 0	La largeur de l'élément de forme, en pixels.
height	number	true	100	>= 0	La hauteur de l'élément de forme, en pixels.
scaleX	number	true	1	> 0	Le facteur d'échelle horizontal de l'élément de forme. Une valeur supérieure à 1 agrandit l'élément, tandis qu'une valeur comprise entre 0 et 1 le rétrécit.
scaleY	number	true	1	> 0	Le facteur d'échelle vertical de l'élément de forme. Une valeur supérieure à 1 agrandit l'élément, tandis qu'une valeur comprise entre 0 et 1 le rétrécit.
rotation	number	true	0	>= 0	L'angle de rotation de l'élément de forme, en degrés.

Transformation

Propriété	Type	Requis	Exemple	Plage de valeurs	Description
x	number	true	0	>= 0	La position horizontale de l'élément de forme, en pixels.
y	number	true	0	>= 0	La position verticale de l'élément de forme, en pixels.
anchorX	number	true	-	-	La coordonnée x du point d'ancrage par rapport à l'élément de forme, en pixels.
anchorY	number	true	-	-	La coordonnée y du point d'ancrage par rapport à l'élément de forme, en pixels.
rotation	number	true	0	>= 0	L'angle de rotation de l'élément de forme, en degrés.
scaleX	number	true	1	> 0	Le facteur d'échelle horizontal de l'élément de forme. Une valeur supérieure à 1 agrandit l'élément, tandis qu'une valeur comprise entre 0 et 1 le rétrécit.
scaleY	number	true	1	> 0	Le facteur d'échelle vertical de l'élément de forme. Une valeur supérieure à 1 agrandit l'élément, tandis qu'une valeur comprise entre 0 et 1 le rétrécit.
alpha	number	true	1	0 - 1	Le niveau de transparence de l'élément de forme. 1 représente une opacité totale, et 0 représente une transparence totale.

Exemple de forme de 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
}

Exemple de forme de chemin