项目中很多地方会用到类似于微信那样带三角的菜单栏，之前项目的实现方式都是让设计切一个带三角的图片当背景图。最近想着用代码实现一下，就用贝塞尔曲线UIBezierPath和CAShapeLayer相结合画了一下。
以下是实现的效果图：
仿微信三角菜单
之前也在网上搜了一些实现方法，有的是利用上下文裁剪图片的方式裁剪出一个三角，如果不想添加图片也可以直接用颜色生成一个图片，比如：
_imageView.image = [UIImage imageWithColor:[UIColor blueColor]];
这种方式可以裁剪出一个带三角的图片，但是想添加边框和阴影却比较麻烦（有实现的希望不吝赐教）。后来想着直接在视图上画一个layer添加到视图的layer，然后设置边框和阴影，毕竟视图设置阴影就是在layer上设置的。后来就实现了一下，大致的思路是：
- 先用贝塞尔曲线
UIBezierPath绘制出要裁剪部位的三角形的路径和直角裁剪度数； - 然后创建一个
CAShapeLayer对象，设置其线宽lineWidth、填充色fillColor以及线的颜色strokeColor； - 然后设置阴影颜色、阴影方向以及阴影宽度等参数。然后将
UIBezierPath和CAShapeLayer建立关系，让后者在前者提供的路径中进行渲染； - 最后将创建的
CAShapeLayer对象添加到视图的layer上即可。
层级图
直接上代码：
#define kArrowWidth 10 ///< 尖角宽度
#define kArrowHeight 6 ///< 尖角高度
#define kArrowMarginLeftWidth 110 ///< 尖角距离左边距离
#define kCurrentScreenWidth 122 ///< 总宽度
#define kCurrentScreenHeight 94 ///< 总高度
// 裁剪尖角
- (void)cuttingAngleWithSubview:(UIView *)subview {
// 贝塞尔曲线
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, kArrowHeight, kCurrentScreenWidth, kCurrentScreenHeight - kArrowHeight) cornerRadius:4];
// 绘制路径
[path addLineToPoint:CGPointMake(kArrowMarginLeftWidth + kArrowWidth * 0.5, kArrowHeight)];
[path addLineToPoint:CGPointMake(kArrowMarginLeftWidth, 0)];
[path addLineToPoint:CGPointMake(kArrowMarginLeftWidth - kArrowWidth * 0.5, kArrowHeight)];
[path closePath];
// CAShapeLayer
CAShapeLayer *shaLayer = [CAShapeLayer layer];
// 线宽
shaLayer.lineWidth = 1.0f;
// 填充颜色
shaLayer.fillColor = [UIColor darkGrayColor].CGColor;
// 线的颜色
shaLayer.strokeColor = [[UIColor darkGrayColor] colorWithAlphaComponent:0.1f].CGColor;
// 加阴影
shaLayer.shadowColor = [[UIColor blackColor] colorWithAlphaComponent:0.1].CGColor;
// 设置偏移量为0,四周都有阴影
shaLayer.shadowOffset = CGSizeZero;
// 透明度
shaLayer.shadowOpacity = 1.0f;
// 阴影宽度
shaLayer.shadowRadius = 4.f;
// 建立关联，并渲染路径
shaLayer.path = path.CGPath;
[subview.layer addSublayer:shaLayer];
}
有更好的实现方式希望不吝赐教，欢迎指正交流，相互学习～
