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

最新推荐文章于 2024-03-16 09:36:51 发布

原创最新推荐文章于 2024-03-16 09:36:51 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#createjs

createjs 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何使用createjs库制作一个简单的TextButton，包括TextButton的组成（Label和背景），并详细讲解了createjs.Text类的特性，如不支持htmlText，以及如何设置文字的对齐方式。TextButton的事件监听使用了on方法，强调了其与addEventListener的差异，提供了一段TextButton类的代码示例和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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