Cocos2d-js 中的 cc.ClippingNode()

最新推荐文章于 2021-04-22 18:18:14 发布

ZSVX_ZJL

最新推荐文章于 2021-04-22 18:18:14 发布

阅读量970

点赞数

文章标签： Cocos2d-js ClippingNode 遮罩节点

本文链接：https://blog.csdn.net/ZSVX_ZJL/article/details/79977251

版权

var bgWhite = new cc.LayerColor(cc.color(255, 255, 255, 255), 1136, 640); // 白色纯色层打算被遮罩

bgWhite.x = 0;

bgWhite.y = 0;

this.addChild(bgWhite, 0);

---------------------------------------------------------------------------------------------

var Stencil = new cc.Sprite("photoPath"); // 一张png格式的图片,png图片有两个部分:空白和非空白 非空白也就是图案内容完全不用关心 photpPath是.png图片的路径

       var clipping_layer = new cc.ClippingNode();    // 创建一个遮罩层节点和普通的层一样会对外显示自己显示方式比较特别,看下面
       clipping_layer.attr({    // 遮罩层节点参数
           stencil: Stencil,     // 根据 Stencil的空白和 非空白把clipping_layer及其上的子层切割成两个部分 A 和 B
           anchorX:0,
           anchorY:0,
           alphaThreshold:0.5,
       });
       clipping_layer.setContentSize(cc.size(1136, 640));

clipping_layer.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);

clipping_layer.setInverted(false); // 重点:显示方式

// true A区域显示clipping_layer的child部分,B区域透明,显示clipping_layer下面层的

// false A区域透明,显示clipping_layer下面层的,B区域显示clipping_layer的child部分

var bgBlue = new cc.LayerColor(cc.color(122,209,240,255)); // 一个浅蓝纯色层

bgBlue.setPosition(-cc.winSize.width / 2, -cc.winSize.height / 2);

clipping_layer.addChild(bgBlue, 1); // clipping_layer上面加上浅蓝纯色层

this.addChild(clipping_layer, 10); // 把clipping_layer放到想要被遮住层的上面例如想要遮罩白色纯色层(也就是0层) 所以随便找个大于0的层放上但是一定要放到不想被遮罩的层的上面

// 最终效果:

假如Stencil所使用的.png图片是一个中间有一个的圆饼的图片,周围空白

当clipping_layer.setInverted(true)的时候结果周围空白显示clipping_layer的bgBlue,圆饼部分显示clipping_layer下面的bgWhite 也就是外蓝内白

当clipping_layer.setInverted(false)的时候结果周围空白显示clipping_layer的bgWhite,圆饼部分显示clipping_layer下面的bgBlue 也就是外白内蓝