The use of quartz2d drawing path and the realization of stripe effect in IOS development _ios

Drawing path

A. Brief description
When drawing a line, the method's interior defaults to creating a path. It put all the paths in the path.
1. Creating a path Cgmutablepathref calling this method is equivalent to creating a path that holds the drawing information.
2. Add the drawing information to the path.
The previous method was to add the location of the point to the CTX (graphics context information), CTX By default creates a path internally to hold the drawing information.
There is a storage space in the graphics context dedicated to storing the drawing information, in fact this space is cgmutablepathref.
3. Add the path to the context.
code example:
To draw a line of code:

Copy Code code as follows:

1. Get the graphics context
Cgcontextref Ctx=uigraphicsgetcurrentcontext ();
2. Drawing (Draw line)
Set Start point
Cgcontextmovetopoint (CTX, 20, 20);
Set End point
Cgcontextaddlinetopoint (CTX, 200, 300);
Rendering
Cgcontextstrokepath (CTX);

The above code is equivalent to the following code.

Copy Code code as follows:

1. Get the graphics context
Cgcontextref Ctx=uigraphicsgetcurrentcontext ();

2. Drawing
2.1 Path to create a straight line drawing
Note: Any value created through the quartz2d with the Creat/copy/retain method must be released
Cgmutablepathref path=cgpathcreatemutable ();
2.2 Add the drawing information to the path
Cgpathmovetopoint (Path, NULL, 20, 20);
Cgpathaddlinetopoint (Path, NULL, 200, 300);
2.3 Add the path to the context
To save drawing information in a drawing line to the graphics context
Cgcontextaddpath (CTX, path);

3. Rendering
Cgcontextstrokepath (CTX);

4. Release the two paths created earlier
The first of these methods
Cgpathrelease (path);
The second method
Cfrelease (path);
}

B. Benefits of using path directly:
The first code is poorly read and is not easily distinguishable. Using path, a path represents a route.
For example, if you want to draw more than one graphic in the context, it is recommended that you use path.
code example:

Copy Code code as follows:

-(void) DrawRect: (cgrect) rect
{
1. Get the graphics context
Cgcontextref Ctx=uigraphicsgetcurrentcontext ();

2. Drawing
2.a draw a straight line
2.a.1 create a path to a drawing
Note: Any value created through the quartz2d with the Creat/copy/retain method must be released
Cgmutablepathref path=cgpathcreatemutable ();

2.a.2 to add drawing information to the path
Cgpathmovetopoint (Path, NULL, 20, 20);
Cgpathaddlinetopoint (Path, NULL, 200, 300);

2.a.3 add a path to the context
To save drawing information in a drawing line to the graphics context
Cgcontextaddpath (CTX, path);


2.b Draw a circle
2.b.1 create a drawing path that draws a circle (note that this is mutable, not cgpathref)
Cgmutablepathref path1=cgpathcreatemutable ();

2.b.2 adds the drawing information of the circle to the path.
Cgpathaddellipseinrect (path1, NULL, CGRectMake (50, 50, 100, 100));

2.b.3 adds the path of the circle to the graphics context
Cgcontextaddpath (CTX, path1);


3. Rendering
Cgcontextstrokepath (CTX);

4. Release the two paths created earlier
The first of these methods
Cgpathrelease (path);
Cgpathrelease (path1);
The second method
Cfrelease (path);
}

Effect:

Tip: If you are drawing a line, create a path to hold the drawing information for the drawing line, and if you want to redraw a circle again, you can create a new path to specifically save the drawing information for the circle.
Attention:
All values created with the Creat/copy/retain method in quarzt2d must be manually released
There are two ways to free the path that you created earlier:
(1) cgpathrelease (path);
(2) cfrelease (path);
Description: Cfrelease belong to the lower cocafoundation frame

PS: Supplementary Knowledge Points:
some ways to draw a quadrilateral:
The first way: The quadrilateral is drawn by connecting the fixed points
The second way: Specify the starting point and the width and height of the draft quadrilateral
The Third Way: Merge the two steps in the second way into one step.
The Fourth Way (OC method): Draw a solid quadrilateral, note that there is no hollow method
Fifth: Draw the root line, set the width of the line (in this way you can draw oblique quadrilateral)
code example:

Copy Code code as follows:

//
yyview.m
06-quadrilateral five kinds of representations
//
Created by Apple on 14-6-11.
Copyright (c) 2014 itcase. All rights reserved.
//

#import "YYview.h"

@implementation Yyview

