您的位置：首页 > Web前端 > JavaScript

EaselJS 事件

2015-11-05 14:02 603 查看

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
plaincopy print ?

<!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度然后更新舞台.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航