cc下橡皮擦的实现代码

@shishi11 写道：

看了一些有关“橡皮擦”的贴子，但都只是意思，没有代码。而实际以原来cocos2dx的代码来做，又总是出不来，经过一天的试验，得到在CC下实现的代码：

//要盖在某一个节点上，得到这个节点的大小，这里指到另一个节点上，简化的话，就直接指自己也行
let mwidth = self.onode.width;
let mhight = self.onode.height;
let mask = new cc.DrawNode();
//画一个矩形的遮罩层
mask.drawRect(cc.p(0, 0), cc.p(mwidth, mhight), cc.color(0, 255, 255, 255), 1, cc.color(128, 128, 0, 255));
//准备一个相同大小的rendertexture，放到节点下
let rt = new cc.RenderTexture(mwidth, mhight);
self.onode._sgNode.addChild(rt);
//先渲染上遮罩层
rt.begin();
mask.visit();
rt.end();
//准备要橡皮擦
let e1 = new cc.DrawNode();
//触摸监听
cc.eventManager.addListener({
  event: cc.EventListener.TOUCH_ONE_BY_ONE,
  onTouchBegan: function(touch, event) {
    return true;
  },
  onTouchMoved: function(touch, event) {
    //得到当前触点在节点内的坐标
    var pos = touch.getLocation();
    var target = event.getCurrentTarget();
    let pos1 = target.convertToNodeSpaceAR(pos);
    cc.log(pos.x + ":" + pos.y);
    cc.log(pos1.x + ":" + pos1.y);
    //画一个圆，坐标系统由于是cocos2dx的，所以计算一下
    e1.drawDot(cc.p(mwidth/2 + pos1.x, mhight/2 + pos1.y), 30, cc.color(255, 255, 255, 255));
    //这一步最重要，选择透明之外的部分，也就是画的圆，将渲染入的底图，也就是遮罩层，以透明方式
    //融合，形成一个有洞的遮罩层。
    e1.setBlendFunc(cc.ZERO, cc.ONE_MINUS_SRC_ALPHA);
    rt.begin();
    e1.visit();
    rt.end();
  }
}, rt);

有几个问题：
（1）renderTexture和drawnode都不在CC的API里，要看其它的API，而一些参数与之又不一样，看了源码才找到（cc.ONE_MINUS_SRC_ALPHA）
（2）也可以用图片来做遮罩层，_sgNode.visit()就可以了，但需要其显示出来后，visit才有用，也就是一定要把图片挂在某个节点下，但这样就会出现renderTexture不显示问题，还要在最后将其node.parent=null，从节点中去掉，十分麻烦。
（3）新的Graphics也可以画形，并且样数还多，但visit时有问题，看了源码也没研究清楚，它自己有一个renderCMD的东西，不知道与renderTexture有什么关联。
（4）原始的cocos2dx的代码都说要画一个透明的圆cc.color(255, 255, 255, 0)，我在这里上了当，后来想想，一个drawNode本来就是空的，再画一个透明的圆，不还是透明的吗？这也是开始我的“橡皮擦”总是矩形的原因，后来才多花了许多时间。
（5）在Web下始终调不过去，只在android下成功了。

帖子： 5

参与者： 1

阅读整个主题