在Cocos Creator 1.x中使用Raphael.js

发表于 | 更新于: | 阅读次数:
字数统计:

Cocos Creator 1.x中的Canvas绘图接口,可以使用绘图库，如paper.js和raphael.js. 现在已有Cocos Creator的raphael扩展组件库，raphael组件使用DEMO，下面介绍一下如何集成到CocosCreator工程中.

在使用中直接拷贝扩展组建库的文件到工程中时遇到了点小问题，所以就干脆直接用了DEMO中的文件。

步骤一，下载DEMO

下载raphael组件使用DEMO.

步骤二，拷贝DEMO中对应的文件

  1. 拷贝DEMO工程中assets中的lib和raphael目录到目标工程assets中对应位置,lib中的greensock是一个JavaScript框架，它能够轻而易举地让HTML元素动起来(svg动画)。

  2. 拷贝DEMO工程中node_modules目录到工程根目录下，这些模块是raphael组件必需的，也可以用nodejs的npm管理。
    “dependencies”: {
    “cheerio”: “0.20.0”,
    “domhandler”: “2.3.0”
    }

步骤三，新建脚本文件放到工程assets下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
cc.Class({
    extends: cc.Component,

    // use this for initialization
    onLoad: function () {
        var group = this.addComponent('R.group');

        var path = group.addPath();
        path.rect(-100, -100, 100, 100);
        path.makePath();

        path = group.addPath();
        path.circle(50, 50, 50, 50);
        path.makePath();

        group.rotation = 45;

        var path = this.addComponent('R.path');

        path.selected = true;
        path.fillColor = 'none';

        path.M(0, 0);
        path.L(100, 100);
        path.L(-100, 100);
        path.Z();

        path.makePath();
    },
});

步骤四，添加用户脚本文件到节点中

如raphael能正常工作，可以看到画出正方形,圆形和三角形.

完毕

0%