最近有个需求，是仿照微信公众号做一个界面，里面有一个弹出菜单。这次我选择自己绘制弹出菜单，而不是让UI切图。

菜单样式.png

直接上代码

    // 初始化遮罩
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.strokeColor =  [UIColor blueColor].CGColor; //kColorWithRGB(221, 222, 223).CGColor;
    maskLayer.lineWidth = 1;
    // 设置遮罩
    [self.layer setMask:maskLayer];
    // 初始化路径
    UIBezierPath *borderPath = [UIBezierPath bezierPath];
    // 遮罩层frame
    maskLayer.frame = CGRectMake(0, 0, width, height);
    // 设置path起点
    [borderPath moveToPoint:CGPointMake(10 * kScale, 0)];
    // 直线，到右上角
    [borderPath addLineToPoint:CGPointMake(width - 10 * kScale, 0)];
    // 右上角的圆角
    [borderPath addQuadCurveToPoint:CGPointMake(width, 10 * kScale) controlPoint:CGPointMake(width, 0)];
    // 直线，到右下角
    [borderPath addLineToPoint:CGPointMake(width, height - 30 * kScale)];
    // 右下角的圆角
    [borderPath addQuadCurveToPoint:CGPointMake(width - 10 * kScale, height - 20 * kScale) controlPoint:CGPointMake(width, height - 20 * kScale)];
    // 直线，到三角的右点起点
    [borderPath addLineToPoint:CGPointMake(width / 2 + 15 * kScale, height - 20 * kScale)];
    // 直线，到三角的下顶点
    [borderPath addLineToPoint:CGPointMake(width / 2, height)];
    // 直线，到三角的左点终点
    [borderPath addLineToPoint:CGPointMake(width / 2 - 15 * kScale, height - 20 * kScale)];
    // 直线，到左下角
    [borderPath addLineToPoint:CGPointMake(10 * kScale, height - 20 * kScale)];
    // 左下角的圆角
    [borderPath addQuadCurveToPoint:CGPointMake(0, height - 30 * kScale) controlPoint:CGPointMake(0, height - 20 * kScale)];
    // 直线，到左上角
    [borderPath addLineToPoint:CGPointMake(0, 10 * kScale)];
    // 左上角的圆角
    [borderPath addQuadCurveToPoint:CGPointMake(10 * kScale, 0) controlPoint:CGPointMake(0, 0)];
    // 将这个path赋值给maskLayer的path
    maskLayer.path = borderPath.CGPath;