这个例子是从 Beginning HTML5 Games with CreateJS里学来的,我自己简单做了一个。
这个TextButton很简单,只有两部分,一个部分是button的Label,要显示的标签,使用createjs.Text实现;另外一部分是button的背景,会根据鼠标事件发生变化,使用createjs.Shape实现。
(createjs.Shape是继承自createjs.DisplayObject类的,但是和actionscript中的DisplayObject类不同,createjs.DisplayObject可以接受所有类型的鼠标事件)
简单介绍一下createjs.Text这个类:
继承自DisplayObject,用来显示一行或者多行文字。
注意:并不支持htmlText,每个Text只能显示为一种样式。要想使用多种样式,要创建多个Text。
var text = new createjs.Text("Hello World", "20px Arial", "#ff7700");
构造函数接受三个参数,都是可选的。第一个是要显示的文本;第二个是使用的字体;第三个是使用的颜色。
textAlign属性表示横向 对齐的方式,它的值可以是start、end、left、right、center。
textBaseLine属性表示竖直对其方式,它的值可以是top、hanging、middle、alphabetic、ideographic、bottom。
下面是TextButton类的代码
(function(window){
function SHLTextButton(text,bwidth,bheight,textColor,fontsize,upColor,downColor)//在构造函数中穿一些必要的参数进来
{
this.Container_constructor();
this.buttonText=text; //要显示是文字
this.bwidth=bwidth; //按钮的宽度
this.bheight=bheight; //按钮的高度
this.textColor=textColor; //文字的颜色
this.fontsize=fontsize; //文字的字体大小
this.upColor=upColor; //按钮正常状态的颜色
this.downColor=downColor; //按钮按下的颜色
this.labelText; //用于显示文字的Text
this.bg; //用于显示背景的Shape
this.drawButtton(); //绘制Button
this.setListener(); //设置事件侦听
}
var p=createjs.extend(SHLTextButton,createjs.Container); //SHLTextButton这个继承自createjs.Container
p.drawButtton=function()
{
this.removeAllChildren();
//创建了text,并设置了对其方式和位置,这样就可以居中显示
this.labelText=new createjs.Text(this.buttonText,this.fontsize+"px Microsoft YaHei",this.textColor);
this.labelText.textAlign="center";
this.labelText.textBaseline="middle";
this.labelText.x=this.bwidth/2;
this.labelText.y=this.bheight/2;
//调用drawBG方法绘制了背景
this.bg=new createjs.Shape();
this.drawBG(this.upColor);
this.addChild(this.bg);
this.addChild(this.labelText);
};
//添加mousedown和pressup的事件侦听
p.setListener=function()
{
this.on("mousedown",function(e) {
this.drawBG(this.downColor);
});
this.on("pressup",function(e){
this.drawBG(this.upColor);
});
};
//这个方法根据背景的颜色绘制了一个圆角矩形的背景
p.drawBG=function(bgColor)
{
this.bg.graphics.clear();
this.bg.graphics.beginFill(bgColor);
this.bg.graphics.drawRoundRect(0,0,this.bwidth,this.bheight,4,4);
this.bg.graphics.endFill();
};
window.SHLTextButton=createjs.promote(SHLTextButton,"Container");
}(window));
这里事件侦听用的是on这个方法,不是addEventListener这个方法。
on ( type listener [scope] [once=false] [data] [useCapture=false] )
on是addEventListener的一个简洁的写法,但是提供了更多的功能。
type和listener和之前一样,表示要侦听的事件和调用的方法,
scope表示可以指定listener中的作用域,
once表示是否只侦听一次,如果是true,事件第一次相应之后,listener就会自动移除,
data是附加参数,可以在listener里面添加第二个参数
function handleClick(evt, data)
这样就可以读取到data数据,
useCapture表明是侦听捕获阶段还是冒泡阶段,默认是false。
最后给出一个使用的例子,也很简单
var bigger=new SHLTextButton("放大",50,20,"#ffffff",14,"#999999","#66666");
bigger.on("click",onButtonClick);
function onButtonClick(e)
{
console.log(e.currentTarget.buttonText);
}