码迷,mamicode.com
首页 > 其他好文 > 详细

oCanvas 教程学习摘要(二)

时间:2015-06-30 16:39:22      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

1、Core
Core是在全局的oCanvas对象上使用create()方法创建出来的 oCanva Core 实体。

2、Core 实体包含的模块
    animation :动画,通常是受到某些事情触发的简短动画.
    background :背景,用来处理canvas的背景.
    display :包含了所有已经添加进来的展示对象。调用 core.display.rectangle(settings) 会返回一个新的矩形对象.
    draw :处理canvas所有的重新绘制工作.
    events :事件,处理每一个相关的事件,管理 bind() 方法的调用.
    keyboard :键盘,处理所有的键盘事件.
    mouse :鼠标,处理所有的鼠标事件.
    scenes :处理应用的不同状态.
    style :样式,处理用于内部方法的有关样式的东西.
    timeline :时间线,处理主循环.
    tools :供其它方法使用的方法. 它被用来发现指针是否在对象里面, 哪个在事件要起作用时是必须的.
    touch :触摸,处理所有的触摸事件.

3、Core 的属性
    children : Array,所有被直接添加到核心实体中的对象的列表.
    height : Number,像素格式的canvas高度,设置了这个值之后会重新设置canvas的尺寸,并重新绘制所有的对象.
    width : Number,像素格式的canvas宽度
    id : Number,它是核心实体在全局的oCanvas对象中的ID. oCanvas.canvasList 是所有实体的一个数组, 而这里的ID就是实体在这个数组中的索引位置.
    pointer : Object,正在使用的指针的引用。另外就是在触摸设备和鼠标上的点击.
    settings : Object,控制oCanvas如何工作的设置属性对象. 它有下面这个属性:
         canvas :String 或者 HTMLCanvasObject
         background : String. 注意:只能在oCanvas.create()方法的settings参数中指定.
         clearEachFrame : Boolean
         drawEachFrame : Boolean
         fps : Number,默认为30
         plugins : Array
         disableScrolling : Boolean

4、addChild(object [, redraw])
将传入的对象添加到canvas上,同时会立即出发对所有东西的重新绘制。返回核心实体本身。
入参:
    object : displayObject,这是一个继承自基类displayObjecti的对象. 可以是一个提前定义好了的display对象,或者是一个使用register()方法创建的用户定义的display对象.
    redraw : Boolean (since version 2.0.0),如果设置为false,canvas不会再对象被添加到canvas之后立即进行重新绘制。这个方法可以被用来在同时要添加许多的对象,但只想在添加完成之后进行一次重新绘制的时候.
示例:
var canvas = oCanvas.create({
    canvas: "#canvas"
});
var rectangle = canvas.display.rectangle({
    x: 77,
    y: 74,
    width: 200,
    height: 100,
    fill: "#000"
});
canvas.addChild(rectangle);




5、clear(keepBackground)
清除canvas上的所有的所有对象,入参keepBackground为true不清空canvas的背景色。返回核心实体本身。
示例:
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});
var button_keep = canvas.display.rectangle({
    x: 30,
    y: 80,
    width: 132,
    height: 100,
    fill: "#000"
}),
button_clear = button_keep.clone({
    x: 192
});
canvas.addChild(button_keep);
canvas.addChild(button_clear);
button_keep.bind("click tap", function () {
    canvas.clear(); // true is the default
});
button_clear.bind("click tap", function () {
    canvas.clear(false);
});




6、destroy()
销毁核心实体以清理出内存。这个方法首先会重置核心实体,然后移除所有的DOM事件处理器,并将其从oCanvas.canvasList列表中移除。

7、redraw()
重新绘制所有添加到canvas上的对象,它是draw模块redraw()方法的快速原型方法。
示例:
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});
var button = canvas.display.rectangle({
    x: 77,
    y: 74,
    width: 200,
    height: 100,
    fill: "#000"
});
canvas.addChild(button);
button.fill = "#999";
button.bind("click tap", function () {
    canvas.redraw();
});




8、removeChild(object [, redraw])
从canvas里面移除传入的对象,默认会触发redraw。如果从来都没有这个对象,则不会发生任何事情,方法会照常返回核心实体。
示例:
var canvas = oCanvas.create({
    canvas: "#canvas"
});
var rectangle = canvas.display.rectangle({
    x: 77,
    y: 74,
    width: 200,
    height: 100,
    fill: "#000"
});
canvas.addChild(rectangle);
rectangle.bind("click tap", function () {
    canvas.removeChild(rectangle);
});




9、reset()
将核心实体重置到初始状态. 它将会清除掉所有的对象和时间,并重置settings.

oCanvas 教程学习摘要(二)

标签:

原文地址:http://my.oschina.net/xuleo/blog/472504

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!