Ao criar UI com bordas e cantos personalizados, você muitas vezes precisará renderizar elementos em diferentes ratios de aspecto e visualmente envolver texto localizado ou outros conteúdos de dimensões desconhecidas. Isso permite que você crie elementos de UI de tamanhos diferentes sem distorcer os cantos ou bordas.


Sob o aproximação de 9-Slice , uma imagem (um único ativoimagem Roblox) é internamente dividida em nove sub-imagens, cada uma com regras de escalonamento diferentes.

Sub-Imagem | Redimensionando |
---|---|
137 0> 90> (cantos) | nenhum |
28 (canto superior/ inferior) | horizontal |
46 (边es esquerdo/direito) | vertical |
5 (centro) | horizontal + vertical |
Editor do Studio
A configuração de fatia é possível ao definir diretamente o Enum.ScaleType e propriedades de fatia em uma etiqueta de imagem ou botão, mas a 9-Slice Editor do Studio é mais intuitiva.
Abrindo o Editor
Para abrir o visual Editor de 9-Slice no Studio:

- Defina a propriedade ScaleType para Slice .

- Clique na propriedade SliceCenter que aparece, então clique no … dentro da linha.

- Na janela que se abre, 4 linhas vermelhas sobreposição de imagem, representando as bordas das fatias. O tamanho da imagem de origem também é exibido.

Configurando Deslocamentos
In Studio, drag the red lines to set the 偏移 from the left, right, top, and bottom sides of the image.

À medida que você reposiciona as linhas do draguer, o elemento da interface do usuário é atualizado automaticamente para mostrar o resultado.



