Les masques sont utilisés pour rogner ou façonner des éléments. La propriété maskData peut être appliquée aux images, vidéos et autres éléments visuels pour contrôler leur zone visible.
| Propriété | Type | Requis | Exemple | Plage de valeurs | Description |
|---|---|---|---|---|---|
| type | string | true | - | crop | Le type de masque. |
| centerX | number | true | - | - | La position horizontale du centre du masque, en pixels. |
| centerY | number | true | - | - | La position verticale du centre du masque, en pixels. |
| width | number | true | - | - | La largeur du masque, en pixels. |
| height | number | true | - | - | La hauteur du masque, en pixels. |
| inverse | boolean | false | - | - | S'il faut inverser le masque (créer un effet de découpe). |
{
"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"
}
| Propriété | Type | Requis | Exemple | Plage de valeurs | Description |
|---|---|---|---|---|---|
| type | string | true | - | shape | Le type de masque. |
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | Le type de forme pour le masque. |
| x | number | true | - | - | La position horizontale du masque, en pixels. |
| y | number | true | - | - | La position verticale du masque, en pixels. |
| scaleX | number | true | - | - | L'échelle horizontale du masque. |
| scaleY | number | true | - | - | L'échelle verticale du masque. |
| rotation | number | true | - | - | La rotation du masque, en radians. |
| width | number | false | - | - | La largeur du masque, en pixels. |
| height | number | false | - | - | La hauteur du masque, en pixels. |
| fill | string | true | - | - | La couleur de remplissage du masque, au format hexadécimal. |
| view | object | true | - | - | Les propriétés de transformation de vue du masque. |
| pointNum | number | false | - | - | Nombre de points pour les formes de polygone ou d'étoile. |
| innerRadius | number | false | - | - | Rayon intérieur pour les formes d'étoile (par rapport au rayon extérieur). |
| outerRadius | number | false | - | - | Rayon extérieur pour les formes d'étoile. |
| cornerRadius | number | false | - | - | Rayon des coins pour les formes de rectangle arrondi. |
| inverse | boolean | false | - | - | S'il faut inverser le masque (créer un effet de découpe). |
{
"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"
}
Utilisez le texte comme un masque pour rogner un élément en formes de texte.
| Propriété | Type | Requis | Exemple | Plage de valeurs | Description |
|---|---|---|---|---|---|
| type | string | true | - | text | Le type de masque. |
| x | number | true | - | - | La position horizontale du masque de texte, en pixels. |
| y | number | true | - | - | La position verticale du masque de texte, en pixels. |
| rotation | number | true | - | - | La rotation du masque de texte, en radians. |
| scale | number | true | - | - | L'échelle du masque de texte. |
| fontSize | number | true | - | - | La taille de la police du texte, en pixels. |
| fontFamily | string | true | - | - | Le nom de la famille de police. |
| text | string | true | - | - | Le contenu du texte. |
| isBold | boolean | true | - | - | S'il faut que le texte soit en gras. |
| isItalic | boolean | true | - | - | S'il faut que le texte soit en italique. |
| letterSpacing | number | true | - | - | Espacement des lettres en pixels. |
| inverse | boolean | false | - | - | S'il faut inverser le masque (créer un effet de découpe). |
Utilisez un chemin vectoriel personnalisé (courbes de Bezier) comme masque.
| Propriété | Type | Requis | Exemple | Plage de valeurs | Description |
|---|---|---|---|---|---|
| type | string | true | - | path | Le type de masque. |
| c | number | true | - | - | S'il faut que le chemin soit fermé (1) ou ouvert (0). Les chemins fermés peuvent être remplis. |
| v | array | true | - | - | Tableau de points de sommet du chemin. Chaque point est un tableau [x, y]. |
| i | array | true | - | - | Tableau de points de contrôle de tangente entrants pour chaque sommet. |
| o | array | true | - | - | Tableau de points de contrôle de tangente sortants pour chaque sommet. |
| inverse | boolean | false | - | - | S'il faut inverser le masque (créer un effet de découpe). |
radians = degrees * Math.PI / 180.inverse: true, le masque crée un effet de découpe - l'élément est visible partout sauf dans la zone masquée.maskData rogne l'élément lui-même (clipping au niveau du nœud)filterAgent.region limite l'endroit où un effet de filtre est appliqué (masquage au niveau de l'effet)