Api Doc

Notifier {Class}

src/notifier/index.js 消息体，基类，所有的类都继承于它，使其集成消息【事件】发送和接收的机制

Methods
- fire(ev[, args...]) - fire一个消息，第二个参数开始是需要传递的param
- on(ev, callback) - 监听一个消息
- off(ev[, callback]) - 取消监听某个消息。如果callback存在则取消这个消息的这个callback
- mix([args]) - mix in 的方法，但只有一个参数时会把这个参数的属性浅拷贝给自己。如果有两个，则把第二个的属性浅拷贝给第一个

Ticker {Class}

src/ticker/index.js 计步器，继承于Notifier，具有Notifier的所有原型方法。以下就不列了。

Static
- Ticker.singleton - Ticker 的一个单例
Methods
- stop() - 停止
- resume() - 继续
Events
- tick - 每次循环记步，抛出tick事件，Ticker的实例的可以监听，回调第一个参数为dt，每帧的时间间隔

Sprite

src/sprite/sprite.js 虚拟对象节点抽象。继承于Notifier，CEC内所有主要的可编程对象都可以看作一个Sprite。集成一些节点对象常用方法。
如果是矩形的sprite，默认坐标系原点在矩形的中央。

Attr
- x - x轴位置
- y - y轴位置
- points - 必选, 以[x,y]为中心的顶点数组，顺时针方向。可以创建任意多边形的sprite
- scaleX - x轴方向缩放比例
- scaleY - y轴方向缩放比例
- angle - 旋转角度，单位为度，不是弧度
- fillColor - 背景填充色
- borderWidth - 边框宽度
- borderColor - 边框颜色
- opacity - alpha透明度
- zIndex - z方向层叠高度
- visible - 是否可见
- backgroundImage - 背景图片，暂时只支持RectSprite，值可为src string或者ImageElement
- backgroundPosition - [0, 0] 背景图片位置
- backgroundSize - 背景图size设置，比如'100% auto'

注意：

new 一个实例的时候，如果参数为一个对象配置时，如 new Sprite({points:[...]}) points必选，其他初始化属性参照上面Attr,都为可选。
创建实例时，如果参数为canvas id或者canvasElement时，这时的实例默认为一个矩形的sprite，高宽自动为canvas的高宽，具有根节点的意义，根节点除了有普通sprite所有方法和特性外，会有额外的属性

canvas - CanvasElement
ctx - CanvasContext2D
type - 默认为stage
shape - rect 当普通sprite被add进“根节点”后，会被赋予canvas, ctx, parent等属性。
Methods - 【所有不是有固定的预期返回值的方法都支持链式调用】
- add(child) - 添加一个子sprite，子元素的位置x,y，缩放比例，旋转状态等，都是相对于父元素的
- appendTo(parent) - 把自己append到某个父元素中去
- remove([child]) - 把指定的child移除掉，如果不设参数则代表把自己从父元素中移除掉
- getIndex() - 获取自己在父元素中的index位置
- getChildIndex(child) - 获取某个子元素的index
- contains(child) - 是否包涵某个子元素
- isVisible() - 当前是否可见
- render(dt) - 渲染函数，sprite的状态，位置等的改变，都要render一次之后才能体现。
- clear([x,y,width,height]) - 擦除某块区域
- on(ev, callback) - 事件监听，如果ev为HtmlEvents，则为这个sprite代理上一个htmlEvents的监听。否则为普通的自定义消息监听。【HtmlEvents事件代理的处理可理解为冒泡的方式】
- delegate(ev, callback) - HtmlEvents事件代理，目前此方法仅提供在“根节点”上。callback的第一个参数event提供了以下属性
  - targetSprite - 预期的触发事件的target
  - stageOffsetX - 事件触发位置相对于stage中心的位置X
  - stageOffsetY - 事件触发位置相对于stage中心的位置Y
  - spriteOffsetX - 事件触发位置相对于当前sprite的位置X
  - spriteOffsetY - 事件触发位置相对于当前sprite的位置Y
- set(param[, autoRender]) - 以对象字面量的方式批量设置sprite的属性。比如x,y,angle,scaleX... 等等。Number类型的基本属性都支持+-*/简单符号运算。比如 set({angle:'+1'}) 。 autoRender 如果为true，会在set完后自动调用一次render。
- setAngle(angle[, autoRender]) - 设置角度
- rotate(angle[, autoRender]) - alias of setAngle
- setFillColor(fillcolor[, autoRender]) - 设置背景颜色
- setXY(x, y[, autoRender]) - 设置位置
- moveTo() - alias of setXY
- setX(x[, autoRender]) - 设置x位置
- setY(y[, autoRender]) - 设置y位置
- setScale(sx, sy[, autoRender]) - 设置x,y轴的缩放比例
- setScaleX(sx[, autoRender]) - 设置x轴的缩放比例
- setScaleY(sy[, autoRender]) - 设置y轴缩放比例
- setOpacity(op[, autoRender]) - 设置alpha透明度

RectSprite {Class}

继承自 Sprite，也就是矩形化的sprite，具有sprite所有特性和方法。同时提供一些简便操作的地方。

初始化的时候points参数不是必选，必选值变为width 和 height 比如new RectSprite({width:100, height:200})。
RectSprite默认坐标系都是矩形中心。
如果初始化的时候传入了backgroundImage 属性，会自动在每次render的时候在当前rect sprite中绘制这个图片，绘制的方式和位置，大小等通过 backgroundPosition, backgroundRepeat, backgroundSize 来控制，比如：

new RectSprite({
    x: 0,
    y: 0,
    width: 200,
    height: 100,
    backgroundImage: 'xxx.png',
    backgroundPosition: [0, 0],
    backgroundRepeat: 'repeat-x',
    backgroundSize: 'auto 100%'
})

Methods
- set(param[, autoRender]) - 批量设置属性，参考Sprite的set
- setDim(width, height[, autoRender]) - 设置宽高
- setWidth(width[, autoRender]) - 设置宽
- setHeight(height[, autoRender]) - 设置高

AnimSprite {Class}

继承自RectSprite,包装一个精灵帧动画的sprite，需要在初始化的时传入一个参数animConfig 以对象字面量的形式配置动画，比如：

        var anim = new AnimSprite({
            x: 0,
            y: 0,
            width: 300,
            height: 250,
            backgroundImage: './images/package/2.png',
            animConfig: {
                autoPlay: true, //动画是否初始化后自动播放
                loop: true, //是否循环播放
                frameNum: 4, //雪碧图所带的帧动画的帧数
                frameRate: 6, //播放速率，可以理解为speed
                frameData: [ //每一帧在雪碧图中的位置，[sx, sy, width, height]
                    [0, 0, 599.5, 501],
                    [600.5, 0, 599.5, 501],
                    [1201, 0, 599.5, 501],
                    [1801.5, 0, 599.5, 501]
                ]
            }
        })
        .appendTo(stage);

Attr
- playing - 是否正在播放
- currentFrame - 当前正在播放哪一帧
- frameWidth - 当前帧的宽度
- frameHeight - 当前帧的高度
- animationLength - 帧动画播放一次的时间长度
Methods
- play() - 开始播放，如果animConfig 里的autoPlay为true时，会在初始化自动调用play()
- stop() - 停止播放。stop后可以调用play() 来继续播放
- setLoop(true|false) - 设置是否循环播放动画
- isLoop() - 获取是否循环
- isPlaying() - 获取是否正在播放
- setFrame(index) - 设置当前播放帧
- setSpeed(speed) - 设置播放速率
- getSpeed() - 获取当前播放速度
- getFrameNum() - 获取这个帧动画的总帧数
- getAnimationLength() - 获取这个帧动画当前的播放一次时长

Provide feedback

Saved searches