|
看到论坛有很多想问九宫格图的问题，在此我给大家讲一讲这个九宫格九宫格是利用一张很小的图片来绘制大区域图片的技术，用户可以制作九宫格图片，并设置拉伸的位置，图片会在贴图时只拉伸中心的部分，边角却不会被拉伸，这样只要设计时图片中心的颜色是纯色，那即使拉伸的再大也会保持原有的效果。
正常情况下九宫格绘制会遵循下面的规则：a. 保持4个角部分不变形b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）  20130814002.png722×247
也许大家看过上图之后对九宫格一定有一定的认识了，让我们来结合CocoStudio编辑器来讲一讲。每一个可以设置图片的控件都能都设定九宫格属性，配置窗如下 
如果大家之前做过安卓或ios客户端的话，可能会感觉不一样。在安卓中的九宫格（9path）都是由美工来处理，一切只需要添加两条（或四条）黑线来控制中心区域的位置，在ios中则更简洁（或者说更简陋，因为它只能用完全对称的九宫格）只需要两个值来确定四个角的区域。在cocos2d-x中，由于底层渲染的原因，它需要更多的参数，根据上表我们看到CocoStudio共四个参数：CapInsetsX、CapInsetsY、 CapInsetsWidth、 CapInsetsHeight。CapinsetsX、CapinsetsY是一对参数，它可以确定我们中心区域的左下角的坐标（Cocos2d-x是左下角为原点）；CapinsetsWidth 和CapinsetsHeight则确定中心区域的大小；
有一点需要注意，正常情况下控件宽或高应该比2X、2Y要大。如果你设置的比这个小的话就会因为渲染顺序的原因照成重叠，显示非正常效果，当然如果你是高手的话你也可以利用这个性质制作特殊的贴图  。 有人自己做了发现边角也被拉伸了，此时请大家注意控件的缩放属性，一定要为1（不缩放）才行哦
|