oCanvas 教程学习摘要（一）

时间：2015-06-30 00:12:49 阅读：526 评论：0 收藏：0 [点我收藏+]

1、oCanvas对象
oCanvas 是一个全局对象，包含了所有的模块，以及核心的构造器和一些其它的方法。

2、create(settings)
create 方法被用来设置一个核心实体，核心实体是每个oCanvas对象都需要的，所以调用create方法就能保证你能访问到核心实体。
settings 是一个对象入参，可选属性如下：

canvas ：字符串或者一个HTMLCanvasElement
background ：canvas 对象的 background 样式，默认值为transparent
clearEachFrame ：Boolean
drawEachFrame ：Boolean
fps ：Number
plugins ：Array
disableScrolling ：Boolean，适用于滑动屏幕上的canvas

返回值：
新创建的核心实体
示例：

var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#0cc"
});

3、domReady(function)
如果你的脚本是运行于一个canvas元素上的，可以使用 domReady() 方法。
当DOM已经准备好了时，就运行制定的函数。
示例：

oCanvas.domReady(function () {
    var canvas = oCanvas.create({
        canvas: "#canvas",
        background: "#0cc"
    });
});

4、extend(destination, source1[, source2...])
用来自另外一个对象的属性扩展目标对象。
返回值：
返回被扩展的目标对象
示例：

var obj_1 = {
    foo: "bar"
};
var obj_2 = {
    lorem: "ipsum"
};
var obj_3 = {
    foo: "foobar",
    lorem: "loremipsum"
};
oCanvas.extend(obj_1, obj_2);
output("obj_1: ", obj_1);
oCanvas.extend(obj_3, obj_2);
output("obj_3: ", obj_3);
var newObj = oCanvas.extend({}, obj_2, obj_3);
output("newObj: ", newObj);
output("obj_2: ", obj_2);

5、registerDisplayObject(name, constructor[, init])
注册一个新的展示对象模块，使用这个方法注册的对象将会针对每一个创建的新的核心对象被初始化。
如果你想只针对一个特定的核心实体注册一个定制的展示对象，就使用展示模块上的 register() 对象。
输入参数：
name：String，展示对象的名称；通过 core.display.thisname() 可以创建这个对象的一个新的实体。
constructor：Function(user settings, core instance)，它也会返回使用了指定的用户设置（user settings）进行扩展的对象。这个对象需要有一个叫做draw()的方法。也要有一个shapeType属性，它是一个取值为rectangular或者radial的字符串。
init：String，可选参数，这是构造器所返回的对象上面的一个方法。这个方法会在每次有展示对象的新实体创建时被调用到。
示例：

var constructor = function (settings, core) { 
    return oCanvas.extend({
        core: core, 
        shapeType: "rectangular",
        init: function () {

        }, 
        draw: function () {
            var canvas = this.core.canvas,
                    origin = this.getOrigin(),
                    x = this.abs_x - origin.x,
                    y = this.abs_y - origin.y,
                    width = this.width,
                    height = this.height; 
            canvas.beginPath(); 
            if (this.fill !== "") {
                canvas.fillStyle = this.fill;
                canvas.fillRect(x, y, width, height);
            } 
            if (this.strokeWidth > 0) {
                canvas.strokeStyle = this.strokeColor;
                canvas.lineWidth = this.strokeWidth;
                canvas.strokeRect(x, y, width, height);
            } 
            canvas.closePath();
        }
    }, settings);
};
oCanvas.registerDisplayObject("myObject", constructor, "init");
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});
var myObj = canvas.display.myObject({
    x: 77,
    y: 150,
    width: 200,
    height: 300,
    fill: "#000",
    stroke: "10px #fff"
});
canvas.addChild(myObj);

6、registerModule(name, constructor [, init])
在核心实体上注册新的模块。
示例：

var constructor = function () {
    return {
        foo: "foobar"
    };
};
oCanvas.registerModule("myModule", constructor, "init");
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
});
output(canvas.myModule.foo);

7、registerPlugin(name, plugin)
注册一个可以在创建新的核心实体时使用的插件。
示例：

var plugin = function () {
    this.background.set("#ff0");
};
oCanvas.registerPlugin("myPlugin", plugin);
var canvas = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc",
    plugins: ["myPlugin"]
});

oCanvas 教程学习摘要（一）

原文：http://my.oschina.net/xuleo/blog/472258

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)