CCScale9Sprite点九图的制作和使用.docVIP

点九图也叫做九妹图，主要是用来适配的，当我们的图片在不同分辨率的手机上的时候就会被拉伸，这个时候普通的图片可能会变形，会不好看，但是点九图会很好的去适应，可以先看下效果啊。 CCScale9Sprite作用 ???????? 之前没有介绍CCScale9Sprite的作用，她是一种支持拉伸的图片，可由一张小图拉伸到一张大图，并且是任意的！最主要的是他可以最大限度地避免图片失真，是节省资源节省空间的开发者必备良药。 ?????????拉伸原理：其实不是直白的拉，而是进行填充，取图片的某个部分的像素，然后根据需要的大小进行填充。 ???????? 举个例子：如果提供的图片只是一条直线，但是想画出一个矩形效果，那么九妹就会copy这条直线，依此填充。从而得到矩形。 大家看到了吗？点九图拉伸后的效果非常的好，和普通的图片主要的区别就是边角了，边角非常清晰。下面说下原理吧。 点九图顾名思义就是由九个部分组成的，如图所示。在拉伸的时候会这样做，四角（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.这个图片就是我们要美化替换的图片。好了，九妹图片制作完毕，我们来看看程序中怎么使用吧！