IOS-自定义锯齿形背景view，使用quartz2d

由于项目需要，UI设计了一个锯齿形状的背景图，程序开发效果如下图：

这用到了Quartz2D绘图，我的思路是，画两个如下图的锯齿view：

然后两个view稍微重合一点，就是下边的那个view网上移动，把上边的那个view的下锯齿覆盖掉，不过结果却是让人失望的，如下图：

最后，我在下边的view上重新画了上边view颜色的锯齿view，如下图：

然后再把下边的那个锯齿view往上移动，正好把上面的那个view的下锯齿覆盖掉，就达到最终的效果图了，如

具体代码如下：

SawtoothView.h头文件代码如下：

//  SawtoothView.h
//
//  Created by HailongHan on 15/1/2.
//  Copyright (c) 2015年 cubead. All rights reserved.
//

#import <UIKit/UIKit.h>

/**
 *  锯齿view
 */
@interface SawtoothView : UIView

/**
 *  设置波浪线背景颜色、波浪个数、波浪view的高度
 *
 *  @param color  颜色
 *  @param topColor 顶部颜色
 *  @param count  波浪个数
 *  @param height 波浪高度
 */
- (void)setColor:(UIColor *)color topColor:(UIColor *)topColor waveCount:(int)count waveHeight:(CGFloat)height;

@end

SawtoothView.m代码如下：

//
//  SawtoothView.m
//  easymarketing
//
//  Created by HailongHan on 15/1/2.
//  Copyright (c) 2015年 cubead. All rights reserved.
//

#import "SawtoothView.h"

@interface SawtoothView (){
    int waveCount;
    UIColor *bgColor;
    UIColor *viewTopColor;
    CGFloat viewHeight;
}

@end

@implementation SawtoothView

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

-(void)drawRect:(CGRect)rect{
#pragma mark - 第一步：获取上下文
    //获取绘图上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
#pragma mark - 第二步：构建路径
    if (waveCount <= 0) {
        waveCount = 30;//默认30个
    }
    
    //单个波浪线的宽度
    CGFloat itemWidth = kScreen_Width/waveCount;
    //单个波浪线的高度
    CGFloat itemHeight = 10;
    //整个view的大小
    if (viewHeight <= 0) {
        viewHeight = 50;//默认50大小
    }
    
    //背景色
    if (bgColor == nil) {
        bgColor = [UIColor blackColor];
    }
    
    if (viewTopColor == nil) {
        viewTopColor = [UIColor orangeColor];
    }
    
    //移动到起始点,从左上画到右上
    CGContextMoveToPoint(ctx, 0, itemHeight);
    for (int i = 0; i<waveCount; i++) {
        int nextX = (i+1)*itemWidth;

        CGContextAddLineToPoint(ctx, nextX - itemWidth*0.5, 0);
        CGContextAddLineToPoint(ctx, nextX, itemHeight);
    }
    
    //右上移动到右下角
    CGContextAddLineToPoint(ctx, kScreen_Width, viewHeight - itemHeight);
    
    //右下角画到左下角
    for(int i = waveCount+1;i > 0;i--){
        int preX = (i-1)*itemWidth;
        CGContextAddLineToPoint(ctx, preX - itemWidth*0.5, viewHeight);
        CGContextAddLineToPoint(ctx, preX - itemWidth, viewHeight - itemHeight);
    }
    
#pragma mark - 第三步：将路径画到view上
//    CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
    CGContextSetFillColorWithColor(ctx, bgColor.CGColor);
    CGContextFillPath(ctx);
    
    
    //开始画顶部的填充图
    CGContextMoveToPoint(ctx, 0, itemHeight);
    for (int i = 0 ; i<waveCount; i++) {
        int nextX = (i+1)*itemWidth;
        CGContextAddLineToPoint(ctx, nextX - itemWidth*0.5, 0);
        CGContextAddLineToPoint(ctx, nextX, itemHeight);
    }
    CGContextSetFillColorWithColor(ctx, viewTopColor.CGColor);
    CGContextAddLineToPoint(ctx, kScreen_Width, 0);
    CGContextAddLineToPoint(ctx, 0, 0);
    CGContextFillPath(ctx);
}

/**
 *  设置波浪线背景颜色、波浪个数、波浪view的高度
 *
 *  @param color  颜色
 *  @param topColor 顶部颜色
 *  @param count  波浪个数
 *  @param height 波浪高度
 */
-(void)setColor:(UIColor *)color topColor:(UIColor *)topColor waveCount:(int)count waveHeight:(CGFloat)height{
    bgColor = color;
    waveCount = count;
    viewHeight = height;
    viewTopColor = topColor;
    
    [self setNeedsDisplay];
}

@end

最后在ViewController中调用代码：

//添加锯齿View
    SawtoothView *sawtoothView1 = [SawtoothView new];
    sawtoothView1.frame = CGRectMake(0, CGRectGetMaxY(titleLabel.frame) +10, kScreen_Width, 100);
    [sawtoothView1 setColor:[UIColor warmGrayColor] topColor:[UIColor clearColor] waveCount:30 waveHeight:100];
    [self.view addSubview:sawtoothView1];
    
    SawtoothView *sawtoothView2 = [SawtoothView new];
    sawtoothView2.frame = CGRectMake(0, CGRectGetMaxY(sawtoothView1.frame)-10, kScreen_Width, 200);
    [sawtoothView2 setColor:[UIColor orangeColor] topColor:[UIColor clearColor] waveCount:30 waveHeight:100];
    [self.view addSubview:sawtoothView2];

需要注意的是：SawtoothView2的frame的y的值为SawtoothView1的frame最大y值-10，这个10是锯齿的高度，覆盖掉就OK了