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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

初学者必知的HTML规范

11420
来自专栏Golang语言社区

go 切片使用小结

最新项目使用go语言开发,因此有机会结识了go语言。在写代码时,无意间发现了同事代码的一个bug。今天拿来一起学习一下。 首先go语言有个强大的基本数据结构,那...

34580
来自专栏河湾欢儿的专栏

vue初

指令总结 v-bind 可以绑定属性,包括class style,而已省略,使用:替代 在1vue.0中有三种修饰符,.sync,.once,.camel...

10120
来自专栏Golang语言社区

golang(Go语言) byte/[]byte 与 二进制形式字符串 互转

效果 把某个字节或字节数组转换成字符串01的形式,一个字节用8个”0”或”1”字符表示。比如: byte(3) –> “00000011” []byte{1...

51370
来自专栏数据结构与算法

2833 奇怪的梦境 未AC

2833 奇怪的梦境 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description Aide...

28850
来自专栏Golang语言社区

Go-指针、传值与传引用、垃圾回收

要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

370100
来自专栏北京马哥教育

Python爬虫库-BeautifulSoup的使用

Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标...

10200
来自专栏小程序的道路

小程序渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。通过遍历数据,将数据展示,类似vue中的 v-for。 wx:for-...

16120
来自专栏前端知识分享

第22天:js改变样式效果

1、alert:弹出警示框(用的非常少,用户体验不好) 完整写法:window.alert(“执行语句”); window对象,窗口,一般情况可省略 alert...

13510
来自专栏行者常至

02.爬虫基础知识与简易爬虫实现

10500

扫码关注云+社区

领取腾讯云代金券