Las máscaras se utilizan para recortar o dar forma a elementos. La propiedad maskData se puede aplicar a imágenes, videos y otros elementos visuales para controlar su área visible.
| Prop | Tipo | Requerido | Ejemplo | Rango de Valores | Descripción |
|---|---|---|---|---|---|
| type | string | true | - | crop | El tipo de máscara. |
| centerX | number | true | - | - | La posición horizontal del centro de la máscara, en píxeles. |
| centerY | number | true | - | - | La posición vertical del centro de la máscara, en píxeles. |
| width | number | true | - | - | El ancho de la máscara, en píxeles. |
| height | number | true | - | - | La altura de la máscara, en píxeles. |
| inverse | boolean | false | - | - | Si se debe invertir la máscara (crear un efecto de recorte). |
{
"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"
}
| Prop | Tipo | Requerido | Ejemplo | Rango de Valores | Descripción |
|---|---|---|---|---|---|
| type | string | true | - | shape | El tipo de máscara. |
| shapeType | string | true | - | SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATH | El tipo de forma para la máscara. |
| x | number | true | - | - | La posición horizontal de la máscara, en píxeles. |
| y | number | true | - | - | La posición vertical de la máscara, en píxeles. |
| scaleX | number | true | - | - | La escala horizontal de la máscara. |
| scaleY | number | true | - | - | La escala vertical de la máscara. |
| rotation | number | true | - | - | La rotación de la máscara, en radianes. |
| width | number | false | - | - | El ancho de la máscara, en píxeles. |
| height | number | false | - | - | La altura de la máscara, en píxeles. |
| fill | string | true | - | - | El color de relleno de la máscara, en formato hexadecimal. |
| view | object | true | - | - | Las propiedades de transformación de vista de la máscara. |
| pointNum | number | false | - | - | Número de puntos para formas de polígono o estrella. |
| innerRadius | number | false | - | - | Radio interno para formas de estrella (relativo al radio externo). |
| outerRadius | number | false | - | - | Radio externo para formas de estrella. |
| cornerRadius | number | false | - | - | Radio de esquina para formas de rectángulo redondeado. |
| inverse | boolean | false | - | - | Si se debe invertir la máscara (crear un efecto de recorte). |
{
"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"
}
Utiliza texto como una máscara para recortar un elemento en formas de texto.
| Prop | Tipo | Requerido | Ejemplo | Rango de Valores | Descripción |
|---|---|---|---|---|---|
| type | string | true | - | text | El tipo de máscara. |
| x | number | true | - | - | La posición horizontal de la máscara de texto, en píxeles. |
| y | number | true | - | - | La posición vertical de la máscara de texto, en píxeles. |
| rotation | number | true | - | - | La rotación de la máscara de texto, en radianes. |
| scale | number | true | - | - | La escala de la máscara de texto. |
| fontSize | number | true | - | - | El tamaño de fuente del texto, en píxeles. |
| fontFamily | string | true | - | - | El nombre de la familia de fuentes. |
| text | string | true | - | - | El contenido del texto. |
| isBold | boolean | true | - | - | Si el texto es negrita. |
| isItalic | boolean | true | - | - | Si el texto es cursiva. |
| letterSpacing | number | true | - | - | Espaciado entre letras en píxeles. |
| inverse | boolean | false | - | - | Si se debe invertir la máscara (crear un efecto de recorte). |
Utiliza una ruta vectorial personalizada (curvas de Bezier) como una máscara.
| Prop | Tipo | Requerido | Ejemplo | Rango de Valores | Descripción |
|---|---|---|---|---|---|
| type | string | true | - | path | El tipo de máscara. |
| c | number | true | - | - | Si la ruta está cerrada (1) o abierta (0). Las rutas cerradas pueden ser rellenadas. |
| v | array | true | - | - | Array de puntos de vértice de la ruta. Cada punto es un array [x, y]. |
| i | array | true | - | - | Array de puntos de control de tangente entrante para cada vértice. |
| o | array | true | - | - | Array de puntos de control de tangente saliente para cada vértice. |
| inverse | boolean | false | - | - | Si se debe invertir la máscara (crear un efecto de recorte). |
radianes = grados * Math.PI / 180.inverse: true, la máscara crea un efecto de recorte: el elemento es visible en todas partes excepto en el área enmascarada.maskData recorta el elemento en sí (recorte a nivel de nodo)filterAgent.region limita dónde se aplica un efecto de filtro (enmascaramiento a nivel de efecto)