Masker

Maskers worden gebruikt om elementen bij te snijden of te vormen. De maskData eigenschap kan worden toegepast op afbeeldingen, video's en andere visuele elementen om hun zichtbare gebied te beheersen.

Maskertype

bijsnijden: Eenvoudig rechthoekig bijsnijden
vorm: Vorm-gebaseerde masker (ellipse, rechthoek, ster, veelhoek, enz.)
tekst: Tekst-gebaseerde masker
pad: Aangepaste padmasker

Bijsnijdmasker

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
type	string	true	-	crop	Het type masker.
centerX	number	true	-	-	De horizontale positie van het maskermidden, in pixels.
centerY	number	true	-	-	De verticale positie van het maskermidden, in pixels.
width	number	true	-	-	De breedte van het masker, in pixels.
height	number	true	-	-	De hoogte van het masker, in pixels.
inverse	boolean	false	-	-	Of het masker omgekeerd moet worden (een uitsnedeffect creëren).

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

Vormmasker

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
type	string	true	-	shape	Het type masker.
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	Het type vorm voor het masker.
x	number	true	-	-	De horizontale positie van het masker, in pixels.
y	number	true	-	-	De verticale positie van het masker, in pixels.
scaleX	number	true	-	-	De horizontale schaal van het masker.
scaleY	number	true	-	-	De verticale schaal van het masker.
rotation	number	true	-	-	De rotatie van het masker, in radianten.
width	number	false	-	-	De breedte van het masker, in pixels.
height	number	false	-	-	De hoogte van het masker, in pixels.
fill	string	true	-	-	De vulkleur van het masker, in hexadecimale indeling.
view	object	true	-	-	De transformatie-eigenschappen van het masker.
pointNum	number	false	-	-	Aantal punten voor veelhoek- of stervormen.
innerRadius	number	false	-	-	Binnenstraal voor stervormen (ten opzichte van de buitenstraal).
outerRadius	number	false	-	-	Buitenstraal voor stervormen.
cornerRadius	number	false	-	-	Hoekradius voor afgeronde rechthoekvormen.
inverse	boolean	false	-	-	Of het masker omgekeerd moet worden (een uitsnedeffect creëren).

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

Tekstmasker

Gebruik tekst als masker om een element in tekstvormen bij te snijden.

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
type	string	true	-	text	Het type masker.
x	number	true	-	-	De horizontale positie van de tekstmasker, in pixels.
y	number	true	-	-	De verticale positie van de tekstmasker, in pixels.
rotation	number	true	-	-	De rotatie van de tekstmasker, in radianten.
scale	number	true	-	-	De schaal van de tekstmasker.
fontSize	number	true	-	-	De lettergrootte van de tekst, in pixels.
fontFamily	string	true	-	-	De naam van het lettertype.
text	string	true	-	-	De tekstinhoud.
isBold	boolean	true	-	-	Of de tekst vet is.
isItalic	boolean	true	-	-	Of de tekst cursief is.
letterSpacing	number	true	-	-	Letterafstand in pixels.
inverse	boolean	false	-	-	Of het masker omgekeerd moet worden (een uitsnedeffect creëren).

Padmasker

Gebruik een aangepast vectorpad (Bezier-curven) als masker.

Eigenschap	Type	Vereist	Voorbeeld	Waardenbereik	Omschrijving
type	string	true	-	path	Het type masker.
c	number	true	-	-	Of het pad gesloten (1) of open (0) is. Gesloten paden kunnen worden gevuld.
v	array	true	-	-	Array van padhoekpunten. Elk punt is een [x, y] array.
i	array	true	-	-	Array van inkomende tangentiële controlepunten voor elk hoekpunt.
o	array	true	-	-	Array van uitgaande tangentiële controlepunten voor elk hoekpunt.
inverse	boolean	false	-	-	Of het masker omgekeerd moet worden (een uitsnedeffect creëren).

Belangrijke Opmerkingen

Coördinatensysteem: Alle posities (x, y, centerX, centerY) zijn in pixels relatief aan de oorspronkelijke grootte van het element.
Rotatie-eenheden: Rotatiewaarden zijn in radianten, niet in graden. Om graden naar radianten om te rekenen: radians = degrees * Math.PI / 180.
Inverse Maskers: Wanneer inverse: true, creëert het masker een uitsnedeffect - het element is zichtbaar overal behalve in het gemaskeerde gebied.
Masker vs Regio:
- maskData snijdt het element zelf (knooppunt-niveau knippen)
- filterAgent.region beperkt waar een filtereffect wordt toegepast (effect-niveau maskering)
Prestaties: Complexe maskers (vooral padmaskers met veel hoekpunten) kunnen de renderprestaties beïnvloeden.

Overview

Element

Effect