写在前面：
mask就是PS中的遮罩；
遮罩层必须至少有两个图层，上面的一个图层为“遮罩层”，下面的称“被遮罩层”；这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。
一、CALayer mask属性实现颜色渐变的label
二、CALayer mask属性实现，刮刮卡效果
一、CALayer mask属性实现颜色渐变的label
封装一个UIView-GradientColorsLabel, 公开text(要显示的文字)、colorsArray(渐变颜色数组)属性；
GradientColorsLabel.h文件
@interface GradientColorsLabel : UIView
@property (nonatomic, copy) NSString *text;
@property (nonatomic, strong) NSMutableArray<UIColor*> *colorsArray;
@end
GradientColorsLabel.m文件
#import "GradientColorsLabel.h"
@interface GradientColorsLabel ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) UILabel *label;
@end
@implementation GradientColorsLabel
-(instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
//梯度图层 - 实现颜色渐变 - 被遮障层
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
_gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
[_gradientLayer setStartPoint:CGPointMake(0, 0)];
[_gradientLayer setEndPoint:CGPointMake(0, 1.0)];
[self.layer addSublayer:_gradientLayer];
//要显示的文字标签控件 - 遮障层
_label = [[UILabel alloc]initWithFrame:_gradientLayer.bounds];
_label.font = [UIFont systemFontOfSize:18.0];
_label.textAlignment = NSTextAlignmentCenter;
[self addSubview:_label];
//设置遮障层 - 实现蒙层
_gradientLayer.mask = _label.layer;
}
return self;
}
-(void)setText:(NSString *)text {
_text = text;
_label.text = text;
}
-(void)setColorsArray:(NSMutableArray<UIColor *> *)colorsArray {
_colorsArray = colorsArray;
NSMutableArray *newColors = [NSMutableArray array];
for (UIColor *color in colorsArray) {
[newColors addObject:(id)color.CGColor];
}
_gradientLayer.colors = newColors;
[_gradientLayer setNeedsDisplay];
}
@end
调用, 很简单:
#define Screen_width [UIScreen mainScreen].bounds.size.width
#define Screen_height [UIScreen mainScreen].bounds.size.height
//颜色渐变标签
CGFloat width = 300;
CGFloat height = 80;
GradientColorsLabel *gradientLabel = [[GradientColorsLabel alloc]initWithFrame:CGRectMake((Screen_width-width)/2, 100, width, height)];
gradientLabel.text = @"遮障层实现颜色渐变标签";
[self.view addSubview:gradientLabel];
二、CALayer mask属性实现，刮刮卡效果
封装了一个ScratchCardView, 公开image属性设置背景图片；reset重置方法；
用到了CAShapeLayer画图，设置路径path；
ScratchCardView.h文件
#import <UIKit/UIKit.h>
@interface ScratchCardView : UIView
@property (nonatomic, strong) UIImage *image;
-(void)reset;
@end
ScratchCardView.m文件
#import "ScratchCardView.h"
@interface ScratchCardView ()
@property (nonatomic, strong) CALayer *imageLayer;
@property (nonatomic, strong) CAShapeLayer *shapeLayer;
@property (nonatomic, assign) CGMutablePathRef path;
@property (nonatomic, assign, getter = isOpen) BOOL open;
@end
@implementation ScratchCardView
-(instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
//这是刮刮卡背景色
self.backgroundColor = [UIColor darkGrayColor];
//背景图片层 - 被遮障层
_imageLayer = [CALayer layer];
_imageLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
_imageLayer.frame = self.bounds;
[self.layer addSublayer:_imageLayer];
//遮障层
_shapeLayer = [CAShapeLayer layer];
_shapeLayer.lineWidth = 20.0;
_shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
_shapeLayer.fillColor = nil;
_shapeLayer.frame = self.bounds;
_shapeLayer.lineCap = kCALineCapRound;
_shapeLayer.lineJoin = kCALineJoinRound;
//设置遮障层
_imageLayer.mask = _shapeLayer;
//画图路径
self.path = CGPathCreateMutable();
}
return self;
}
//重置
-(void)reset {
if (_path) {
CGPathRelease(_path);
}
_imageLayer.mask = NULL;
_imageLayer.mask = _shapeLayer;
self.open = NO;
_path = CGPathCreateMutable();
_shapeLayer.path = _path;
}
//手势
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event];
if (!self.isOpen) {
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGPathMoveToPoint(self.path, NULL, point.x, point.y);
CGMutablePathRef path = CGPathCreateMutableCopy(self.path);
self.shapeLayer.path = path;
CGPathRelease(path);
}
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesMoved:touches withEvent:event];
if (!self.isOpen) {
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGPathAddLineToPoint(self.path, NULL, point.x, point.y);
CGMutablePathRef path = CGPathCreateMutableCopy(self.path);
self.shapeLayer.path = path;
CGPathRelease(path);
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesEnded:touches withEvent:event];
if (!self.isOpen) {
[self checkForOpen];
}
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesCancelled:touches withEvent:event];
if (!self.isOpen) {
[self checkForOpen];
}
}
//检查是否已刮开 逻辑-可以自定义
- (void)checkForOpen
{
CGRect rect = CGPathGetPathBoundingBox(self.path);
NSArray *pointsArray = [self getPointsArray];
for (NSValue *value in pointsArray) {
CGPoint point = [value CGPointValue];
if (!CGRectContainsPoint(rect, point)) {
return;
}
}
NSLog(@"完成");
self.open = YES;
self.imageLayer.mask = NULL;
}
- (NSArray *)getPointsArray
{
NSMutableArray *array = [NSMutableArray array];
CGFloat width = CGRectGetWidth(self.bounds);
CGFloat height = CGRectGetHeight(self.bounds);
CGPoint topPoint = CGPointMake(width/2, height/6);
CGPoint leftPoint = CGPointMake(width/6, height/2);
CGPoint bottomPoint = CGPointMake(width/2, height-height/6);
CGPoint rightPoint = CGPointMake(width-width/6, height/2);
[array addObject:[NSValue valueWithCGPoint:topPoint]];
[array addObject:[NSValue valueWithCGPoint:leftPoint]];
[array addObject:[NSValue valueWithCGPoint:bottomPoint]];
[array addObject:[NSValue valueWithCGPoint:rightPoint]];
return array;
}
//set方法
- (void)setImage:(UIImage *)image
{
_image = image;
self.imageLayer.contents = (id)image.CGImage;
}
@end
