WebGame UI 制作之使用 對位圖進行九切片（九宮格）縮放

做過網頁的朋友，應該知道 九宮格 的魅力所在，它能大大降低生成圖片的大小，那么對於WebGame UI 制作也是有幫助的，一般UI制作使用Flash CS 來制作，

這邊有朋友做了很詳細的介紹，不再重復造車，感興趣的的朋友，可以看看，地址如下：

http://riaoo.com/?p=1077

上面的博客中，還帶視頻介紹的，相信大家很容易就能看明白，那么對於真正制作，還有朋友寫了JSFL來快捷的切 九宮格，地址如下：

http://www.itamt.com/2010/03/slice9bitmap_jsfl/

JSFL的使用方法，自己百度吧。

上面的地址中的JSFL應該是下載不了了，我從作者的谷歌code里，下載了下來，方便需要的朋友下載：

//[Flash提供的js API並沒有可以獲取當前編輯元件的方法, 確保在庫中選中當前編輯的元件] 選中圖片, 運行該腳本, 會把圖片根據該元件的scale9Grid打散成9個部分, 並各自成組.
//tamt 2009.11.12 ver0.1
//TODO:Flash提供的js API並沒有可以獲取當前編輯元件的方法.

var curItem;
var rect = {l:0, r:0, t:0, b:0};//{left:0, right:0, top:0, bottom:0};
var items = fl.getDocumentDOM().library.getSelectedItems();
for(var i=0; i<items.length; i++){
    curItem = items[0];
    if(curItem.scalingGrid){
        rect.l = curItem.scalingGridRect.left;
        rect.r = curItem.scalingGridRect.right;
        rect.t = curItem.scalingGridRect.top;
        rect.b = curItem.scalingGridRect.bottom;

        //traceObj(rect);

        var doc = fl.getDocumentDOM();
        var imgItem = doc.selection[0];
        if(imgItem.instanceType == "bitmap"){
            doc.breakApart();

            //左上角打組
            doc.setSelectionRect({left:-500, right:rect.l, top:-500, bottom:rect.t}, true, false);
            doc.group();
            //右上角打組
            doc.setSelectionRect({left:rect.r, right:1000, top:-500, bottom:rect.t}, true, false);
            doc.group();
            //右下角打組
            doc.setSelectionRect({left:rect.r, right:1000, top:rect.b, bottom:1000}, true, false);
            doc.group();
            //左下角打組
            doc.setSelectionRect({left:-500, right:rect.l, top:rect.b, bottom:1000}, true, false);
            doc.group();
            //中間部分打組
            doc.setSelectionRect({left:rect.l, right:rect.r, top:rect.t, bottom:rect.b}, true, false);
            doc.group();
            //左邊部分打組
            doc.setSelectionRect({left:-500, right:rect.l, top:rect.t, bottom:rect.b}, true, false);
            doc.group();
            //右邊部分打組
            doc.setSelectionRect({left:rect.r, right:1000, top:rect.t, bottom:rect.b}, true, false);
            doc.group();
            //上邊部分打組
            doc.setSelectionRect({left:rect.l, right:rect.r, top:-500, bottom:rect.t}, true, false);
            doc.group();
            //下邊部分打組
            doc.setSelectionRect({left:rect.l, right:rect.r, top:rect.b, bottom:1000}, true, false);
            doc.group();
        }else{
            alert('please select a bitmap.');
        }
    }
}

//debug function
function traceObj(obj){
    fl.trace("------------");
    for(var prop in obj){
        fl.trace(prop + ": " + obj[prop]);
    }
    fl.trace("------------");
}

好了，希望對你有幫助。

在AS3環境下，可以通過著名的ScaleBitmap來實現。