EaselJS 事件

原創

2020-02-20 22:53

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度然後更新舞臺.