避免游戏中按钮边框图片的拉伸变形—NinePatchImage的使用

 

游戏中常有一些需要拉伸的按钮、边框，用图片作为背景直接拉伸会变形了不好看，怎么办呢？

 

LoonFrameWork中，有个消息框的例子里面的边框不会变形。如下图（摘自LoonSimpe0.2.5 Sample）：

看了下cp1982的源代码，参考MessageFormDialog.getRMXPDialog()，感觉通用性好像不是太强，于是想起Android中有一种图片叫做NinePatchDrawable的图片格式(*.9.png)，可以支持图片的拉伸，又能保证边框不变形，而且提供了一个小编辑工具，还挺好用的。那是不是可以直接把Android的那部分NinePatchDrawable绘图功能提出来在Loon中使用呢？

 

找了找手头android-1.5-cupcake的源码，应该可行，简要说明如下。

 

NinePatchDrawble说明

先看一下NinePatchDrawble。NinePatchDrawble本质上就是PNG图片，只不过四边留有用于描述拉伸方式的小边框（1个像素宽）。

如上图所示（摘自AndroidDev Guide），LEFT和TOP描述了可拉伸区域(StretchableArea)，RIGHT和BOTTOM描述了内容区域(PaddingBox)，对于只想得到拉伸图片的咱们来说，PaddingBox没啥用。在Android SDK的tools中还有一个叫做draw9patch的WYSIWYG小工具，可以很方便的编辑PNG图片的边框描述区。更多内容请参考：

 android-sdk-windows-1.6_r1/docs/guide/topics/graphics/2d-graphics.html

 

 

AndroidNinePatch 源码

Android-1.5源码中的，NinePatch中使用底层的方法nativeDraw()绘制，没门了。不过还好，draw9patch工具中源码也比较好找，在com.android.draw9patch包中，具体功能在ImageEditorPanel中实现了。COPY&PASTE就把它提出来了，单独做了一个类NinePatchImage，可以将draw9patch工具生成的*.9.png图片拉伸后输出为BufferedImage，这样就可以作为按钮或边框的背景了。请注意，NinePatchImage依赖LoonFrameWork的，算是在Loon基础上做的小小的扩展吧，嘿嘿，太大言不惭了。

 

示例说明

把LoonFrameWork示例图片window.png中的框框切出来，在draw9patch工具中编辑一下，顺便可以参看右边的拉伸图预览，最后生成*.9.png图片待用。

写一个小Demo看一下效果，如下图所示。

左上角的为原图，左边一列是用NinePatchImage拉伸的，右边一列是直接放大的，当然差别很大了。不过NinePatchImage好像不适合用作缩小的情况，到也没太大关系了。

 

相关内容下载

示例下载  示例中包含示例源码、LoonFrameWork-Game-0.2.5R的jar、draw9patch小工具（为方便使用，从google Android SDK中直接copy出来的，不知道算不算侵权哪）。感谢LoonFrameWork、Android。