23
2015
01

(二)createjs-Events

创建了舞台,创建了一个圆形,然后就想能够通过点击这个圆或是舞台来控制圆的状态,或者定时更新圆的状态来形成动画效果。

createjs的事件和as很像,但是有很大区别。官方没说明白,有没有人告诉,就都是坑啊。幸好有源码,而且js圆满很好看懂,可以自己研究。

作为一个程序员(勉强算得上吧),不善于表达,还是直接上例子:

  1.      //创建stage,参数为canvas的id

  2.     var stage=new createjs.Stage("gameMain");


  3.     //创建一个shape

  4.     var circle=new createjs.Shape();

  5.     circle.graphics.beginFill("#00ff00");//官网用的"red",颜色设置和html中是一样的

  6.     circle.graphics.drawCircle(0,0,40);//可以写成circle.graphics.beginFill("red").drawCircle(0, 0, 40);方法返回对象本身,js里边常用,其他语言不常见,不知道这样好不好。

  7.     //设置显示元件的位置

  8.     circle.x=circle.y=50;

  9.     //添加到显示列表

  10.     stage.addChild(circle);

  11.     //Update stage will render next frame/需要调用stage的update方法,下一帧刷新时才会更新显示(不知为何要多这个操作,有空研究研究源码)

  12.     stage.update();


  13.             //circle.addEventListener("click",handlerClick);

  14.             function handlerClick(event){ 

  15.                 console.log(event);

  16.                

  17.             }

  18.             //鼠标事件type类型DisplayObject._MOUSE_EVENTS = ["click","dblclick","mousedown","mouseout","mouseover","pressmove","pressup","rollout","rollover"];

  19.             //各种事件的type可以从api的displayObject里边找。和as的api还是有区别的。

  20.             circle.addEventListener("pressmove",handlerMove);

  21.             console.log(stage);

  22.             console.log(circle);

  23.             function handlerMove(event){ 

  24.                 console.log("====move====");

  25.                 console.log(event);

  26.             }


  27.             

  28.             createjs.Ticker.setFPS(60);//设置频率,相当于帧频。

  29.             createjs.Ticker.addEventListener("tick", tick);

  30.             var n=0;

  31.             function tick(event){

  32.                 console.log("====tick====");

  33.                 console.log(event);

  34.                 stage.update();//需要tick,然后自己update,才能刷新显示。

  35.                 n++;

  36.                 if(n>5)createjs.Ticker.removeEventListener("tick", tick);

  37.             }


  38.             circle.addEventListener("tick",handlerTick);//tick相当于as里边的enterFrame

  39.             function handlerTick(event){

  40.                 console.log("===circle tick====");

  41.                 console.log(event);

  42.             }


需要自己tick,每次tick的时候stage.update(),而且tick就相当于enterFrame。

鼠标事件的type值不太一样,需注意;而且rollover之类的直接侦听是侦听不到的,和as不一样,可以自己试试;具体怎么用,后边会提到。

只试了tick和一些鼠标事件,其他用到再查api吧。没有看到键盘事件。


点击查看实例

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。