Vorm Element

Vormelementen zijn 2D vectorgraphics die kunnen worden weergegeven als rechthoeken, cirkels, sterren, polygonen of aangepaste paden.

Vorm Extrusie naar 3D

Vormelementen kunnen in de editor worden omgezet naar 3D-elementen door middel van extrusie. Wanneer een vorm wordt geëxtrudeerd:

Een nieuw element met type: "3D" wordt aangemaakt
De oorspronkelijke 2D-vormparameters worden bewaard in het extrusionSource veld
Aanvullende 3D-specifieke eigenschappen regelen de extrusiediepte, afschuining en hoekstijlen

Voor details over geëxtrudeerde vormen, zie de 3D Element documentatie.

Vorm Eigenschappen

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Het type vormelement, zoals rechthoek, cirkel of polygon.
fill	string \| object	true	#FFFFFF	-	De vulling van de vorm. Kan een hex-kleurstring zijn (bijv. "#FFFFFF") of een gradientobject met type "linear" of "radial", colorStops-array en start/eindcoördinaten. De editor ondersteunt ook geavanceerde dynamische vullingen (dynamicGradient, structureGradient, gridWave, dotWave) die automatisch worden gegenereerd en niet bedoeld zijn voor handmatige constructie.
stroke	string	false	-	-	De lijnkleur van de vorm, in hex-formaat.
strokeWidth	number	false	-	>= 0	De breedte van de lijn die op de vorm is toegepast, in pixels.
keyframes	array	false	-	-	Een array van keyframes die animatiestaten en overgangen voor het vormelement definiëren.
view	object	true	-	-	De weergave-instellingen voor het vormelement, inclusief positie, schaal en rotatie.
transform	object	true	-	-	De transformatie-instellingen voor het vormelement, inclusief scheefheid en alfa.
paths	array	false	-	-	Een array van padgegevens voor het vormelement, gebruikt wanneer shapeType SHAPE_PATH is.

Opmerking: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR en SHAPE_POLYGON zijn basisvormen, terwijl SHAPE_PATH verwijst naar een padvorm die is opgebouwd met Bézier-curves.

Weergave

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
x	number	true	0	>= 0	De horizontale positie van het vormelement, in pixels.
y	number	true	0	>= 0	De verticale positie van het vormelement, in pixels.
width	number	true	100	>= 0	De breedte van het vormelement, in pixels.
height	number	true	100	>= 0	De hoogte van het vormelement, in pixels.
scaleX	number	true	1	> 0	De horizontale schaalfactor van het vormelement. Een waarde groter dan 1 vergroot het element, terwijl een waarde tussen 0 en 1 het verkleint.
scaleY	number	true	1	> 0	De verticale schaalfactor van het vormelement. Een waarde groter dan 1 vergroot het element, terwijl een waarde tussen 0 en 1 het verkleint.
rotation	number	true	0	>= 0	De rotatiehoek van het vormelement, in graden.

Transformatie

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
x	number	true	0	>= 0	De horizontale positie van het vormelement, in pixels.
y	number	true	0	>= 0	De verticale positie van het vormelement, in pixels.
anchorX	number	true	-	-	De x-coördinaat van het ankerpunt ten opzichte van het vormelement, in pixels.
anchorY	number	true	-	-	De y-coördinaat van het ankerpunt ten opzichte van het vormelement, in pixels.
rotation	number	true	0	>= 0	De rotatiehoek van het vormelement, in graden.
scaleX	number	true	1	> 0	De horizontale schaalfactor van het vormelement. Een waarde groter dan 1 vergroot het element, terwijl een waarde tussen 0 en 1 het verkleint.
scaleY	number	true	1	> 0	De verticale schaalfactor van het vormelement. Een waarde groter dan 1 vergroot het element, terwijl een waarde tussen 0 en 1 het verkleint.
alpha	number	true	1	0 - 1	Het transparantieniveau van het vormelement. 1 staat voor volledige dekking, en 0 staat voor volledige transparantie.

Basis Vorm Voorbeeld

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
}

Pad Vorm Voorbeeld