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);

如需转载请注明出处！！