createjs初学-所有的显示对象介绍（2）

在前一篇中我简单介绍了一下DisplayObject的子类们，在这篇里介绍一下Container的一个子类—Stage。

stage大家都很熟悉，是所有显示对象的根容器。与actionscript中不同，stage每次渲染都要手动调用update方法，update方法会调用stage的tick方法，然后把显示对象渲染到canvas中。

var stage = new createjs.Stage("canvasElementId");
var image = new createjs.Bitmap("imagePath.png");
stage.addChild(image);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
image.x += 10;
stage.update();
}

如果没有stage.update()这一行，是看不到图片动的。

下面介绍一下stage的几个独有的特性

drawRect

这个属性是一个Rectangle的类型，指定了stage在渲染时要渲染的区域，可以用这个属性来选择性的渲染stage的某个区域。如果设置为null，那就全部都渲染。

mouseInBounds

这个属性是一个布尔值，表示鼠标现在是不是在canvas的范围内。

mouseMoveOutside

这也是个布尔值，在是true的情况下，在鼠标在canvas外移动时，仍然会触发鼠标移动的事件。默认是false。

mouseX和mouseY

分别表示鼠标在canvas中的x y坐标。如果鼠标不在canvas内，它们的值就是最近一次在canvas中时的位置。

preventSelection

在canvas上的点击、拖动等操作不会选中html中的其他元素。通过在canvas上发生mouseDown事件时调用了preventDefault()来实现的。默认是true。

Stage中还有几个比较特别的事件

drawstart和drawend

分别在舞台渲染前后触发

mouseenter和mouseleave

这两个顾名思义，注意的是只能在mouse事件时触发，touch事件不能触发

stage还有三个特殊的事件，stagemousedown、stagemousemove和stagemouseup，都是很明显的。注意的是，当鼠标在canvas中按下，在任何页面能检测到的地方弹起，都会触发stagemouseup。