斜方向的九宫格图片拉伸

斜方向的九宫格图片拉伸

先上最终效果图：

阅读本文需要的基础知识：网格，顶点属性

一般九宫格拉伸的原理

在ui制作过程中，九宫格技术通常被用来拉伸一些某个维度上没有明显变化区域。比如按钮和一些界面的底图。它的原理是把一个大的矩形分为9个矩形，保留四个角的矩形不变，上下矩形在横向上无变化作横向拉伸，左右矩形在竖向上无变化作竖向拉伸，中间矩形在横向和竖向都无变化作两个方向拉伸。

在unity中，需要设置精灵图片的border来指定拉伸区域。这种做法的好处就是节省图片资源，用更小分辨率的图去完成更大分辨率的图该做的事。

斜方向九宫格拉伸

最近接到了个需求：slg中点击地块会有选中格子的示意，现在需要从点击一个地块变为点击25个地块。然而实际情况是地块示意图是不能被正常水平和垂直拉伸的。。只能被斜方向拉伸。。为了这么一个东西去扩大贴图是极其浪费资源的，于是我想是否能通过斜方向拉伸九宫格来实现。百度谷歌了一圈似乎也没有翻到有人造这个轮子，只好自己写了！

首先分析斜方向拉伸的网格分布：