有关九宫格的解释

看到论坛有很多想问九宫格图的问题,在此我给大家讲一讲这个九宫格九宫格是利用一张很小的图片来绘制大区域图片的技术,用户可以制作九宫格图片,并设置拉伸的位置,图片会在贴图时只拉伸中心的部分,边角却不会被拉伸,这样只要设计时图片中心的颜色是纯色,那即使拉伸的再大也会保持原有的效果。

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


也许大家看过上图之后对九宫格一定有一定的认识了,让我们来结合CocoStudio编辑器来讲一讲。每一个可以设置图片的控件都能都设定九宫格属性,配置窗如下
如果大家之前做过安卓或ios客户端的话,可能会感觉不一样。在安卓中的九宫格(9path)都是由美工来处理,一切只需要添加两条(或四条)黑线来控制中心区域的位置,在ios中则更简洁(或者说更简陋,因为它只能用完全对称的九宫格)只需要两个值来确定四个角的区域。在cocos2d-x中,由于底层渲染的原因,它需要更多的参数,根据上表我们看到CocoStudio共四个参数:CapInsetsX、CapInsetsY、 CapInsetsWidth、 CapInsetsHeight。CapinsetsX、CapinsetsY是一对参数,它可以确定我们中心区域的左下角的坐标(Cocos2d-x是左下角为原点);CapinsetsWidth 和CapinsetsHeight则确定中心区域的大小;
有一点需要注意,正常情况下控件宽或高应该比2X、2Y要大。如果你设置的比这个小的话就会因为渲染顺序的原因照成重叠,显示非正常效果,当然如果你是高手的话你也可以利用这个性质制作特殊的贴图 :slight_smile: 。 有人自己做了发现边角也被拉伸了,此时请大家注意控件的缩放属性,一定要为1(不缩放)才行哦

— Begin quote from ____

%url%泰戈-cocos2d-张 发表于 2013-8-20 22:02
plist上的图片,在imageview的控件上,可以九宫格吗?

— End quote

可以支持的:)

Very good little article.

:7::7::7::7::7::7::7::7::7:

:7: :2: :2:

:14::14::14::14::14::14:跟踪下自己的帖子

我开始对这个还不明白,今天看了一篇博文才知道,原来斑竹早就发了这个了

:7::7::7:

请问一下这个效果运用在button控件上怎么处理呢?

button用这个不太合适吧··
虽然也能用,你保证图的处理一致就行

9宫格最常用的地方是:弹出框

弹出框用了9宫格,会很自由,可以根据内容变化大小。

请问中心区域指哪里?
是四个角的区域大小,还是整个图片的正中央区域大小?
这个区域跟锚点有关系么?

这个是正中央区域,和锚点无关。

九宫格原点有什么限制(除了要小于图片本身的宽高一半)?

CocoStudio共四个参数:

“CapInsetsX”、“CapInsetsY” 是一对参数,它可以确定我们中心区域的左下角的坐标(Cocos2d-x是左下角为原点);

“CapInsetsWidth”、"CapInsetsHeight"则确定中心区域的大小;

这个限制不是死的,主要是需要了解原点的概念。

mark:2: must mark

版主,为什么我用这个九宫格,在ios上显示正常,但是在android就花屏了呢

花了
???给个图瞅瞅

懂了,谢谢楼主