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);