在前一篇中我简单介绍了一下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。