EaselJS 事件

来源：互联网发布：45打印软件编辑：程序博客网时间：2024/05/09 12:09

EaselJS 事件类型

1.click 鼠标单击事件
2.dbClick 鼠标双击事件
3.mousedown 鼠标按下事件
4.mouseover 鼠标移过事件
5.mouseout 鼠标移出事件
6.tick 每次舞台更新执行的事件
7.stagemouseup 鼠标在舞台释放事件
8.stagemousemove 鼠标在舞台移过事件
9.stagemousedown 鼠标在舞台按下事件
10.complete 完成时执行事件
11.animationend 动画播放到最后执行事件

对象拥有的事件

Bitmap

(click,dbClick,mousedown,mouseover,mouseout,tick)

BitmapAnimation

(click,dbClick,mousedown,mouseover,mouseout,tick,animationend)

Container

(click,dbClick,mousedown,mouseover,mouseout,tick)

DisplayObject

(click,dbClick,mousedown,mouseover,mouseout,tick)

DOMElement

(click,dbClick,mousedown,mouseover,mouseout,tick)

MouseEvent

(mouseover,mouseout)

MovieClip

(click,dbClick,mousedown,mouseover,mouseout,tick)

Shape

(click,dbClick,mousedown,mouseover,mouseout,tick)

SpriteSheet

(complete)

SpriteSheetBuilder

(complete)

Stage

(click,dbClick,mousedown,mouseover,mouseout,tick,stagemouseup,stagemousemove,stagemousedown)

Text

(click,dbClick,mousedown,mouseover,mouseout,tick)

Ticker

(tick)

例子1 一个简单的实例

[html] view plaincopyprint?
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="gbk">  
    <script type="text/javascript" src="easeljs-0.6.0.min.js"></script>  
</head>  
<body>  
    <canvas id="myCanvas" width="200" height="200">  
        你的浏览器不支持canvas标签  
    </canvas>  
    <script>  
        var myCanvas=document.getElementById("myCanvas");  
        var stage=new createjs.Stage(myCanvas);  
        var shape=new createjs.Shape();  
        shape.graphics.beginFill("red").drawRect(0,0,50,50);  
        shape.x=shape.y=80;  
        shape.addEventListener("click",clickEvent);  
        function clickEvent(event){  
            shape.rotation+=20;  
            stage.update();  
        }  
        stage.addChild(shape);  
        stage.update();  
    </script>  
</body>  
</html>  

shape.graphics.beginFill("red").drawRect(0,0,50,50);
绘制矩形

shape.x=shape.y=80;
设置图形的x,y坐标

shape.addEventListener("click",clickEvent);
增加监听事件,参数一为事件类型,click单击事件,参数二为监听器.

function clickEvent(event){
shape.rotation+=20;
stage.update();
}
鼠标单击时执行事件,旋转20度然后更新舞台.

0 0