码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-01-03 09:25:56      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:ios   quartz2d   锯齿形状   2d绘图   

由于项目需要,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了

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

标签:ios   quartz2d   锯齿形状   2d绘图   

原文地址:http://blog.csdn.net/hanhailong726188/article/details/42345433

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!