oCanvas 教程学习摘要（二）

最新推荐文章于 2022-04-14 12:48:34 发布

weixin_33810302

最新推荐文章于 2022-04-14 12:48:34 发布

阅读量127

点赞数

原文链接：https://my.oschina.net/xuleo/blog/472504

版权

为什么80%的码农都做不了架构师？>>>

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.

转载于:https://my.oschina.net/xuleo/blog/472504