Cocos中有关九宫格的解释

Cocos中有关九宫格的解释
九宫格是利用一张很小的图片来绘制大区域图片的技术，用户可以制作九宫格图片，并设置拉伸的位置，图片会在贴图时只拉伸中心的部分，边角却不会被拉伸，这样只要设计时图片中心的颜色是纯色，那即使拉伸的再大也会保持原有的效果。

正常情况下九宫格绘制会遵循下面的规则：
a. 保持4个角部分不变形
b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）
c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）

也许大家看过上图之后对九宫格一定有一定的认识了，让我们来结合CocoStudio编辑器来讲一讲。
每一个可以设置图片的控件都能都设定九宫格属性，配置窗如下

如果大家之前做过安卓或ios客户端的话，可能会感觉不一样。在安卓中的九宫格（9path）都是由美工来处理，一切只需要添加两条（或四条）黑线来控制中心区域的位置，在ios中则更简洁（或者说更简陋，因为它只能用完全对称的九宫格）只需要两个值来确定四个角的区域。
在cocos2d-x中，由于底层渲染的原因，它需要更多的参数，根据上表我们看到CocoStudio共四个参数：
CapInsetsX、CapInsetsY、 CapInsetsWidth、 CapInsetsHeight。
CapinsetsX、CapinsetsY是一对参数，它可以确定我们中心区域的左下角的坐标（Cocos2d-x是左下角为原点）；
CapinsetsWidth 和CapinsetsHeight则确定中心区域的大小；

有一点需要注意，正常情况下控件宽或高应该比2*X、2*Y要大。如果你设置的比这个小的话就会因为渲染顺序的原因照成重叠，显示非正常效果，当然如果你是高手的话你也可以利用这个性质制作特殊的贴图 ^_^ 。
有人自己做了发现边角也被拉伸了，此时请大家注意控件的缩放属性，一定要为1（不缩放）才行哦