ClippingNode

1. 分析BasicTest类，继承BaseClippingNodeTest,而后者继承BaseTestLayer类（调用了setup方法）

2. 在BasicTest类中实现了setup方法，做了一些准备工作，此外类还实现一些动作方法

 actionRotate:function () {
        return cc.RepeatForever.create(cc.RotateBy.create(1.0, 90.0));
    },

    actionScale:function () {
        var scale = cc.ScaleBy.create(1.33, 1.5);
        return cc.RepeatForever.create(cc.Sequence.create(scale, scale.reverse()));
    },

3. shape,clipper函数中

var shape = cc.DrawNode.create();
var triangle = [cc.p(-100, -100), cc.p(100,-100),cc.p(0,100)];
var green = cc.color(0,255,0,255);
shape.drawPoly(triangle,green,3,green);
return shape

 clipper:function () {
        return cc.ClippingNode.create();
    },

4. 子子类中方法也可以调用 this._super()方法

clipper:function () {
        var clipper = this._super();
        clipper.setInverted(true);
        return clipper;
    }

5. 创建CippingNode，由三步组成，定义action,定义模版形状，加入显示内容

 var clipper = cc.ClippingNode.create();
        clipper.tag = TAG_CLIPPERNODE;
        clipper.width = 200;
	    clipper.height = 200;
        clipper.anchorX = 0.5;
        clipper.anchorY = 0.5;
        clipper.x = this.width / 2;
        clipper.y = this.height / 2;
        clipper.runAction(cc.RepeatForever.create(cc.RotateBy.create(1, 45)));
        this.addChild(clipper);

        var stencil = cc.DrawNode.create();
        var rectangle = [cc.p(0, 0),cc.p(clipper.width, 0),
            cc.p(clipper.width, clipper.height),
            cc.p(0, clipper.height)];

        var white = cc.color(255, 255, 255, 255);
        stencil.drawPoly(rectangle, white, 1, white);
        clipper.stencil = stencil;

        var content = cc.Sprite.create(s_back2);
        content.tag = TAG_CONTENTNODE;
        content.anchorX = 0.5;
        content.anchorY = 0.5;
        content.x = clipper.width / 2;
	    content.y = clipper.height / 2;
        clipper.addChild(content);

还可以分别对 stencil, content 加入动作不断变化，只有处于stencil中的content才能显示出来

 stencil:function () {
        var node = this.shape();
        node.runAction(this.actionRotate());
        return node;
    },

    content:function () {
        var node = this.grossini();
        node.runAction(this.actionScale());
        return node;
    }

还可以 stencil不是形状而是用一个sprite创建，而content可以用形状创建

stencil:function () {
        var node = this.grossini();
        node.runAction(this.actionRotate());
        return node;
    },

    clipper:function () {
        var clipper = this._super();
        clipper.alphaThreshold = 0.05;
        return clipper;
    },

    content:function () {
        var node = this.shape();
        node.runAction(this.actionScale());
        return node;
    }

6. 触摸事件处理

 this._scrolling = false;
        cc.eventManager.addListener(cc.EventListener.create({
            event: cc.EventListener.TOUCH_ALL_AT_ONCE,
            onTouchesBegan: function (touches, event) {
                if (!touches || touches.length == 0)
                    return;
	            var target = event.getCurrentTarget();

                var touch = touches[0];
                var clipper = target.getChildByTag(TAG_CLIPPERNODE);
                var point = clipper.convertToNodeSpace(touch.getLocation());
                var rect = cc.rect(0, 0, clipper.width, clipper.height);
                this._scrolling = cc.rectContainsPoint(rect, point);
                this._lastPoint = point;
            },

            onTouchesMoved: function (touches, event) {
                if (!this._scrolling)
                    return;
	            var target = event.getCurrentTarget();

                if (!touches || touches.length == 0)
                    return;
                var touch = touches[0];
                var clipper = target.getChildByTag(TAG_CLIPPERNODE);
                var point = clipper.convertToNodeSpace(touch.getLocation());
                var diff = cc.pSub(point, this._lastPoint);
                var content = clipper.getChildByTag(TAG_CONTENTNODE);
                content.setPosition(cc.pAdd(content.getPosition(), diff));
                this._lastPoint = point;
            },

            onTouchesEnded: function (touches, event) {
                if (!this._scrolling) return;
                this._scrolling = false;
            }
        }), this);

7. HolePoint stencil与content保持一致

 pokeHoleAtPoint:function (point) {
        var scale = Math.random() * 0.2 + 0.9;
        var rotation = Math.random() * 360;

        var hole = cc.Sprite.create(s_hole_effect_png);
        hole.attr({
	        x: point.x,
	        y: point.y,
	        rotation: rotation,
	        scale: scale
        });

        this._holes.addChild(hole);

        var holeStencil = cc.Sprite.create(s_hole_stencil_png);
        holeStencil.attr({
	        x: point.x,
	        y: point.y,
	        rotation: rotation,
	        scale: scale
        });

        this._holesStencil.addChild(holeStencil);
        this._outerClipper.runAction(cc.Sequence.create(cc.ScaleBy.create(0.05, 0.95), cc.ScaleTo.create(0.125, 1)));
    }

8.定义多个clipNode, （stencil与content）

 var target = cc.Sprite.create(s_pathBlock);
        target.anchorX = 0;
        target.anchorY = 0;
        target.scale = 3;

        var scale = target.scale;
        var stencil = cc.DrawNode.create();

        var rectangle = [cc.p(0, 0),cc.p(target.width*scale, 0),
            cc.p(target.width*scale, target.height*scale),
            cc.p(0, target.height*scale)];
        stencil.drawPoly(rectangle, cc.color(255, 0, 0, 255), 0, cc.color(255, 255, 255, 0));

        this._outerClipper = cc.ClippingNode.create();
        this._outerClipper.retain();
        var transform = cc.AffineTransformMakeIdentity();
        transform = cc.AffineTransformScale(transform, target.scale, target.scale);

	    var ocsize = cc.SizeApplyAffineTransform(cc.size(target.width, target.height), transform);
        this._outerClipper.width = ocsize.width;
	    this._outerClipper.height = ocsize.height;
        this._outerClipper.anchorX = 0.5;
        this._outerClipper.anchorY = 0.5;
        this._outerClipper.x = this.width * 0.5;
	    this._outerClipper.y = this.height * 0.5;
        this._outerClipper.runAction(cc.RepeatForever.create(cc.RotateBy.create(1, 45)));

        this._outerClipper.stencil = stencil;

        var holesClipper = cc.ClippingNode.create();
        holesClipper.inverted = true;
        holesClipper.alphaThreshold = 0.05;

        holesClipper.addChild(target);

        this._holes = cc.Node.create();
        this._holes.retain();

        holesClipper.addChild(this._holes);

        this._holesStencil = cc.Node.create();
        this._holesStencil.retain();

        holesClipper.stencil = this._holesStencil;
        this._outerClipper.addChild(holesClipper);
        this.addChild(this._outerClipper);

        cc.eventManager.addListener(cc.EventListener.create({
            event: cc.EventListener.TOUCH_ALL_AT_ONCE,
            onTouchesBegan:function (touches, event) {
                var target = event.getCurrentTarget();
                var touch = touches[0];
                var point = target._outerClipper.convertToNodeSpace(touch.getLocation());
                var rect = cc.rect(0, 0, target._outerClipper.width, target._outerClipper.height);
                if (!cc.rectContainsPoint(rect,point))
                    return;
                target.pokeHoleAtPoint(point);
            }
        }), this);