游戏中常有一些需要拉伸的按钮、边框,用图片作为背景直接拉伸会变形了不好看,怎么办呢?
LoonFrameWork中,有个消息框的例子里面的边框不会变形。如下图(摘自LoonSimpe0.2.5 Sample):
看了下cp1982的源代码,参考MessageFormDialog.getRMXPDialog(),感觉通用性好像不是太强,于是想起Android中有一种图片叫做NinePatchDrawable的图片格式(*.9.png),可以支持图片的拉伸,又能保证边框不变形,而且提供了一个小编辑工具,还挺好用的。那是不是可以直接把Android的那部分NinePatchDrawable绘图功能提出来在Loon中使用呢?
找了找手头android-1.5-cupcake的源码,应该可行,简要说明如下。
NinePatchDrawble说明
先看一下NinePatchDrawble。NinePatchDrawble本质上就是PNG图片,只不过四边留有用于描述拉伸方式的小边框(1个像素宽)。
如上图所示(摘自Android Dev 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
Android NinePatch 源码
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。