Formelement

Formelemente sind 2D-Vektorgrafiken, die als Rechtecke, Kreise, Sterne, Polygone oder benutzerdefinierte Pfade gerendert werden können.

Formextrusion zu 3D

Formelemente können im Editor durch Extrusion in 3D-Elemente umgewandelt werden. Wenn eine Form extrudiert wird:

Ein neues Element mit type: "3D" wird erstellt
Die ursprünglichen 2D-Formparameter werden im Feld extrusionSource beibehalten
Zusätzliche 3D-spezifische Eigenschaften steuern die Extrusionstiefe, Fasen und Eckenstile

Für Details zu extrudierten Formen siehe die 3D-Element Dokumentation.

Formeigenschaften

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Der Typ des Formelements, wie Rechteck, Kreis oder Polygon.
fill	string \| object	true	#FFFFFF	-	Die Füllung der Form. Kann ein Hex-Farbstring (z. B. "#FFFFFF") oder ein Farbverlauf-Objekt mit dem Typ "linear" oder "radial", einem colorStops-Array und Start-/Endkoordinaten sein. Der Editor unterstützt auch fortgeschrittene dynamische Füllungen (dynamicGradient, structureGradient, gridWave, dotWave), die automatisch generiert werden und nicht für die manuelle Konstruktion gedacht sind.
stroke	string	false	-	-	Die Strichfarbe der Form im Hex-Format.
strokeWidth	number	false	-	>= 0	Die Breite des auf die Form angewendeten Strichs in Pixeln.
keyframes	array	false	-	-	Ein Array von Schlüsselbildern, die Animationszustände und Übergänge für das Formelement definieren.
view	object	true	-	-	Die Ansichtseinstellungen für das Formelement, einschließlich Position, Maßstab und Rotation.
transform	object	true	-	-	Die Transformationseinstellungen für das Formelement, einschließlich Schrägstellung und Alpha.
paths	array	false	-	-	Ein Array von Pfaddaten für das Formelement, das verwendet wird, wenn shapeType SHAPE_PATH ist.

Hinweis: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR und SHAPE_POLYGON sind Grundformen, während SHAPE_PATH sich auf eine Pfusform bezieht, die mit Bézier-Kurven konstruiert wurde.

Ansicht

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
x	number	true	0	>= 0	Die horizontale Position des Formelements in Pixeln.
y	number	true	0	>= 0	Die vertikale Position des Formelements in Pixeln.
width	number	true	100	>= 0	Die Breite des Formelements in Pixeln.
height	number	true	100	>= 0	Die Höhe des Formelements in Pixeln.
scaleX	number	true	1	> 0	Der horizontale Skalierungsfaktor des Formelements. Ein Wert größer als 1 vergrößert das Element, während ein Wert zwischen 0 und 1 es verkleinert.
scaleY	number	true	1	> 0	Der vertikale Skalierungsfaktor des Formelements. Ein Wert größer als 1 vergrößert das Element, während ein Wert zwischen 0 und 1 es verkleinert.
rotation	number	true	0	>= 0	Der Rotationswinkel des Formelements in Grad.

Transformation

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
x	number	true	0	>= 0	Die horizontale Position des Formelements in Pixeln.
y	number	true	0	>= 0	Die vertikale Position des Formelements in Pixeln.
anchorX	number	true	-	-	Die x-Koordinate des Ankerpunkts relativ zum Formelement in Pixeln.
anchorY	number	true	-	-	Die y-Koordinate des Ankerpunkts relativ zum Formelement in Pixeln.
rotation	number	true	0	>= 0	Der Rotationswinkel des Formelements in Grad.
scaleX	number	true	1	> 0	Der horizontale Skalierungsfaktor des Formelements. Ein Wert größer als 1 vergrößert das Element, während ein Wert zwischen 0 und 1 es verkleinert.
scaleY	number	true	1	> 0	Der vertikale Skalierungsfaktor des Formelements. Ein Wert größer als 1 vergrößert das Element, während ein Wert zwischen 0 und 1 es verkleinert.
alpha	number	true	1	0 - 1	Der Transparenzgrad des Formelements. 1 steht für volle Deckkraft, und 0 steht für volle Transparenz.

Beispiel für eine Grundform

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
}

Beispiel für eine Pfusform