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来实现。