【引言】

首先先为题目向大家道歉，本文主要介绍了 Scale9Sprite的原理以及基本用法，使用的是cocos2dx2.x版本，但是其中的原理和cocos2dx 3.x版本的相同。可以借鉴其原理使用Scale9Sprite类。

看到CCScale9Sprite，很容易联想到精灵类CCSprite。两者又有什么区别呢？因此我就去网上收了一些有关CCScale9Sprite的资料来学习。

【参考文献】

[1]http://www.voidcn.com/article/p-cbbcaxhz-ur.html

[2]http://www.cnblogs.com/moodlxs/archive/2012/12/26/2834235.html

[3]http://blog.sina.com.cn/s/blog_7d1531ed010167pq.html

[4]http://www.voidcn.com/article/p-utzesqcc-bck.html

[5]http://www.voidcn.com/article/p-kpxfjili-bcz.html

---

【CCScale9Sprite】

对于CCScale9Sprite类，不知道该怎么翻译，有人叫它点九图，有人叫它九宫图，有有人叫它九妹图。

那么什么是CCScale9Sprite呢？CCScale9Sprite对象，是一种CCSprite对象的变形，它的用法和CCSprite类似，不同点是：CCScale9Sprite对象有个特性就是缩放贴图时可以尽量不失帧。

如下图所示，用普通的CCSprite拉伸后四个角模糊失真了，而是用CCScale9Sprite进行拉伸后，依旧很清晰。

1、原理：

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

（1）保持4个角部分不变形

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

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

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

2、需要引用的头文件及命名空间：

#include "extensions/cocos-ext.h"
USING_NS_CC_EXT; 

如果以上代码添加出错可以查看资料：http://blog.csdn.net/lengxue789/article/details/38228107，既可修正

3、常用操作如下：

CCScale9Sprite继承于CCNodeRGBA，所以除了可以使用以下自定义的操作外，还可以使用节点类CCNode、以及节点颜色类CCNodeRGBA的相关函数操作。

/************************************************************************/
/*以上面原理部分提到的图片为例											*/
/************************************************************************/

classCCScale9Sprite:publicCCNodeRGBA
{
/**
*		创建的三类方式
*		create,createWithSpriteFrame,createWithSpriteFramename
*/

//使用图片资源名来创建
//参数说明：
//		rect整个图的矩形大小
//		capInsets中间部分区域对应的矩形大小
//rect=CCRectMake(0,80,80);
//capInsets=CCRectMake(12,12,56,56);
//create("sp.png",rect,capInsets);
//create(capInsets,"sp.png");
staticCCScale9Sprite*create(constchar*filE);
staticCCScale9Sprite*create(constchar*file,CCRectrect);
staticCCScale9Sprite*create(constchar*file,CCRectrect,CCRectcapInsets);
staticCCScale9Sprite*create(CCRectcapInsets,constchar*filE);

//使用精灵帧来创建
staticCCScale9Sprite*createWithSpriteFrame(CCSpriteFrame*spriteFramE);
staticCCScale9Sprite*createWithSpriteFrame(CCSpriteFrame*spriteFrame,CCRectcapInsets);

//使用精灵帧的名称来创建
staticCCScale9Sprite*createWithSpriteFramename(constchar*spriteFrameName);
staticCCScale9Sprite*createWithSpriteFramename(constchar*spriteFramename,CCRectcapInsets);


/**
*		属性设置
*		setSpriteFrame,setCapInsets,*		setPreferredSize,setContentSize,*		setOpacity,setColor
*/

//设置精灵帧
virtualvoidsetSpriteFrame(CCSpriteFrame*spriteFramE);

//设置中间部分区域对应的矩形大小
CC_PROPERTY(CCRect,m_capInsets,CapInsets);


//设置需要生成的尺寸大小，默认为精灵图的原始大小
CC_PROPERTY(CCSize,m_preferredSize,PreferredSizE);

//CCScale9Sprite是通过这个来拉伸的，而CCSprtie是通过setScale来拉伸。
virtualvoidsetContentSize(constCCSize&sizE);


//设置透明度
virtualvoidsetOpacity(GLubyteopacity);
virtualGLubytegetOpacity();

//设置颜色
virtualvoidsetColor(constccColor3B&color);
virtualconstccColor3B&getColor();

};
//

