cocos2d-x 使用 CCScale9Sprite

什么是九宫格构图？

    有个概念叫九宫格构图，说的就是这种会变化背景的情况。大家都知道图片是不可以随便拉抻的，无论是缩小还是放大，都会使图形虚化，影响显示效果。如果不能拉抻，就进行拼接。这就是这种策略的思路。

    首先它会将一个图分成九份：

      

    为了能够看清楚，我进行了缩放。大家也看到了，缩放产生的虚化问题。

    拼接是如何进行的呢？当显示应该超过图片原有大小时，四个边的顶点图像不会改变，四个边的中间部分进行拼接，这样就扩展了图片的大小。中间空出来的部分由中间来进行拼接。因此这张基础图不应该有花纹在上面，不然就会拼乱了。

3、编码九宫格

     原来缩放可以这么简单的实现。而且令人高兴的是cocos2d-x已经对这种模型进行封装，不需要大家自己来构建。下面就动手编码。

在cocos2d-x引擎中，CCScale9Sprite这个文件的位置为：

一、九宫格的实现

（1）原理

实现非常巧妙，是通过1个CCSpriteBatchNode和9个CCSprite来实现的，原理很简单，通过将原纹理资源切割成9部分（PS: 这也是叫九宫格的原因），根据想要的尺寸，完成以下的三个步骤：

a. 保持4个角部分不变形

b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）

c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）

（2）实现

CCSpriteBatchNode的资源为整个的纹理，9个CCSprite对应于纹理的9个部分（根据纹理不同，9部分所占比例会有所不同），根据想要的尺寸，将9部分拼装在一起！