ナインスライス

作成日
更新日

画像(特にUI用の枠やパネルなど)を 3x3の9つの領域 に分割し、それぞれの領域ごとに異なるスケーリングルールを適用することで、柔軟にサイズ変更ができる仕組み。

こんなふうに画像を分割する。

+---+-------+---+
| 1 |   2   | 3 |
+---+-------+---+
| 4 |   5   | 6 |
+---+-------+---+
| 7 |   8   | 9 |
+---+-------+---+
  • 1, 3, 7, 9(四隅)はそのままのサイズで描画される(スケーリングなし)
  • 2, 4, 6, 8(辺)は片方向にスケーリング
  • 5(中央)は縦横両方向にスケーリング

この分割によって、画像の角のデザイン(丸みや影)を崩さずに、中央部分を伸縮してUIを柔軟に表示可能になる。

サイトアイコン
公開日
更新日