IOS Uibezierpath Simple and practical

1. Introduction

Uibezierpath this class, in Uikit, is a package of the core graphics framework about path that can be used to define simple shapes, such as those we commonly use, rectangles, circles, ellipses, arcs, or irregular polygons.

The end of each line segment or curve segment is where the next begins. Each connected line or set of curved segments becomes subpath. A Uibezierpath object defines a complete path that includes one or more subpaths.

We generally use uibezierpath as a way to rewrite the view's DrawRect method. We use a straight line to create a rectangle or polygon, using curves to create arcs or circles.

Steps to use:

1, rewrite the view of the DrawRect method

2. Create Uibezierpath objects

3. How to use moveToPoint: Set the initial point

4, according to the specific requirements of the use of Uibezierpath class method drawing (such as to draw lines, rectangles, circles, arcs?) such as

5, set Uibezierpath object related properties (such as LineWidth, Linejoinstyle, Apath.linecapstyle, color)

6. End the drawing using the stroke or Fill method

Before we introduce other usage methods, let's take a look at several properties of path so that I can set it up below.

1, [color set]; Set the line color, which is equivalent to the brush color

2, path.linewidth = 5.0; This is a good understanding, the width of the dash

3, Path.linecapstyle the beginning of this segment is the end of the style, this style has three kinds:

（

1, Kcglinecapbutt the attribute value specifies that the end point is not drawn, and the line ends directly at the ends. This is the default value.

2. Kcglinecapround This property value specifies the circle end of the drawing, and a semicircle with a diameter of line width at the end of the line.

3. Kcglinecapsquare This property value specifies the square end of the drawing. At the end of the line, draw a square half the length of the line width. It is important to note that the endpoints of this shape are very similar to the endpoints of the "butt" shape, except that the lines with this form of endpoints are slightly longer.

）

4, Path.linejoinstyle This property is used to set the two line connection point style, also it has three styles for us to choose

