Masks are used to crop or shape elements. The maskData property can be applied to image, video, and other visual elements to control their visible area.
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| type | string | true | - | crop | The type of mask. |
| centerX | number | true | - | - | The horizontal position of the mask center, in pixels. |
| centerY | number | true | - | - | The vertical position of the mask center, in pixels. |
| width | number | true | - | - | The width of the mask, in pixels. |
| height | number | true | - | - | The height of the mask, in pixels. |
| inverse | boolean | false | - | - | Whether to invert the mask (create a cutout effect). |
1{
2 "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
3 "type": "Image",
4 "start": 0,
5 "duration": 5,
6 "trackIndex": 0,
7 "x": -58.59302855661144,
8 "y": 48.394393104046685,
9 "blendMode": "normal",
10 "anchorX": 1051.1350332909515,
11 "anchorY": 2519.1996978825114,
12 "rotation": 0,
13 "maskData": {
14 "type": "crop",
15 "centerX": 1051.1350332909515,
16 "centerY": 2519.1996978825114,
17 "width": 2121.862754282655,
18 "height": 2949.902587890625
19 },
20 "scaleX": 0.23356401384083045,
21 "scaleY": 0.23356401384083045,
22 "alpha": 1,
23 "skewX": 0,
24 "skewY": 0,
25 "keyframes": [],
26 "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
27 "ext": "jpeg"
28}
29| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| type | string | true | - | shape | The type of mask. |
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | The type of shape for the mask. |
| x | number | true | - | - | The horizontal position of the mask, in pixels. |
| y | number | true | - | - | The vertical position of the mask, in pixels. |
| scaleX | number | true | - | - | The horizontal scale of the mask. |
| scaleY | number | true | - | - | The vertical scale of the mask. |
| rotation | number | true | - | - | The rotation of the mask, in radians. |
| width | number | false | - | - | The width of the mask, in pixels. |
| height | number | false | - | - | The height of the mask, in pixels. |
| fill | string | true | - | - | The fill color of the mask, in hexadecimal format. |
| view | object | true | - | - | The view transformation properties of the mask. |
| pointNum | number | false | - | - | Number of points for polygon or star shapes. |
| innerRadius | number | false | - | - | Inner radius for star shapes (relative to outer radius). |
| outerRadius | number | false | - | - | Outer radius for star shapes. |
| cornerRadius | number | false | - | - | Corner radius for rounded rectangle shapes. |
| inverse | boolean | false | - | - | Whether to invert the mask (create a cutout effect). |
1{
2 "id": "0a2db861-19c0-47d0-9e71-5a56a357e2e9",
3 "type": "Image",
4 "start": 0,
5 "duration": 5,
6 "trackIndex": 0,
7 "x": -58.59302855661144,
8 "y": 48.394393104046685,
9 "blendMode": "normal",
10 "anchorX": 1051.1350332909515,
11 "anchorY": 2519.1996978825114,
12 "rotation": 0,
13 "maskData": {
14 "type": "shape",
15 "shapeType": "SHAPE_ELLIPSE",
16 "x": 1935.8609161703698,
17 "y": 2120.7135441063306,
18 "scaleX": 1,
19 "scaleY": 1,
20 "rotation": 0,
21 "width": 2604,
22 "height": 2604,
23 "fill": "#ffffff",
24 "view": {
25 "scaleX": 1,
26 "scaleY": 1,
27 "x": 0,
28 "y": 0,
29 "width": 2604,
30 "height": 2604,
31 "rotation": 0,
32 "anchorX": 0,
33 "anchorY": 0
34 }
35 },
36 "scaleX": 0.23356401384083045,
37 "scaleY": 0.23356401384083045,
38 "alpha": 1,
39 "skewX": 0,
40 "skewY": 0,
41 "keyframes": [],
42 "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
43 "ext": "jpeg"
44}
45Use text as a mask to crop an element into text shapes.
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| type | string | true | - | text | The type of mask. |
| x | number | true | - | - | The horizontal position of the text mask, in pixels. |
| y | number | true | - | - | The vertical position of the text mask, in pixels. |
| rotation | number | true | - | - | The rotation of the text mask, in radians. |
| scale | number | true | - | - | The scale of the text mask. |
| fontSize | number | true | - | - | The font size of the text, in pixels. |
| fontFamily | string | true | - | - | The font family name. |
| text | string | true | - | - | The text content. |
| isBold | boolean | true | - | - | Whether the text is bold. |
| isItalic | boolean | true | - | - | Whether the text is italic. |
| letterSpacing | number | true | - | - | Letter spacing in pixels. |
| inverse | boolean | false | - | - | Whether to invert the mask (create a cutout effect). |
Use a custom vector path (Bezier curves) as a mask.
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| type | string | true | - | path | The type of mask. |
| c | number | true | - | - | Whether the path is closed (1) or open (0). Closed paths can be filled. |
| v | array | true | - | - | Array of path vertex points. Each point is a [x, y] array. |
| i | array | true | - | - | Array of incoming tangent control points for each vertex. |
| o | array | true | - | - | Array of outgoing tangent control points for each vertex. |
| inverse | boolean | false | - | - | Whether to invert the mask (create a cutout effect). |
radians = degrees * Math.PI / 180.inverse: true, the mask creates a cutout effect - the element is visible everywhere except the masked area.maskData crops the element itself (node-level clipping)filterAgent.region limits where a filter effect is applied (effect-level masking)