Api Doc

`CEC.Loader` {Class}

Usage

var assets = [
            './images/package/1.png',
            './images/package/2.png',
            './images/package/3.png',
            './images/package/4.png',
            './images/package/pkg_01.jpg',
            './images/package/pkg_03.png',
            './images/package/pkg_05.png',
            './images/package/repeat.png',
            'http://fackbook.com/xx.jpg',
            'http://img08.taobaocdn.com/imgextra/i8/T1IzdRFcVcXXb1upjX.jpg_xxx.jpg'
        ];

        // new Loader().load(assets, cb);
        new Loader(assets, function (progress, img) {
            console.log(progress, img);
        });

资源加载类，用于批量加载images，图片资源加载失败或者超时会自动retry，最多retry3次。超时的定义：第一次5s，第二次3s，第三次2s

加载完成的图片可以通过 loader实例的 loadedImages 获得。

`CEC.Notifier` {Class}

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

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

`CEC.Ticker` {Class}

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

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

Usage

CEC.Ticker.singleton.on('tick', function (dt) {
    //loop
});

//or
ticker = new CEC.Ticker();
ticker.on('tick', function (dt) {
    //loop
})

`CEC.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透明度

Usage

比如初始化一个多边形的sprite

var Sprite = CEC.Sprite, Ticker = CEC.Ticker;

var stage = new Sprite('canvas').on('render:before', function (dt) { 
            this.fillColor = 'rgba(0,0,0,0.1)';
        });

        var rect = new Sprite({
            x: 100,
            y: 100,
            points: [
                [-50,-30], [0, -65], [50, -30], [30, 30], [-30, 30]
            ]
        }).appendTo(stage);

        Ticker.singleton.on('tick', function (dt) {
            //stage.clear();
            stage.render(dt);
        });

`CEC.Sprite.Rect` {Class}

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

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

var RectSprite = CEC.Sprite.Rect,
    Ticker = CEC.Ticker;

var stage = new RectSprite('canvas');

        var rect = new RectSprite({
            x: 200,
            y: 100,
            width: 200,
            height: 200,
            backgroundImage: 'http://a.tbcdn.cn/s/kissy/logo.png',
            //backgroundPosition: [-50, 0]
        })
        .setFillColor('#333')
        .appendTo(stage)
        .on('render:before', function () {
             this.rotate('+1');
        });

        Ticker.singleton.on('tick', function (dt) {
            stage.clear();
            stage.render(dt);
        });

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

CEC.Sprite.Anim {Class}

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

        var anim = new CEC.Sprite.Anim({
            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);

其中，animConfig 中的 frameData 可以不用自己填写每帧数据，前提是sprite精灵图按每帧固定高宽，横向或者纵向排布。可以简化配置，比如：

var anim2 = new CEC.Sprite.Anim({
            x: 200,
            y: 300,
            width: 300,
            height: 250,
            backgroundImage: './images/package/4.png',
            // animConfig  如果包涵imgWidth, imgHeight 字段，不配置frameData的话,会自动依据图片高宽　和　帧排列方向生成frame 数据
            animConfig: {
                frameNum: 4,
                imgWidth: 2002,
                imgHeight: 502,
                arrangeDir: 'h'
            }
        }).appendTo(stage);

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

`CEC.Sprite.Path` ｛Class｝

path 的 sprite，通过参数传入的 points ，定义一条折线。

Usage

var line = new CEC.Sprite.Path({
            points: [[300, 300], [550, 380], [500, 200]],
            lineWidth: 1,
            lineColor: 'red'
        }).appendTo(stage);

Methods
- setLineWidth(width[, autoRender]) - 设置折线宽
- setColor(color[, autoRender]) - 设置折线颜色
- setPoint(index, point[, autoRender]) - 设置某个折线顶点
- setPoints(points[, autoRender]) - 设置折线所有的points 数组

`CEC.Sprite.Segment`

继承于CEC.Sprite.Path,本质上就是当折线只有两个端点的时候，就是一条线段。

var line = new CEC.Sprite.Segment({
            points: [[300, 200], [450, 380]],
            lineWidth: 2,
            lineColor: '#333',
        }).appendTo(stage);

除了Path已有的一些方法外，还提供了线段相关的一些方法：

Methods
- getLength() - 获取线段长度
- setLength(len) - 设置线段长度
- getNormal() - 返回线段的一个方向向量

`CEC.Sprite.Text`

继承自CEC.Sprite.Rect, 提供了文字的方便渲染，同时可以方便的改变文字的一些样式和排版。

Usage

var textRect = new CEC.Sprite.Text({
            x: 200,
            y: 100,
            width: 400,
            height: 300,
            backgroundImage: 'http://a.tbcdn.cn/s/kissy/logo.png',
            backgroundRepeat: 'repeat-y',
            borderWidth: 1,
            borderColor: '#333',
            backgroundPosition: '50% 50%',
            backgroundSize: '100% 100%',

            text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade silently on non-modern browsers',
            //text: '测试fsafsd',
            textType: 'stroke', //文字格式，stroke | fill
            textColor: 'red', // 文字颜色
            fontSize: 14, // 文字大笑
            fontFamily: 'Microsoft Yahei', //字体
            fontStyle: 'italic', // 斜体样式
            fontWeight: 'bold', // 粗细
            lineHeight: '100%', // 行高，绝对值或者 根据fontSize的百分比
            textOffset: '50', // 文字相距容器边缘距离，可以理解为padding，支持 1位，2位，4位的设置
            textAlign: 'left', // 文本横向排列方式，left, center, right
            verticalAlign: 'bottom' //文本纵向排列方式 top, middle, bottom
        })
        .appendTo(stage)

Methods
- setText(txt) - 设置文本
- setTextType(type) - 设置文本为stroke（空心字）还是fill（实心字）
- setTextColor(color) - 设置文本颜色
- setFontSize(fs) - 设置字体大小
- setFontFamily(ff) - 设置字体
- setFontStyle(fs) - 设置斜体等样式
- setFontWeight(fw) - 设置字重
- setLineHeight(lh) - 设置行高
- setTextAlign(ta) - 设置文本横向对齐方式。left，center，right
- setVerticalAlign(va) - 设置文本纵向对齐方式 top，middle，bottom
- setTextOffset(of) - 设置文本距离容器offset，可以理解为padding
- setTextOffsetTop(top) - 设置文本距离容器顶部距离
- setTextOffsetRight(right) - 设置文本距离容器右侧距离
- setTextOffsetBottom(bottom) - 设置文本距离容器下边距离
- setTextOffsetLeft(left) - 设置文本距离容器左侧距离

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Api Doc

`CEC.Loader` {Class}

`CEC.Notifier` {Class}

`CEC.Ticker` {Class}

`CEC.Sprite`

`CEC.Sprite.Rect` {Class}

CEC.Sprite.Anim {Class}

`CEC.Sprite.Path` ｛Class｝

`CEC.Sprite.Segment`

`CEC.Sprite.Text`

Clone this wiki locally

Api Doc

CEC.Loader {Class}

CEC.Notifier {Class}

CEC.Ticker {Class}

CEC.Sprite

CEC.Sprite.Rect {Class}

CEC.Sprite.Anim {Class}

CEC.Sprite.Path ｛Class｝

CEC.Sprite.Segment

CEC.Sprite.Text

Clone this wiki locally

`CEC.Loader` {Class}

`CEC.Notifier` {Class}

`CEC.Ticker` {Class}

`CEC.Sprite`

`CEC.Sprite.Rect` {Class}

`CEC.Sprite.Path` ｛Class｝

`CEC.Sprite.Segment`

`CEC.Sprite.Text`