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.
Se você precisar de precisão melhor, insira valores de deslocamento nos campos do lado direito da janela do editor.
À medida que você reposiciona as linhas do draguer, o elemento da interface do usuário é atualizado automaticamente para mostrar o resultado.
Os valores de deslocamento são diferentes dos valores de propriedade do Objetoda interface do usuário SliceCenter e representam o número de píxeis entre um lado da imagem de origem e o draguer associado aquele lado.