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
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
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
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.