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 一个简单的实例
- <!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度然后更新舞台.