认识createjs(二) Container容器及监听事件

Container
  一、 
 Container是一个容器，可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素。例如，你可以将手臂、腿部、躯干和头部聚在一起，把它们转换为一组，同时还可以将各个部分相对彼此移动。放在一个Container中方便统一管理，比如你要做一个按钮，按钮图形和上面的提示文字包含在一个Container中，便可以统一移动。

1、首先还是要引入easeljs

<script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>

2.js代码如下：

<script type="text/javascript">
function init() {
var stage = new createjs.Stage("box");

var button = new createjs.Container();   //容器Container
var laber = new createjs.Text("OK", "40px Times", '#000');
laber.textAlign = 'center';            //创建的文字样式
laber.textBaseline = 'middle';
var shape = new createjs.Shape();      //画圆形
shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 100);
shape.shadow = new createjs.Shadow('#000', 2, 2, 8);   //阴影效果
button.addChild(shape, laber);         //将画的圆以及文字添加给容器，这样容器位置改变的时候，圆和文字都一起改变
button.regX = shape.width / 2;
button.regY = shape.height / 2;
button.x = 400;
button.y = 400;

button.cursor = 'pointer';             //设置为鼠标滑过为手型
laber.x = button.regX;
laber.y = button.regY;

//添加监听事件，鼠标划过的时候触发函数。  click/mouseout
shape.addEventListener('mouseover', function(e) {

alert("ok");
});
//这里的addEventListener也可以用on代替；
//鼠标滑过的时候，显示手型，表示可以点击。
stage.enableMouseOver();
stage.addChild(button);

stage.update();
}
</script>

效果如下：


当鼠标滑过的时候弹出ok,如下图：



二、这里的stage.update(); 我们可以用Tick(相当于定时函数)，代码如下：

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);

function update(event){
//注意这里要在外面全局定义一个stage;
var g = stage.update();
console.log(g);
}