oCanvas 教程学习摘要（二）

LeoXu的个人页面 2015-06-30 6 阅读

教程

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.

教程

作者：LeoXu的个人页面

leoxu的博客

原文地址：oCanvas 教程学习摘要（二）, 感谢原作者分享。

→oCanvas 教程学习摘要（一） ←Objective-C 实现两个NSNumber的加法

发表评论

您可能感兴趣的博客

博主 发表 2015-10-20 13:05:12 Mac Adobe Photoshop CS6 破解教程(图文)

chenzimu7 发表 2015-10-19 15:11:21 游戏中的独角兽！传奇游戏纪念碑谷背后的设计秘密

cyRotel 发表 2015-10-20 14:37:57 福利两连发！在线专业修图神器泼辣修图7个新功能（附调色教程）

书法字体 发表 2015-10-20 09:00:34 二十个设计新手易犯的文字排版设计误区（排版设计教程）

dianlujitao 发表 2015-10-19 04:21:45 OpenWrt Chaos Calmer 15.05使用mwan3单线多拨教程

cyRotel 发表 2015-10-18 15:19:53 AI教程！手把手教你绘制一只逼真写实的运动鞋

cyRotel 发表 2015-10-18 15:35:40 PS教程！轻松五步打造多彩酷炫的标签云文字特效

cyRotel 发表 2015-10-19 11:37:48 AI教程！手把手教你绘制一个大气典雅的灯光背景

cyRotel 发表 2015-10-19 11:51:56 这才是你要学的！手把手教你包裝一份高大上的设计稿

cyRotel 发表 2015-10-19 12:08:47 哪些最流行？FontReach收录百万网站字体使用情况(附排行)

博主 发表 2014-06-22 02:11:23 quartz教程：快速入门

博主 发表 2014-06-23 13:01:32 Quartz教程一：使用quartz

您可能感兴趣的代码