Maske

Masken werden verwendet, um Elemente zuzuschneiden oder zu formen. Die maskData-Eigenschaft kann auf Bilder, Videos und andere visuelle Elemente angewendet werden, um deren sichtbaren Bereich zu steuern.

Maskentypen

Zuschneiden: Einfaches rechteckiges Zuschneiden
Form: Formbasierte Maske (Ellipse, Rechteck, Stern, Polygon usw.)
Text: Textbasierte Maske
Pfad: Benutzerdefinierte Pfadmaske

Zuschneide-Maske

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
type	string	true	-	crop	Der Typ der Maske.
centerX	number	true	-	-	Die horizontale Position des Maskenzentrums in Pixeln.
centerY	number	true	-	-	Die vertikale Position des Maskenzentrums in Pixeln.
width	number	true	-	-	Die Breite der Maske in Pixeln.
height	number	true	-	-	Die Höhe der Maske in Pixeln.
inverse	boolean	false	-	-	Ob die Maske invertiert werden soll (Ausschnitt-Effekt erzeugen).

imageElement.json

{
  "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": -58.59302855661144,
  "y": 48.394393104046685,
  "blendMode": "normal",
  "anchorX": 1051.1350332909515,
  "anchorY": 2519.1996978825114,
  "rotation": 0,
  "maskData": {
      "type": "crop",
      "centerX": 1051.1350332909515,
      "centerY": 2519.1996978825114,
      "width": 2121.862754282655,
      "height": 2949.902587890625
  },
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

Form-Maske

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
type	string	true	-	shape	Der Typ der Maske.
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Der Typ der Form für die Maske.
x	number	true	-	-	Die horizontale Position der Maske in Pixeln.
y	number	true	-	-	Die vertikale Position der Maske in Pixeln.
scaleX	number	true	-	-	Der horizontale Maßstab der Maske.
scaleY	number	true	-	-	Der vertikale Maßstab der Maske.
rotation	number	true	-	-	Die Rotation der Maske in Bogenmaß.
width	number	false	-	-	Die Breite der Maske in Pixeln.
height	number	false	-	-	Die Höhe der Maske in Pixeln.
fill	string	true	-	-	Die Füllfarbe der Maske im hexadezimalen Format.
view	object	true	-	-	Die Eigenschaften der Sichttransformation der Maske.
pointNum	number	false	-	-	Anzahl der Punkte für Polygon- oder Sternformen.
innerRadius	number	false	-	-	Innerradius für Sternformen (relativ zum Außerradius).
outerRadius	number	false	-	-	Außerradius für Sternformen.
cornerRadius	number	false	-	-	Eckenradius für abgerundete Rechteckformen.
inverse	boolean	false	-	-	Ob die Maske invertiert werden soll (Ausschnitt-Effekt erzeugen).

imageElement.json

{
  "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": -58.59302855661144,
  "y": 48.394393104046685,
  "blendMode": "normal",
  "anchorX": 1051.1350332909515,
  "anchorY": 2519.1996978825114,
  "rotation": 0,
  "maskData": {
      "type": "shape",
      "shapeType": "SHAPE_ELLIPSE",
      "x": 1935.8609161703698,
      "y": 2120.7135441063306,
      "scaleX": 1,
      "scaleY": 1,
      "rotation": 0,
      "width": 2604,
      "height": 2604,
      "fill": "#ffffff",
      "view": {
          "scaleX": 1,
          "scaleY": 1,
          "x": 0,
          "y": 0,
          "width": 2604,
          "height": 2604,
          "rotation": 0,
          "anchorX": 0,
          "anchorY": 0
      }
  },
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

Text-Maske

Verwenden Sie Text als Maske, um ein Element in Textformen zuzuschneiden.

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
type	string	true	-	text	Der Typ der Maske.
x	number	true	-	-	Die horizontale Position der Textmaske in Pixeln.
y	number	true	-	-	Die vertikale Position der Textmaske in Pixeln.
rotation	number	true	-	-	Die Rotation der Textmaske in Bogenmaß.
scale	number	true	-	-	Der Maßstab der Textmaske.
fontSize	number	true	-	-	Die Schriftgröße des Textes in Pixeln.
fontFamily	string	true	-	-	Der Schriftfamilienname.
text	string	true	-	-	Der Textinhalt.
isBold	boolean	true	-	-	Ob der Text fett ist.
isItalic	boolean	true	-	-	Ob der Text kursiv ist.
letterSpacing	number	true	-	-	Buchstabenabstand in Pixeln.
inverse	boolean	false	-	-	Ob die Maske invertiert werden soll (Ausschnitt-Effekt erzeugen).

Pfad-Maske

Verwenden Sie einen benutzerdefinierten Vektorpfad (Bezier-Kurven) als Maske.

Eigenschaft	Typ	Erforderlich	Beispiel	Wertbereich	Beschreibung
type	string	true	-	path	Der Typ der Maske.
c	number	true	-	-	Ob der Pfad geschlossen (1) oder offen (0) ist. Geschlossene Pfade können gefüllt werden.
v	array	true	-	-	Array von Pfad-Scheitelpunkten. Jeder Punkt ist ein [x, y]-Array.
i	array	true	-	-	Array von eingehenden Tangentialkontrollpunkten für jeden Scheitelpunkt.
o	array	true	-	-	Array von ausgehenden Tangentialkontrollpunkten für jeden Scheitelpunkt.
inverse	boolean	false	-	-	Ob die Maske invertiert werden soll (Ausschnitt-Effekt erzeugen).

Wichtige Hinweise

Koordinatensystem: Alle Positionen (x, y, centerX, centerY) sind in Pixeln relativ zur ursprünglichen Größe des Elements.
Rotations-Einheiten: Rotationswerte sind in Bogenmaß, nicht in Grad. Um Grad in Bogenmaß umzuwandeln: radians = degrees * Math.PI / 180.
Inverse Masken: Wenn inverse: true, erzeugt die Maske einen Ausschnitt-Effekt - das Element ist überall sichtbar, außer im maskierten Bereich.
Maske vs Region:
- maskData schneidet das Element selbst zu (Knotenebene-Clipping)
- filterAgent.region begrenzt, wo ein Filtereffekt angewendet wird (Effekt-Ebene-Maskierung)
Leistung: Komplexe Masken (insbesondere Pfadmasken mit vielen Scheitelpunkten) können die Render-Leistung beeinträchtigen.

Overview

Element

Effect