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

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

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

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

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

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

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

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

bool HelloWorld::init()
{
	if ( !CCLayerColor::initWithColor(ccc4(255,255,255,255)))
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
	//里边的参数就是我们的那张图片了
	CCScale9Sprite * scale9 = CCScale9Sprite::create("9.9.png");
	scale9->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	//设置图片的大小,看看效果
	scale9->setContentSize(CCSize(200,200));
	this->addChild(scale9);

    return true;
}

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