标签:
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