当我们开发app的一些新功能的时候,经常会有需求,要求我们引导用户去使用这些新功能,类似于下面的这种效果:
大家注意看,”知道啦“,”全新任务上线了“,这些字体,我们的UI们都使用了艺术字体。这是必须的。由于屏幕适配,艺术字体被拉伸了也看不出来呀~
所以,大家就可以想到我们这张引导页,其实整体使用的就是一张图片。
敲重点!!! ”任务中心“,这里的镂空效果,就是我们接下来要详细讲解的部分。
两种方案:
方案一:我们可以在灰色背景的上层加一层白色的背景,在白色背景上再添加图片和文字,覆盖掉底层的图片和文字。
方案二:我们可以使用贝塞尔曲线来反向绘制一个镂空的部分,这是我们重点讲解的内容:
//绘制一个全屏的透明背景View
UIView *bgView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];
[self.view addSubview:bgView];
//贝塞尔曲线 画一个矩形
UIBezierPath *bpath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 375, 667)];
//bezierPathByReversingPath表示反向绘制
[bpath appendPath:[[UIBezierPath bezierPathWithRect:CGRectMake(10, 200, 100, 100)] bezierPathByReversingPath]];
//创建一个CAShapeLayer 图层,黑色半透明背景
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor;
shapeLayer.path = bpath.CGPath;
[bgView.layer addSublayer:shapeLayer];
//最后添加图片
UIImageView *imageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];
imageView.image=[UIImage imageNamed:@"image_1"];
[bgView addSubview:imageView];