IOS-custom sawing background view with quartz2d

IOS-custom sawing background view with quartz2d

As required by the project, uihas designed a jagged background image. The effects of program development are as follows:

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + fingerprint + pgltzybzcm9 "http://www.2cto.com/uploadfile/Collfiles/20150104/20150104091147176.jpg" alt = "\">

Then the two views overlap a little bit, that is, the view on the bottom moves on the Internet and overwrites the lower sawtooth of the view on the top, but the result is disappointing, for example:

At last, I re-draw the jagged view of the above view color on the view below, for example:

Then, move the Sawtooth view at the bottom up, and overwrite the Sawtooth of the view above to achieve the final result, as shown in figure

The Code is as follows:

The header code of SawtoothView. h is as follows:

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

# Import

/**
* Sawtooth view
*/
@ Interface SawtoothView: UIView

/**
* Set the background color, number of waves, and height of the wave view.
*
* @ Param color
* @ Param topColor top color
* @ Param count the number of waves
* @ Param height wave height
*/
-(Void) setColor :( UIColor *) color topColor :( UIColor *) topColor waveCount :( int) count waveHeight :( CGFloat) height;

@ End

The SawtoothView. m code is as follows:

//
// 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-Step 1: Get Context
// Obtain the drawing Context
CGContextRef ctx = UIGraphicsGetCurrentContext ();

# Pragma mark-Step 2: Build path
If (waveCount <= 0 ){
WaveCount = 30; // 30 by default
}

// The width of a single wavy line
CGFloat itemWidth = kScreen_Width/waveCount;
// The height of a single wavy line
CGFloat itemHeight = 10;
// Size of the entire view
If (viewHeight <= 0 ){
ViewHeight = 50; // The default value is 50.
}

// Background color
If (bgColor = nil ){
BgColor = [UIColor blackColor];
}

If (viewTopColor = nil ){
ViewTopColor = [UIColor orangeColor];
}

// Move to the starting point, from top left to top right
CGContextMoveToPoint (ctx, 0, itemHeight );
For (int I = 0; I Int nextX = (I + 1) * itemWidth;

CGContextAddLineToPoint (ctx, nextX-itemWidth * 0.5, 0 );
CGContextAddLineToPoint (ctx, nextX, itemHeight );
}

// Move the upper right corner to the lower right corner
CGContextAddLineToPoint (ctx, kScreen_Width, viewHeight-itemHeight );

// Draw from the lower right corner to the lower left corner
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-Step 3: Draw the path to the view
// CGContextSetRGBFillColor (ctx, 1, 0, 0, 1 );
CGContextSetFillColorWithColor (ctx, bgColor. CGColor );
CGContextFillPath (ctx );


// Start to draw the filling chart at the top.
CGContextMoveToPoint (ctx, 0, itemHeight );
For (int I = 0; 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 );
}

/**
* Set the background color, number of waves, and height of the wave view.
*
* @ Param color
* @ Param topColor top color
* @ Param count the number of waves
* @ Param height wave 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

Finally, call the code in ViewController:

// Add a sawtooth View
SawtoothView * sawtoothView1 = [SawtoothView new];
Safety toothview1.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];

Note that the y value of the frame of SawtoothView2 is the maximum y value of the frame of SawtoothView1-10, which is the height of the Sawtooth. If it is overwritten, it will be OK.