createjs初学-制作一个简单的TextButton

这个例子是从 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);}