Máscara

Máscaras são usadas para recortar ou moldar elementos. A propriedade maskData pode ser aplicada a imagens, vídeos e outros elementos visuais para controlar sua área visível.

Tipos de Máscara

recortar: Recorte retangular simples
forma: Máscara baseada em forma (elipse, retângulo, estrela, polígono, etc.)
texto: Máscara baseada em texto
caminho: Máscara de caminho personalizado

Máscara de Recorte

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
type	string	true	-	crop	O tipo de máscara.
centerX	number	true	-	-	A posição horizontal do centro da máscara, em pixels.
centerY	number	true	-	-	A posição vertical do centro da máscara, em pixels.
width	number	true	-	-	A largura da máscara, em pixels.
height	number	true	-	-	A altura da máscara, em pixels.
inverse	boolean	false	-	-	Se deve inverter a máscara (criar um efeito de recorte).

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

Máscara de Forma

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
type	string	true	-	shape	O tipo de máscara.
shapeType	string	true	-	SHAPE_RECT \| SHAPE_ELLIPSE \| SHAPE_STAR \| SHAPE_POLYGON \| SHAPE_PATH	O tipo de forma para a máscara.
x	number	true	-	-	A posição horizontal da máscara, em pixels.
y	number	true	-	-	A posição vertical da máscara, em pixels.
scaleX	number	true	-	-	A escala horizontal da máscara.
scaleY	number	true	-	-	A escala vertical da máscara.
rotation	number	true	-	-	A rotação da máscara, em radianos.
width	number	false	-	-	A largura da máscara, em pixels.
height	number	false	-	-	A altura da máscara, em pixels.
fill	string	true	-	-	A cor de preenchimento da máscara, em formato hexadecimal.
view	object	true	-	-	As propriedades de transformação de visualização da máscara.
pointNum	number	false	-	-	Número de pontos para formas de polígono ou estrela.
innerRadius	number	false	-	-	Raio interno para formas de estrela (relativo ao raio externo).
outerRadius	number	false	-	-	Raio externo para formas de estrela.
cornerRadius	number	false	-	-	Raio dos cantos para formas de retângulo arredondado.
inverse	boolean	false	-	-	Se deve inverter a máscara (criar um efeito de recorte).

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

Máscara de Texto

Use texto como uma máscara para recortar um elemento em formas de texto.

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
type	string	true	-	text	O tipo de máscara.
x	number	true	-	-	A posição horizontal da máscara de texto, em pixels.
y	number	true	-	-	A posição vertical da máscara de texto, em pixels.
rotation	number	true	-	-	A rotação da máscara de texto, em radianos.
scale	number	true	-	-	A escala da máscara de texto.
fontSize	number	true	-	-	O tamanho da fonte do texto, em pixels.
fontFamily	string	true	-	-	O nome da família da fonte.
text	string	true	-	-	O conteúdo do texto.
isBold	boolean	true	-	-	Se o texto é negrito.
isItalic	boolean	true	-	-	Se o texto é itálico.
letterSpacing	number	true	-	-	Espaçamento entre letras em pixels.
inverse	boolean	false	-	-	Se deve inverter a máscara (criar um efeito de recorte).

Máscara de Caminho

Use um caminho vetorial personalizado (curvas de Bezier) como uma máscara.

Propriedade	Tipo	Necessário	Exemplo	Faixa de Valores	Descrição
type	string	true	-	path	O tipo de máscara.
c	number	true	-	-	Se o caminho está fechado (1) ou aberto (0). Caminhos fechados podem ser preenchidos.
v	array	true	-	-	Array de pontos de vértice do caminho. Cada ponto é um array [x, y].
i	array	true	-	-	Array de pontos de controle de tangente de entrada para cada vértice.
o	array	true	-	-	Array de pontos de controle de tangente de saída para cada vértice.
inverse	boolean	false	-	-	Se deve inverter a máscara (criar um efeito de recorte).

Notas Importantes

Sistema de Coordenadas: Todas as posições (x, y, centerX, centerY) estão em pixels em relação ao tamanho original do elemento.
Unidades de Rotação: Os valores de rotação estão em radianos, não em graus. Para converter graus em radianos: radians = degrees * Math.PI / 180.
Máscaras Inversas: Quando inverse: true, a máscara cria um efeito de recorte - o elemento é visível em todos os lugares, exceto na área mascarada.
Máscara vs Região:
- maskData recorta o próprio elemento (clipping a nível de nó)
- filterAgent.region limita onde um efeito de filtro é aplicado (máscara a nível de efeito)
Desempenho: Máscaras complexas (especialmente máscaras de caminho com muitos vértices) podem impactar o desempenho de renderização.

Overview

Element

Effect