Cocos Creator 橡皮擦效果：RenderTexture跟DrawNode还在.

发表于 | 分类于

翻了翻旧博客,偶然看到下面这篇：
http://blog.csdn.net/no99es/article/details/39209681

回想了下，貌似没有看到Creator里有RenderTexture，DrawNode相关的API，习惯性的搜了下gitHub源码，果然这两个类还在:

cc.DrawNode

cc.RenderTexture

Creator的文档还在完善，这些功能还没有组件化，但是源码就是最好的文档。

cocos2dx已经试过了，再来试试Creator的橡皮擦效果。

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
31
32
33
// use this for initialization
onLoad: function () {
    this.label.string = this.text;

    this.render = cc.RenderTexture.create(960, 540);
    this.node._sgNode.addChild(this.render);
    this.render.begin();
    //纯色填充
    this.bgDrawNode = new cc.DrawNode();
    this.bgDrawNode.setDrawColor(new cc.Color(0, 100, 0, 255));
    this.bgDrawNode.drawRect(cc.v2(0, 0), cc.v2(960, 540), new cc.Color(50, 200, 50, 255), 10);
    this.bgDrawNode.visit();
    this.render.end();
    this.bgDrawNode.release();
    //擦除Node
    this.eraserDrawNode = new cc.DrawNode();
    this.eraserDrawNode.setBlendFunc(cc.macro.ZERO,cc.macro.ONE_MINUS_SRC_ALPHA);
    //触摸擦除
    this.node.on(cc.Node.EventType.TOUCH_MOVE, (touch) => {
        cc.log("TOUCH_START");
        var touchLocation = touch.getLocation();
        //清除下DrawNode，否则会使DrawVert数目暴增
        this.eraserDrawNode.clear();
        this.eraserDrawNode.drawDot(
            touchLocation,//位置
            50,//半径
            new cc.Color(255, 255, 255, 255)
        );
        this.render.begin();
        this.eraserDrawNode.visit();
        this.render.end();
    }, this);
},

思路就是，RenderTexture填充后，使用DrawNode继续访问RenderTexture，Blend混合使Alpha为0（即透明）即可。
需要注意的是及时调用DrawNode.clear()，否则Vert数目会暴增。

效果图：

橡皮擦效果