Passar para o conteúdo principal
Mascaramento de Elementos
Atualizado há mais de uma semana

Máscaras permite ocultar algumas partes de um elemento e mostrar outras partes.

Eles são especialmente úteis para dar molduras ou formas personalizadas para imagens carregadas dinamicamente, como avatares de usuários ou mídia de postagem, onde você não tem a possibilidade de editar essas imagens. Também é muito útil dar uma aparência personalizada às suas próprias imagens, sem ter que editar as próprias imagens originais.

Você encontrará a configuração de máscara na seção Aparência de vários building blocks: container, image, text, progress bar e rectangle.

Máscara de Área

Disponível apenas para contêineres, este tipo de máscara irá ocultar todas as partes de todos os descendentes do contêiner que ultrapassam os limites do próprio contêiner.

Máscara de área: desligada

Máscara de área: ligada

Máscara de Gradiente

Este tipo de máscara usa um gradiente como camada de máscara.

Diferente dos gradientes de fundo, o controle de gradiente de máscara não permite alterar as cores, mas apenas a opacidade de cada etapa do gradiente. Isso porque as cores não farão nenhuma diferença: o importante é sempre a opacidade.

Máscara de gradiente aplicada a um elemento de imagem

Máscara de imagem

Este tipo de máscara usa uma imagem como camada de máscara. Mais especificamente: ele usa o canal alfa da imagem.

A imagem da máscara funcionará desde que tenha áreas transparentes. Os pixels opacos da imagem se tornarão as partes visíveis do seu elemento e os pixels transparentes serão ocultados.

Você pode configurar as mesmas coisas em relação à imagem da máscara e às imagens de fundo: modo de cobertura, lado a lado e posição.

Máscara de imagem aplicada a um elemento de imagem

Casos de Uso

Máscara de Área

No exemplo abaixo adicionamos uma máscara a um Container e usamos a máscara para ocultar partes do plano de fundo.

Você pode editar uma máscara de área para subtrair da região mascarada.

Você também pode definir o formato da sua máscara alterando as propriedades do Container, como largura, altura, bordas, etc.

Máscara de Gradiente

No exemplo, usamos uma máscara de gradiente para ajudar a mesclar uma imagem com outra.

A profundidade e a opacidade da mesclagem podem ser ajustadas, assim como o modo de mesclagem da camada.

Máscara de Imagem

Os logotipos típicos têm um preenchimento estático e sólido e são criados para serem colocados no topo da sua filmagem.

No exemplo abixo, as máscaras de imagem permitem reproduzir imagens dentro do contorno do seu logotipo.

Você também pode criar uma máscara de imagem de forma que altere ou interaja com um clipe existente em seu Gráfico para colocar o nome de um concorrente, apresentador, entre outros, como neste caso de uso.

Respondeu à sua pergunta?