Le maschere vengono utilizzate per ritagliare o modellare elementi. La proprietà maskData può essere applicata a immagini, video e altri elementi visivi per controllare la loro area visibile.
| Proprietà | Tipo | Richiesto | Esempio | Intervallo di valori | Descrizione |
|---|---|---|---|---|---|
| type | string | true | - | crop | Il tipo di maschera. |
| centerX | number | true | - | - | La posizione orizzontale del centro della maschera, in pixel. |
| centerY | number | true | - | - | La posizione verticale del centro della maschera, in pixel. |
| width | number | true | - | - | La larghezza della maschera, in pixel. |
| height | number | true | - | - | L'altezza della maschera, in pixel. |
| inverse | boolean | false | - | - | Se invertire la maschera (creare un effetto ritaglio). |
{
"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"
}
| Proprietà | Tipo | Richiesto | Esempio | Intervallo di valori | Descrizione |
|---|---|---|---|---|---|
| type | string | true | - | shape | Il tipo di maschera. |
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | Il tipo di forma per la maschera. |
| x | number | true | - | - | La posizione orizzontale della maschera, in pixel. |
| y | number | true | - | - | La posizione verticale della maschera, in pixel. |
| scaleX | number | true | - | - | La scala orizzontale della maschera. |
| scaleY | number | true | - | - | La scala verticale della maschera. |
| rotation | number | true | - | - | La rotazione della maschera, in radianti. |
| width | number | false | - | - | La larghezza della maschera, in pixel. |
| height | number | false | - | - | L'altezza della maschera, in pixel. |
| fill | string | true | - | - | Il colore di riempimento della maschera, in formato esadecimale. |
| view | object | true | - | - | Le proprietà di trasformazione della vista della maschera. |
| pointNum | number | false | - | - | Numero di punti per forme poligonali o a stella. |
| innerRadius | number | false | - | - | Raggio interno per forme a stella (rispetto al raggio esterno). |
| outerRadius | number | false | - | - | Raggio esterno per forme a stella. |
| cornerRadius | number | false | - | - | Raggio degli angoli per forme a rettangolo arrotondato. |
| inverse | boolean | false | - | - | Se invertire la maschera (creare un effetto ritaglio). |
{
"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"
}
Usa il testo come maschera per ritagliare un elemento in forme di testo.
| Proprietà | Tipo | Richiesto | Esempio | Intervallo di valori | Descrizione |
|---|---|---|---|---|---|
| type | string | true | - | text | Il tipo di maschera. |
| x | number | true | - | - | La posizione orizzontale della maschera di testo, in pixel. |
| y | number | true | - | - | La posizione verticale della maschera di testo, in pixel. |
| rotation | number | true | - | - | La rotazione della maschera di testo, in radianti. |
| scale | number | true | - | - | La scala della maschera di testo. |
| fontSize | number | true | - | - | La dimensione del carattere del testo, in pixel. |
| fontFamily | string | true | - | - | Il nome della famiglia di caratteri. |
| text | string | true | - | - | Il contenuto del testo. |
| isBold | boolean | true | - | - | Se il testo è in grassetto. |
| isItalic | boolean | true | - | - | Se il testo è in corsivo. |
| letterSpacing | number | true | - | - | Spaziatura delle lettere in pixel. |
| inverse | boolean | false | - | - | Se invertire la maschera (creare un effetto ritaglio). |
Usa un percorso vettoriale personalizzato (curve di Bezier) come maschera.
| Proprietà | Tipo | Richiesto | Esempio | Intervallo di valori | Descrizione |
|---|---|---|---|---|---|
| type | string | true | - | path | Il tipo di maschera. |
| c | number | true | - | - | Se il percorso è chiuso (1) o aperto (0). I percorsi chiusi possono essere riempiti. |
| v | array | true | - | - | Array di punti vertice del percorso. Ogni punto è un array [x, y]. |
| i | array | true | - | - | Array di punti di controllo della tangente in arrivo per ogni vertice. |
| o | array | true | - | - | Array di punti di controllo della tangente in uscita per ogni vertice. |
| inverse | boolean | false | - | - | Se invertire la maschera (creare un effetto ritaglio). |
radians = degrees * Math.PI / 180.inverse: true, la maschera crea un effetto ritaglio - l'elemento è visibile ovunque tranne che nell'area mascherata.maskData ritaglia il l'elemento stesso (ritaglio a livello di nodo)filterAgent.region limita dove viene applicato un effetto filtro (mascheramento a livello di effetto)