(

1, Kcglinejoinmiter Oblique connection

2, Kcglinejoinround smooth convergence

3. Kcglinejoinbevel Bevel Connection

）

5, [path stroke]; A stroke gets a non-filled view, [path fill]; Fill the interior of the view with fill, which can be seen in the following code, as well as in the drawing of the resulting picture, to understand the difference between the two.

2. Some simple-to-use code

(1) Straight line

-(void) DrawView1 {

Uicolor *color = [Uicolor Redcolor];

[Color set]; Set Line Color

Uibezierpath *mypath = [Uibezierpath Bezierpath];

[MyPath Movetopoint:cgpointmake (200, 50)];

[MyPath Addlinetopoint:cgpointmake (300, 100)];

Mypath.linewidth = 5.0;

Mypath.linecapstyle = Kcglinecapround; Line Corners

Mypath.linejoinstyle = Kcglinejoinround; Endpoint Processing

[MyPath stroke];

}

(2) Polygon

-(void) DrawView2 {

Uicolor *color = [Uicolor Redcolor];

[Color set]; Set Line Color

Uibezierpath *mypath = [Uibezierpath Bezierpath];

[MyPath Movetopoint:cgpointmake (200, 50)];

[MyPath Addlinetopoint:cgpointmake (300, 100)];

[MyPath Addlinetopoint:cgpointmake (260, 200)];

[MyPath addlinetopoint:cgpointmake (100, 200)];

[MyPath addlinetopoint:cgpointmake (100, 70)];

[MyPath Closepath];

Mypath.linewidth = 5.0;

Mypath.linecapstyle = Kcglinecapround; Line Corners

Mypath.linejoinstyle = Kcglinejoinround; Endpoint Processing

[MyPath fill];//Color Fill

[MyPath stroke]; Internal colorless

The Closepath method not only ends a shape's subpath representation, it also draws a line segment between the last point and the first point, a convenient way for us not to draw the last line.

}

(3) rectangular squares and some special

-(void) DRAWVIEW3 {

Uicolor *color = [Uicolor Redcolor];

[Color set];

Uibezierpath *path = [Uibezierpath bezierpathwithrect:cgrectmake (10, 10, 100, 100)];

A rectangle with radians

Uibezierpath *path = [Uibezierpath bezierpathwithroundedrect:cgrectmake (+, +, +) cornerradius:10];

Partially rounded corners

Uibezierpath *path =[uibezierpath Bezierpathwithroundedrect:cgrectmake (25, 45, 90, 90)

Byroundingcorners:uirectcornertopleft | Uirectcornerbottomleft

Cornerradii:cgsizemake (10, 10)];

Path.linewidth = 5.0;

Path.linecapstyle = Kcglinecapround; Line Corners

Path.linejoinstyle = Kcglinejoinround; Endpoint Processing

[Path stroke];

}

(4) Oval Circle + (Uibezierpath *) Bezierpathwithovalinrect: (cgrect) rect

-(void) DrawView4 {

Uicolor *color = [Uicolor Redcolor];

[Color set];

Uibezierpath *path = [Uibezierpath bezierpathwithovalinrect:cgrectmake (10, 10, 100, 80)];

Path.linewidth = 5.0;

Path.linecapstyle = Kcglinecapround;

Path.linejoinstyle = Kcglinejoinround;

[Path stroke];

}

(5) Arc + (Uibezierpath *) Bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius startangle: (cgfloat) StartAngle Endangle: (cgfloat) Endangle clockwise: (BOOL) Clockwis

/*

Arccenter: Origin

Radius: Radius

StartAngle: Starting angle

Endangle: End angle Radian System x axis Square is 0 round 2*3.14

Clockwise: whether clockwise direction/

*/

-(void) DrawView5 {

Uicolor *color = [Uicolor Redcolor];

[Color set];

Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:cgpointmake (+) radius:90 startangle:0 EndAngle:D Egrees_to_radians (Clockwise:yes)];

Path.linewidth = 5.0;

Path.linecapstyle = Kcglinecapround;

Path.linejoinstyle = Kcglinejoinround;

[Path stroke];

}

(6) Two-stage Bezier curve-(void) Addquadcurvetopoint: (cgpoint) endPoint controlpoint: (cgpoint) ControlPoint

This method plots two Bezier curves. The curve segment starts at the current point, ends at the specified point,

/*

Endpoint Endpoint ControlPoint Tangent point of intersection of two curves

*/

-(void) DrawView6 {

Uicolor *color = [Uicolor Redcolor];

[Color set];

Uibezierpath *path = [Uibezierpath Bezierpath];

Path.linewidth = 5.0;

Path.linecapstyle = Kcglinecapround;

Path.linejoinstyle = Kcglinejoinround;

[Path Movetopoint:cgpointmake (40, 150)];

[Path Addquadcurvetopoint:cgpointmake (+) Controlpoint:cgpointmake (120, 40)];

[Path stroke];

}

(7) plot three Bezier curves-(void) Addcurvetopoint: (cgpoint) endPoint controlPoint1: (cgpoint) controlPoint1 ControlPoint2: (cgpoint ) ControlPoint2

This method plots three Bezier curves. The curve segment starts at the current point, ends at the specified point, and the tangent definition of the two control points

/*

EndPoint end point ControlPoint1 line and arc tangent controlPoint2 line and arc tangent to the endpoint

*/

-(void) DrawView7 {

Uicolor *color = [Uicolor Redcolor];

[Color set];

Uibezierpath *path = [Uibezierpath Bezierpath];

Path.linewidth = 5.0;

Path.linecapstyle = Kcglinecapround;

Path.linejoinstyle = Kcglinejoinround;

[Path Movetopoint:cgpointmake (40, 150)];

[Path Addcurvetopoint:cgpointmake (260, 200)

Controlpoint1:cgpointmake (140, 0)

Controlpoint2:cgpointmake (140, 400)];;

[Path stroke];

}

IOS Uibezierpath Simple and practical