CCScale9Sprite点九图的制作和使用

谢谢http://www.zaojiahua.com/ccscale9sprite.html

据说有个android神器：http://www.ninepng.cn/index.html

点九图也叫做九妹图，主要是用来适配的，当我们的图片在不同分辨率的手机上的时候就会被拉伸，这个时候普通的图片可能会变形，会不好看，但是点九图会很好的去适应，可以先看下效果啊。

大家看到了吗？点九图拉伸后的效果非常的好，和普通的图片主要的区别就是边角了，边角非常清晰。下面说下原理吧。

点九图顾名思义就是由九个部分组成的，如图所示。在拉伸的时候会这样做，四角（1,3,6,8）：不拉伸。四边（2,4,5,7）分为两种：（2,7）只横向拉伸；（4,5）只竖向拉伸。中间（9）：横竖都拉伸。因为四个角是不拉伸的，所以就保证了拉伸以后边角十分的清晰了。下面我们就来制作自己的点九图吧。首先在你androidSDK的这个目录下E:\Android_SDK\sdk\tools有一个文件draw9patch.bat，运行这个批处理，然后就出现了如图的界面了。导入我们的图片，接下来看看软件各个部分的作用。

选择下边的show patches，这个是用来告诉你图片的哪部分是可以拉伸的，就是图中的那个紫色的区域，而show content就是显示内容区域，就是说当你在这个图片上写一些内容的时候，这些内容会显示在什么地方。右边的三幅图就是三种不同情况下的显示效果了。

现在来制作我们的图片，记住一点左边和上边的边线是来决定图片的拉伸区域的，而右边和下边是来决定显示区域的，你可能对这句话不理解，我来给你好好解释一下吧。上边和左边这个边在哪呢？好看这幅图吧。

看到了我画红线的地方了吗，那是不是有黑线啊，边就是指的这个黑线在的地方，这俩个黑线当然是右边和下边了，你通过鼠标的左键点击边上的一个点，那个点就变黑了，然后你就可以拉伸那个点，弄出一条边，你试试一定就知道了，还有就是shift+左键可以去除一个点。这俩条黑线就是控制内容的显示的，你要自己调节一下，把将来要放的内容区域调节一下，右边可以看到效果啊。

看到图片的阴影区域了吗，那个就是显示内容的区域。好了我们现在来调节上边和左边吧。通过调节上边和左边可以控制这张图片的拉伸范围，好了，现在你应该知道什么叫做点九图了吧。

然后保存，导出我们的图片，这个时候问题来了，这个东西导出去以后四边会有黑线，给你们个工具去除黑线吧(去黑边工具xUltimate-d9pc-x86)。使用方法如下：1.把预处理黑边的图片放到目录example1\res\drawable-hdpi下。2.双击xUltimate-d9pc.exe，听到电脑滴的一声，即可完成去黑边（此时的9.png图片内部加载了黑边信息）。3.根目下会自动生成done文件，在done\example1\res\drawable-hdpi下，就是我们经过处理的9.PNG图片。4.这个图片就是我们要美化替换的图片。好了，九妹图片制作完毕，我们来看看程序中怎么使用吧！

1bool HelloWorld::init()

2{

3    if ( !CCLayerColor::initWithColor(ccc4(255,255,255,255)))

4    {

5        return false;

6    }

7 

8    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

9    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

10    //里边的参数就是我们的那张图片了

11    CCScale9Sprite * scale9 = CCScale9Sprite::create("9.9.png");

12    scale9->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));

13    //设置图片的大小，看看效果

14    scale9->setContentSize(CCSize(200,200));

15    this->addChild(scale9);

16 

17    return true;

18}

在做按钮和菜单的时候有的类我们需要传入一个精灵，我们就把我们的精灵图片传进去吧，等它拉伸的时候效果就会非常的好，这样的话用户体验就上去了。有问题欢迎大家留言啊，我们一块交流！