4、使用说明：

（1）关于参数：

当使用CCScale9Sprite::create(const char* file,CCRect rect,CCRect capInsets);进行创建的时候，必须要注意理解rect和capInsets这两个参数。

在曾经讲到的精灵类CCSprite中，是否还记得下列创建的方法？

CCSprite::create(constchar*pszFilename,constCCRect&rect);

该方法就是使用pszFilename图片资源，并从中截取某区域矩形的小图rect，来创建CCSprite精灵。当然若为设置rect的话，默认为整张图片的大小。

而在CCScale9Sprite中的rect其实用法也是一样的。如果是需要整张图片资源sp.png的话，只要设置rect为整张图片的大小，坐标为(0,0)即可。

另外对于capInsets的设置，则是决定了CCScale9Sprite的九宫分割的区域大小。若未对CCScale9Sprite的capInsets进行设置，创建的九宫图的分区为九等分。capInsets则是设置了中间区域的大小，从而得到其他8块区域的大小。（这样就不一定是等分了）

（2）关于图片拉伸：

我们都知道CCSprite的拉伸方式是通过setScale();来实现的，而对于CCScale9Sprite则不同。它是通过setContentSize(const cCSize & sizE);来实现图片的拉伸。不过貌似使用setPreferredSize(const cCSize & sizE);的效果类似？

【代码实战】

（1）使用三组图片进行测试：

（2）引入头文件及命名空间：

#include"extensions/cocos-ext.h"

USING_NS_CC_EXT;

加如以上的代码如果出错可以查看参考资料http://blog.csdn.net/lengxue789/article/details/38228107，既可修正。

（3）编写测试对比函数test：

/**
*		file：图片资源名称，如"sp.png"
*		index：第几组测试数据
*/
voidHelloWorld::test(constchar*file,inTindeX)
{

//获取可视区域尺寸大小
	CCSizemysize=CCDirector::sharedDirector()->getVisibleSize();
//获取可视区域的原点位置
	CCPointorigin=CCDirector::sharedDirector()->getVisibLeorigin();
//屏幕正中心位置
	CCPointmidPos=ccp(mysize.width/2,mysize.height/2);


//CCSprite，精灵拉伸
	CCSprite*sprite1=CCSprite::create(filE);
	sprite1->setPosition(ccp(120*index,mysize.height-60));
	this->addChild(sprite1);

	//精灵拉伸
	sprite1->setScale(2.0f);


//scale9Sprite1，不设置capInsets
	CCScale9Sprite*scale9Sprite1=CCScale9Sprite::create(filE);
	scale9Sprite1->setPosition(ccp(120*index,mysize.height/2));
	this->addChild(scale9Sprite1);

	//不设置capInsets，拉伸
	scale9Sprite1->setContentSize(CCSizeMake(80,80));


//scale9Sprite2，设置capInsets
	CCScale9Sprite*scale9Sprite2=CCScale9Sprite::create(filE);
	scale9Sprite2->setPosition(ccp(120*index,60));
	this->addChild(scale9Sprite2);

	//设置capInsets，并拉伸
	scale9Sprite2->setCapInsets(CCRectMake(3,3,34,34));
	scale9Sprite2->setContentSize(CCSizeMake(80,80));
}
//

（4）测试三组图片：

boolHelloWorld::init()
{
if(!CCLayer::init())
{
returnfalse;
}

	test("Icon.png",1);//用Icon.png做测试
	test("CloseNormal.png",2);//用CloseNormal.png做测试
	test("Rect.png",3);//用Rect.png做测试

	returntrue;
}
//

运行结果：

分析结果：

亮点自寻。

【Demo下载】

http://down.51cto.com/data/1865750

本文出自 “夏天的风” 博客，请务必保留此出处http://shahdza.blog.51cto.com/2410787/1543284