cc下橡皮擦的实现代码

Creator 2.x
#20

请问怎么判断蒙板有没有全部擦除完呢？？？

#21

你们测试成功的，setBlendFunc()到底传入的是哪个参数啊？我传入的参数，要么没反应，要么会导致橡皮擦呈半月形，要么是矩形，我tm快崩溃了，都拖了半年了还没有解决

#22

我使用的1.7版本，直接运行就行

#23

#24

https://github.com/sky068/scratchCard

2赞
#25

image.png1898×1056 118 KB

cc.Class({
    extends: cc.Component,

    properties: {
        rsultLabel:cc.Label,
        mask:cc.Mask,
        promptLabel:cc.Label,
    },

    // use this for initialization
    onLoad: function (){
        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
    },

    onDestroy:function () {
        this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegin, this);
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
    },
    _onTouchBegin:function (event) {

        cc.log('touchBegin');

        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    },

    _onTouchMoved:function (event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    },

    _onTouchEnd:function (event) {
        var point = event.touch.getLocation();
        point = this.node.convertToNodeSpaceAR(point);
        this._addCircle(point);
    },

    _onTouchCancel:function (event) {
    },

    _addCircle:function (point) {
        var stencil = this.mask._clippingStencil;
        var color = cc.color(255, 255, 255, 0);
        stencil.drawPoly(this.mask._calculateCircle(point,cc.p(50,50), 64), color, 0, color);
    }
});
#26

image.png1925×1022 47.7 KB

#27

用drawDot描点的方法，如果滑动稍快，会导致不连贯直接穿帮。即时计算滑动距离往中间补点，也是很不顺畅，拐角处还有可能出现尖锐的转角。所以我建议是用drawSegment画线段的方法，画出的线条很流畅，然而却也导致了橡皮擦变矩形。目前还是没找到完美的解决方案。我楼上那个兄弟提的drawPoly也是描点，同样存在不连贯

#28

别用 drawSegment ，而是使用 drawQuadBeizier 来补间效果最好。不过这个方法有点 bug，补间会有一些棱角。可以参考我这个贴的解决方案：http://forum.cocos.com/t/ccc/51528/65

#29

2.0.0的不能用了，会报错ScratchCardCtr.js:78 Uncaught TypeError: Cannot read property ‘drawPoly’ of undefined

#31

https://www.jianshu.com/p/97bf36c9ec40 这是我实现的橡皮擦效果，尝试了很多论坛的方法，最后还是自己找到底层的逻辑来实现

1赞
#32

请问现在有解决吗?

#33

stencil.drawPoly请问这个函数是什么，我会报错说这不是一个函数

#34

2.0 以后这个方法已经废弃了。

#35

我用的是稳定版，现在又可以了

#36

这个方法在安卓平台上运行有问题，MASK显示白色，用不了。在web跟IOS又正常

#37

2.0以上就不行了，，

#38

请问2.0.9版本 需要用哪个

#39

https://forum.cocos.com/t/2-0-8/74246
2.0.8，看这

#40

2.3.0上还能用么