前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >oCanvas 教程学习摘要(二) 转

oCanvas 教程学习摘要(二) 转

作者头像
LeoXu
发布2018-08-15 14:38:30
3510
发布2018-08-15 14:38:30
举报
文章被收录于专栏:LeoXu的博客

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之后立即进行重新绘制。这个方法可以被用来在同时要添加许多的对象,但只想在添加完成之后进行一次重新绘制的时候.

示例:

代码语言:javascript
复制
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的背景色。返回核心实体本身。

示例:

代码语言:javascript
复制
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()方法的快速原型方法。

示例:

代码语言:javascript
复制
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。如果从来都没有这个对象,则不会发生任何事情,方法会照常返回核心实体。

示例:

代码语言:javascript
复制
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.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015/06/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档