UI制作中的九宫格批量输出

游戏的UI制作中，出于对资源的压缩和重用，会对一些有规则的图片划分九宫格，例如下图

中间部分如果是纯色的话，完全可以挖去，然后在U3D的图集精灵的border中设置对应的top,right,bottom,left,这样既可以节省资源，又可以重用到不同大小的但具有一样颜色的地方。

传统的photoshop可以挖去中间部分，但是项目中的美术大哥觉得还是批量处理比较有效率，所以用Air写了一个批量处理九宫格图片的工具。

在这个工具中，美术需要把九宫格的四个border值填充到名字，顺序为top, right, bottom, left例如

top=20px, right=20px, bottom=20px, left=20px,那么图片的命名为Button#21#22#23#24.png

(Button#top#right#bottom#left.png)

这样多个图片导入工具中，导出来的效果

这样资源和可重用度都得到很好的提升。

工具是用air来做的，核心源码如下

private static var file:File = new File();private var fileOutput:File = new File();private static var fileStream:FileStream = new FileStream();private var loader:Loader = new Loader();private var bit:Bitmap = new Bitmap();private var bytes:ByteArray = new ByteArray;private static const SLICE_LIST_LENGTH:int = 9;private static const SPLIT_ROW_COUNT:int = 3;private static const SPLIT_COL_COUNT:int = 3;private static var _transformMatrix:Matrix;private static var _splitRow:Vector.<int>;private static var _splitCol:Vector.<int>;private static var _rect:Rectangle;private static var _dstPoint:Point;private var m_iIndex:int = 0;private var m_arrFile:Array;private var fileAns:File;//mxml OnInit初始化函数private function init():void{    _splitRow = new Vector.<int>(SPLIT_ROW_COUNT + 1, true);    _splitCol = new Vector.<int>(SPLIT_COL_COUNT + 1, true);    _rect = new Rectangle();    _dstPoint = new Point();    _transformMatrix = new Matrix();}//点击按钮后弹出文件夹选择对话框,目前只支持png文件private function onImport(e:MouseEvent):void{    file.addEventListener(FileListEvent.SELECT_MULTIPLE, this.onSelect);    file.browseForOpenMultiple("请选择png文件(可选择多个)", [new FileFilter("png文件","*.png;")]);}//选择图片，可以多个以及输出文件夹//文件的命名规范是 abc#top#right#bottom#left.pngprivate function onSelect(e:FileListEvent):void{    m_arrFile = e.files;    fileOutput.addEventListener(Event.SELECT, this.OnDoIt);    fileOutput.browserForDirectory("请选择输出的文件夹");}//串行顺序处理图片private function OnDoIt(e:Event):void{    fileAns = e.target as File;    m_iIndex = 0;    DealFile(m_arrFile(m_iIndex));}//读取图片，转成二进制private function DealFile(file:File):void{    var fileByte:ByteArray = new ByteArray();    var fs:FileStream = new FileStream();    fs.open(file, FileMode.READ);    fs.readBytes(fileByte, 0, fs.bytesAvailable);    fs.close();    var myLoader:Loader = new Loader();    myLoader.unload();    myLoader.loadBytes(fileByte);    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, image_completeHandler);}//把图片的二进制转成bitmapDataprivate function image_completeHandler(event:Event):void{    bit.bitmapData = Bitmap(event.currentTarget.content).bitmapData;    Export();}//把图片的中间部分挖空，导出图片private function Export():void{    var pngSource:BitmapData = new BitmapData(bit.width,bit.height,true,0);    pngSource.draw(bit.bitmapData);    var sName:String = m_arrFile[m_iIndex].name.replace(".png","");    trace(sName);    var arrName:Array = sName.split("#");//width = left + right; height = top + bottom;    var ansPng:BitmapData = createScaleBitmapData(pngSource,int(arrName[2])+int(arrName[4]),int(arrName[1])+int(arrName[3]),int(arrName[1]),int(arrName[2]),int(arrName[3]),int(arrName[4]));//用到PNGEncoder库，把bitmapData转成二进制    var ba:ByteArray = PNGEncoder.encode(ansPng);//重命名，后面添加_Nine    var ff:File = fileAns.resolvePath(m_arrFile[m_iIndex].name.replace(".png","_Nine.png"));    //写入文件var fileStream:FileStream = new FileStream();    fileStream.open(ff, FileMode.WRITE);    fileStream.writeBytes(ba);    fileStream.close();//顺序执行后面的图片    if(++m_iIndex < m_arrFile.length)    {        DealFile(m_arrFile[m_iIndex]);    }}private static function createScaleBitmapData(link:BitmapData, width:int, height:int, top:int, right:int, bottom:int, left:int):BitmapData{    if(width < left + right)    {        width = left + right;    }    if(height < top + bottom)    {        height = top + bottom;    }    var result:BitmapData = new BitmapData(width, height, true, 0);//获取九宫格9个小块的BitmapData    var gridList:Vector.<BitmapData> = createBitmapDataGridList(link, top, right, bottom, left);    updateSplitData(width, height, top, right, bottom, left);    for(var i:int = 0; i < SPLIT_COL_COUNT; i++)    {        for(var j:int = 0; j < SPLIT_ROW_COUNT; j++)        {            var grid:BitmapData = gridList[i * 3 + j];            if(_splitRow[j + 1] - _splitRow[j]==0 || _splitCol[i + 1] - _splitCol[i] == 0)            {                continue;            }//把原点平移到对应slice的左上角            _transformMatrix.a = (_splitRow[j + 1] - splitRow[j]) / grid.width;            _transformMatrix.b = 0;            _transformMatrix.c = 0;            _transformMatrix.d = (_splitCol[i + 1] - _splitCol[i]) / grid.height;            _transformMatrix.tx = _splitRow[j];            _transformMatrix.ty = _splitCol[i];            result.draw(grid, _transformMatrix);        }    }    return result;}//存储9个小图片的BitmapDataprivate static function createBitmapDataGridList(link:BitmapData, top:int, right:int, bottom:int, left:int) : Vector.<BitmapData>{    var source:BitmapData = link;    if((top + bottom) > source.height || (left + right) > source.width)    {        throw new Error("图片九宫格参数设置错误：左右切片宽度之和不能大于图片宽度，上下切片高度之和不能大于图片高度！");    }    var result:Vector.<BitmapData> = new Vector.<BitmapData>(SLICE_LIST_LENGTH, true);    updateSplitData(source.width, source.height, top, right, bottom, left);    for(var i:int = 0; i < SPLIT_COL_COUNT; i++)    {        for(var j:int = 0; j < SPLIT_ROW_COUNT; j++)        {            _rect.x = _splitRow[j];            _rect.y = _splitCol[i];            _rect.width = _splitRow[j+1] - _splitRow[j];            _rect.height = _splitCol[i+1] - _splitCol[i];            if(_rect.width == 0 || _rect.height == 0)            {               continue;            }             var bmpd:BitmapData = new BitmapData(_rect.width, _rect.height, true, 0);            bmpd.copyPixels(source, _rect, _dstPoint);            result[i * 3 + j] = bmpd;        }    }    return result;}//划分9个小块的位置线private static function updateSplitData(width:int, height:int, top:int, right:int, bottom:int, left:int):void{    _splitRow[0] = 0;    _splitRow[1] = left;    _splitRow[2] = width - right;    _splitRow[3] = width;    _splitCol[0] = 0;    _splitCol[1] = top;    _splitCol[2] = height - bottom;    _splitCol[3] = height;}

原理是先把九宫格的九个小块的bitmapData记录到一个数组里面，然后根据划分的top,right,bottom,left的大小取出对应的bitmapData拼成新图。

特别地，如果是三宫格，如下图

所有引用这张精灵图的宽度都是原大小228px，固定不变的，不能拉伸水平方向，那么需要把left和right设为width的一半，垂直方向可以拉伸，还是20px。同理如果是垂直方向不能拉伸，固定不变，则top和bottom设为height的一半。