coco2d-js菜单项cc.MenuItem详解

菜单中又包含菜单项，菜单项是cc.MenuItem，每个菜单项都有三个基本状态：正常、选中和禁止。菜单间接继承自cc.Node，继承了cc.Node的相关特性。

cc.MenuItem类图如下：

1、文本菜单 cc.MenuItemLabel

文本菜单是菜单项只能显示文本，文本菜单类包括cc.MenuItemLabel、cc.MenuItemFont 和 cc.MenuItemAtlasFont。cc.MenuItemLabel是个抽象类，具体使用的时候是使用 cc.MenuItemFont 和 cc.MenuItemAtlasFont 两个类。

① 文本菜单 cc.MenuItemFont

使用系统字体或自定义字体作为菜单的字体，其其中一构造函数如下：

ctor(text, fontName, callback, target)

参数说明：

text 文本内容
callback 菜单操作的回调函数指针
target 函数所在的对象

代码实例：

// 创建文本菜单
var item = new cc.MenuItemFont('lalalala', function() {
        console.log('艾玛你点到我了');
    }, this),
    menu = new cc.Menu(item);
item.setFontName('Arial');  // 设置文本字体
item.setFontSize(30);       // 设置字体大小
this.addChild(menu);

② 图片集文本菜单 cc.MenuItemAtlasFont

基于文本图片集的文本菜单项，其其中一构造函数如下：

ctor(value, charMapFile, itemWidth, itemHeight, startCharMap, callback);

参数说明：

value： 文本内容
charMapFile： 图片集文件路径，一般在资源加载res变量中定义
itemWidth： 要截取的文字在图片中的宽度
itemHeight： 要截取的文字在图片中的高度
startCharMap： 开始字符
callback： 菜单操作的回调函数指针

代码示例：

// var res = { number: 'res/number.png'; }

// 创建图片集文本菜单
var item = new cc.MenuItemAtlasFont('123123', res.number, 60, 60, '0', function() {
        console.log('艾玛你点到我了');
    }, this),
    menu = new cc.Menu(item);
this.addChild(menu);

来来来，给张图片集文本的图片做个练习（单字符宽高分别为60）：

---

2、精灵菜单 cc.MenuItemSprite

具有精灵的特点，可以让精灵动起来，具体使用时把一个精灵放入菜单中作为菜单项。
使用精灵菜单较麻烦，需要先创建3种不同状态所需要的精灵（即 normalSprite, selectedSprite 和disabledSprite ）。如果精灵是由图片构成，可以使用 cc.MenuItemImage 实现与精灵菜单同样的效果。
精灵菜单其中一构造函数如下：

ctor(normalSprite, selectedSprite, callback, target)

参数说明：

normalSprite： 菜单项正常显示时的精灵
selectedSprite： 选择菜单项时显示的精灵
callback： 菜单操作的回调函数指针
target：函数所在的对象

代码示例：

// 创建精灵菜单
var sp1  = new cc.Sprite(res.normal_png),
    sp2  = new cc.Sprite(res.selected_png),
    item = new cc.MenuItemSprite(sp1, sp2, function() {
        console.log('艾玛你点到我了');
    }, this),
    menu = new cc.Menu(item);
this.addChild(menu);

---

3、图片菜单 cc.MenuItemImage

由于图片菜单继承于cc.MenuItemSprite，所以图片菜单也属于精灵菜单，使用静态图片作为菜单显示内容。其构造函数如下：

ctor(normalImage, selectedImage, callback, target)

参数说明：

normalImage： 菜单项正常显示时的图片
selectedImage： 选择菜单项时的图片
callback： 菜单操作的回调函数指针
target： 函数所在的对象

代码示例：

/*
    var res = {
        normal_png: 'res/normal.png',
        selected_png: 'res/selected.png',
    }
*/
// 创建图片菜单
var item = new cc.MenuItemImage(res.normal_png, res.selected_png, function() {
        console.log('艾玛你点到我了');
    }, this),
    menu = new cc.Menu(item);
this.addChild(menu);

---

4、开关菜单 cc.MenuItemToggle

是一种可以进行两种状态切换的菜单项，可以用来做音乐开关按钮等；其构造函数如下：

ctor(onMenuItem, offMenuItem, callback, target)

参数说明：

onMenuItem： 菜单项On时的菜单项
offMenuItem： 菜单项Off时的菜单项
callback： 菜单操作的回调函数指针
target： 函数所在的对象

代码示例：

// 创建开关菜单
var item = new cc.MenuItemToggle(
        new cc.MenuItemFont('On'),
        new cc.MenuItemFont('Off'),
        function() {
            console.log('艾玛你点到我了');
        },
        this
    ),
    menu = new cc.Menu(item);
this.addChild(menu);

如需转载请注明出处！！