oCanvas 教程学习摘要(二)

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.

时间: 2024-11-12 09:53:03

oCanvas 教程学习摘要(二)的相关文章

oCanvas 教程学习摘要(一)

1.oCanvas对象 oCanvas 是一个全局对象,包含了所有的模块,以及核心的构造器和一些其它的方法. 2.create(settings) create 方法被用来设置一个核心实体,核心实体是每个oCanvas对象都需要的,所以调用create方法就能保证你能访问到核心实体. settings 是一个对象入参,可选属性如下: canvas :字符串或者一个HTMLCanvasElement background :canvas 对象的 background 样式,默认值为transpar

SQL 初级教程学习(二)

1.SQL 语句从 "Websites" 表中选取头两条记录: SELECT * FROM Websites LIMIT 2; SELECT TOP 50 PERCENT * FROM Websites; 2.通配符 A.SQL 语句选取 url 以字母 "https" 开始的所有网站: SELECT * FROM WebsitesWHERE url LIKE 'https%'B.SQL 语句选取 name 以一个任意字符开始,然后是 "oogle&quo

jfinal框架教程-学习笔记(二)

上一节介绍了jfinal框架的简单搭建,这节通过一个小例子了解jfinal的结构和特点 先上图 1.建数据库(我用的是oracle数据库,其他的相对也差不多) -- Create table create table CLASSES ( classesid NUMBER not null, classesname VARCHAR2(20), classesaddress VARCHAR2(50) ); -- Create table create table STUDENT ( studenti

阅读《LEARNING HARD C#学习笔记》知识点总结与摘要二

今天继续分享我的阅读<LEARNING HARD C#学习笔记>知识点总结与摘要二,仍然是基础知识,但可温故而知新. 七.面向对象 三大基本特性: 封装:把客观事物封装成类,并隐藏类的内部实现细节,仅开放相关的访问属性.方法等 继承:通过继承可以复用父类的代码: 多态:1.允许将子对象赋值给父对象,2.同方法在不同的对象上有不同的实现方式: 子类初始化顺序:初始化类的实例字段à调用父类构造函数à调用子类构造函数: 重写:父类声明为virtual或abstract的类成员(属性.方法),在子类继

【前端,干货】react and redux教程学习实践(二)。

前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的前端架构,我将尽量以最简单的语言描述,如果有童鞋看不懂,也可以私下问我. 复习 前一节我们已经知道,一个redux应用,主要有几个概念,它们的共同作用都是管理一个全局state,使react组件的state集中处理,想一下你在写react组件的时候,组件的state总是或多或少与父级组件有关联,一般

学习ASP .NET MVC5官方教程总结(二)添加控制器

学习ASP .NET MVC5官方教程总结(二)添加控制器 在这一章我们来简单讲解一下mvc的概念和控制器的建立和使用还有路由的使用. MVC设计模式是现在一种非常主流的开发模式,他有易于测试和维护的优点.它将传统的web开发分成了三个部分:模型-视图-控制器. 基于 MVC 应用程序中包含: Models: 表示应用程序的数据,并使用验证逻辑强制执行业务规则的数据的类. Views: 您的应用程序用来动态生成 HTML 响应的模板文件. Controllers: 处理传入的请求的浏览器,类检索

.Net程序员之Python基础教程学习----列表和元组 [First Day]

一. 通用序列操作: 其实对于列表,元组 都属于序列化数据,可以通过下表来访问的.下面就来看看序列的基本操作吧. 1.1 索引: 序列中的所有元素的下标是从0开始递增的. 如果索引的长度的是N,那么所以的范围是-N~N-1之间,超过这个范围就会提示 IndexError:  index out of range >>> greeting ='Hello world' >>> print greeting Hello world >>> print gr

几年前做家教写的C教程(之二)

C语言学习宝典(2) 认识C语言中的运算符: (1)算术运算符   (+  -  *  /  %) (2)关系运算符    (>  <  ==  >=  <=  != ) (3)逻辑运算符    (!  &&   ||) (4)位运算符   (<<  >>  ~  |  ^  &) (5)赋值运算符  (=以及它的扩展运算符) (6)条件运算符   (?:) (7)逗号运算符  (,) (8)指针运算符   (*和&) (9)

ARM架构与体系学习(二)——3级流水线

ARM架构与体系学习(二)——3级流水线 标签: 存储嵌入式汇编c 2012-04-18 00:44 5414人阅读 评论(4) 收藏 举报  分类: ARM7(16)  版权声明:本文为博主原创文章,未经博主允许不得转载. 看到汇编中很多关于程序返回与中断返回时处理地址都很特别,仔细想想原来是流水线作用的效果.所以,决定总结学习下ARM流水线. ARM7处理器采用3级流水线来增加处理器指令流的速度,能提供0.9MIPS/MHz的指令处理速度. PS: MIPS(Million Instruct