cocos creator学习（六）组件Mask（超出部分隐藏）

组件

使用mask的地方只需要两个组件：自带的Node和渲染组件里的Mask

使用组件

首先要有一个使用mask组件的图层，设置好宽高。他下面有张图片。层级结构如图：

mask_exam的暂定为宽高都是300（没有宽高看不到效果），然后我们给他加一个mask组件（在渲染组件里，点击添加组件按钮就能找到了），mask_exam组件详情如图：

这样我们就会发现500x300的图片，300x300外的部分已经看不到了：

分类

mask分别有三种类型的遮罩，分别是RECT矩形、ELLIPSE圆形和IMAGE_STENCIL图片模板

RECT矩形

默认的类型，以上面的例子来说，就是300x300的矩形为边界，默认超出部分隐藏，如上图；
如果勾选上Inverted，则300x300外面的部分显示，里面的部分隐藏，如下图：

ELLIPSE圆形/多边形

和矩形大体相同，就是遮罩部分是圆，同样有反选Inverted的功能，效果和rect的相同

有一个他自己的功能挺有意思，就是Segements椭圆遮罩的曲线细分数，换句话说就是多边形，默认为64，最小为3，最大为10000，写几就是几边形，64就是圆了，目测64和10000无肉眼可见的差别。

组件详情如图：

下图分别是Segements为3和64的效果：

IMAGE_STENCIL自定义（图片模板）

和上面两个有同样的反选Inverted功能

接下来我们先往他的Sprite Frame里面拽过去一张图片（最好是旁边有透明区域的png图片，要不然看不到效果）

组件详情如图：

然后随便调一下上面的Alpha Threshold，让他不为0，就能看到效果了，如图（旁边的人就是拽进去当图片模板的11，放上用来对比的）：

我们会发现小人拽进去之后被压缩成了300x300的图片，且只有小人存在的位置，青蛙才会出现，调整Alpha Threshold，小人的显示有一些细微的差别，主要是边缘。

如果想让小人正常显示，有两个办法：
1、将mask组件所在的节点大小改成图片模板（小人）的大小
2、点击mask组件右下方的Resize to Target按钮，组件大小会自动变成图片模板的大小

js里改变mask大小

声明绑定之前的学习记录里都有，这里就不多做赘述了

如果声明绑定的是一个节点（node），就可以直接写，如下方代码就是改变他的宽度

this.mask_exam.width = "500";

如果声明绑定的不是节点类型，需要转换成节点再写：

this.mask_exam.node.width = "500";

这种方法可以和定时器一起，用在逐行显示文字的时候

---

cocos笔记链接：
cocos creator学习（一）页面+动画
cocos creator学习（二）js绑定动画
cocos creator学习（三）预制节点
cocos creator学习（四）全局变量+类之间的函数调用
cocos creator学习（五）定时器
cocos creator学习（六）组件Mask（超出部分隐藏）
cocos creator学习（七）音乐
cocos creator学习（八）自动图集+构建发布h5
cocos creator学习（九）构建后更改图片和层级设置
cocos creator学习（十）cocos自带扩展插件-压缩