-(void) DrawRect: (cgrect) rect
{
Get Graphics context
Cgcontextref Ctx=uigraphicsgetcurrentcontext ();
The first way to draw a quadrilateral by connecting a fixed point
Cgcontextmovetopoint (CTX, 0, 20);
Cgcontextaddlinetopoint (< #CGContextRef c#> < #CGFloat x#> < #CGFloat y#>);
Cgcontextaddlinetopoint (< #CGContextRef c#> < #CGFloat x#> < #CGFloat y#>);
Cgcontextaddlinetopoint (< #CGContextRef c#> < #CGFloat x#> < #CGFloat y#>);

The second way: Specify the starting point and the width and height of the draft quadrilateral
Cgcontextaddrect (CTX, CGRectMake (20, 20, 200, 100));
Rendering
Cgcontextstrokepath (CTX);

The third way: two kinds of two-step merge into one step.
Draw a hollow quadrilateral
Cgcontextstrokerect (CTX, CGRectMake (20, 20, 200, 100));
Draw a solid quadrilateral
Cgcontextfillrect (CTX, CGRectMake (20, 20, 200, 100));

The Fourth Way (OC method): Draw a solid quadrilateral, note that there is no hollow method
Uirectfill (CGRectMake (20, 20, 200, 100));

The fifth way: Draw the root line, set the width of the line (in this way you can draw oblique quadrilateral)
Cgcontextmovetopoint (CTX, 20, 20);
Cgcontextaddlinetopoint (CTX, 100, 200);
Cgcontextsetlinewidth (CTX, 50);
Note that the line can only be drawn into a hollow
Cgcontextstrokepath (CTX);

}
@end

The fifth method can draw oblique quadrilateral.

Stationery stripes
First, leading procedures

Creating a new project, implementing the following lines of code in the master controller file, makes it easy to tile the picture in view.

Copy Code code as follows:

#import "YYViewController.h"

@interface Yyviewcontroller ()

@end

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

UIImage *image=[uiimage imagenamed:@ "Me"];
Uicolor *color=[uicolor Colorwithpatternimage:image];
Self.view.backgroundcolor=color;
}

@end

Effect:

Second, to achieve the effect of stationery stripes

Use this feature above to make a stationery effect.
There are no split lines on the default view, there are two ways to add a split line to the view:
(1) Let the art to do a special picture to do the background, the picture set as the background. Disadvantage: The length of the letter is uncertain, so the length of the background picture is difficult to determine.
(2) A small picture to create a color, tile to achieve the background effect.

Step one: Generate a small picture to be tiled later.
Draw a rectangle.
Draw a line.
Step two: Remove the picture from the context and set it to the background. Dark piece? (Other places when transparent, controller color, if not set then default to black)
Implementation code:

Copy Code code as follows:

//
Yyviewcontroller.m
01-Stationery Stripes
//
Created by Hole medical self on 14-6-11.
Copyright (c) 2014 itcast. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()

@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

1. Generate a small picture for tiling later
Cgsize size = Cgsizemake (self.view.frame.size.width, 35);
Uigraphicsbeginimagecontextwithoptions (size, NO, 0);

2. Draw a rectangle
Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
CGFloat height = 35;
Cgcontextaddrect (CTX, cgrectmake (0, 0, self.view.frame.size.width, height));
[[Uicolor Whitecolor] set];
Cgcontextfillpath (CTX);

3. Draw the Line

CGFloat linewidth = 2;
CGFloat Liney = height-linewidth;
CGFloat LineX = 0;
Cgcontextmovetopoint (CTX, LineX, Liney);
Cgcontextaddlinetopoint (CTX, Liney);
[[Uicolor Blackcolor] set];
Cgcontextstrokepath (CTX);


UIImage *image=uigraphicsgetimagefromcurrentimagecontext ();
Uicolor *color=[uicolor Colorwithpatternimage:image];
Self.view.backgroundcolor=color;
}

@end

Effect:

Third, the application scene

To complete a rudimentary e-book reader

Code:

Copy Code code as follows:

//
Yyviewcontroller.m
01-Stationery Stripes
//
Created by Hole medical self on 14-6-11.
Copyright (c) 2014 itcast. All rights reserved.
//

#import "YYViewController.h"

@interface Yyviewcontroller ()

@property (Weak, nonatomic) Iboutlet Uitextview *textview;
-(Ibaction) Perbtnclick: (UIButton *) sender;
-(Ibaction) Nextbtnclick: (UIButton *) sender;
@property (nonatomic,assign) int index;
@end

Copy Code code as follows:

@implementation Yyviewcontroller

-(void) viewdidload
{
[Super Viewdidload];

1. Generate a small picture for tiling later
Cgsize size = Cgsizemake (Self.view.frame.size.width, 26);
Uigraphicsbeginimagecontextwithoptions (size, NO, 0);

2. Draw a rectangle
Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
CGFloat height = 26;
Cgcontextaddrect (CTX, cgrectmake (0, 0, self.view.frame.size.width, height));
[[Uicolor Browncolor] set];
Cgcontextfillpath (CTX);

3. Draw the Line

CGFloat linewidth = 2;
CGFloat Liney = height-linewidth;
CGFloat LineX = 0;
Cgcontextmovetopoint (CTX, LineX, Liney);
Cgcontextaddlinetopoint (CTX, Liney);
[[Uicolor Blackcolor] set];
Cgcontextstrokepath (CTX);


UIImage *image=uigraphicsgetimagefromcurrentimagecontext ();
Uicolor *color=[uicolor Colorwithpatternimage:image];
Self.view.backgroundcolor=color;
Self.textview.backgroundcolor=color;
}

-(Ibaction) Perbtnclick: (UIButton *) Sender {
self.index--;
self.textview.text=[nsstring stringwithformat:@ "page%d", Self.index];
Catransition *CA = [[Catransition alloc] init];
Ca.type = @ "Pagecurl";

[Self.textview.layer ADDANIMATION:CA Forkey:nil];

}

-(Ibaction) Nextbtnclick: (UIButton *) Sender {
self.index++;
self.textview.text=[nsstring stringwithformat:@ "page%d", Self.index];
Catransition *CA = [[Catransition alloc] init];
Ca.type = @ "Pagecurl";

[Self.textview.layer ADDANIMATION:CA Forkey:nil];
}
@end

The layout of the interface in storyboard

Simple effect of implementation: