iOS Basics (20)--uibezierpath drawing

The Uibezierpath class can create vector-based paths that define simple shapes, such as ellipses or rectangles, or shapes that consist of multiple lines and curved segments.

First, Uibezierpath use:

1, create path;

2, add paths to path;

3, the path is drawn out;

1 //Create Path2Path =[Uibezierpath Bezierpath];3     //Add Path4[Path moveToPoint: (Cgpoint) {Ten, -}];5[Path Addlinetopoint: (Cgpoint) { -, -}];6     //draw the path out7 [path stroke];8     

Second, examples

1. Drawing polygons

Note: This class inherits from UIView.

1 #import "Draw.h"2 3 @interfaceDraw () {4     5Uibezierpath *path;6 7 }8 9 @endTen  One- (void) DrawRect: (cgrect) rect { A      -     //Line Color -Uicolor *color =[Uicolor Orangecolor]; the[ColorSet]; -      -     //Create Path -Path =[Uibezierpath Bezierpath]; +     //Set line width -Path.linewidth =3; +     //Line Corners APath.linecapstyle =Kcglinecapround; at     //Endpoint Processing -Path.linejoinstyle =Kcglinejoinround; -  -[Path moveToPoint: (Cgpoint) { -, -}]; -[Path Addlinetopoint: (Cgpoint) { $, -}]; -[Path Addlinetopoint: (Cgpoint) { -, Max}]; in[Path Addlinetopoint: (Cgpoint) { $, $}]; -[Path Addlinetopoint: (Cgpoint) { -, $}]; to[Path Addlinetopoint: (Cgpoint) { -, Max}]; + [path Closepath]; -     //Connect by Coordinate point the      * [path stroke]; $     Panax Notoginseng}

If you modify the last line of code, change [path stroke] to [path fill];

below to see the difference,

2. Draw a rectangle

+ (Uibezierpath *) Bezierpathwithrect: (cgrect) rect;

1- (void) DrawRect: (cgrect) rect {2     3     //Line Color4Uicolor *color =[Uicolor Orangecolor];5[ColorSet];6     7     //Create Path8     //rect four values are (x, y, rectangle length, rectangle width)9Path = [Uibezierpath bezierpathwithrect: (cgrect) {Ten, -, -, -}];Ten     //Set line width OnePath.linewidth =3; A     //Line Corners -Path.linecapstyle =Kcglinecapround; -     //Endpoint Processing thePath.linejoinstyle =Kcglinejoinround; -      -     //Connect by Coordinate point - [path stroke]; +      -}

3. Draw round or oval

Draw round or oval, we'll use

+ (Uibezierpath *) Bezierpathwithovalinrect: (cgrect) rect;

This method draws an inner tangent curve based on the incoming rect rectangle parameter. When the incoming rect is a square, the drawn image is a inscribed circle; When the incoming rect is a rectangle, the drawn image is an inner-tangent ellipse.

1- (void) DrawRect: (cgrect) rect {2     3     //Line Color4Uicolor *color =[Uicolor Orangecolor];5[ColorSet];6     7     //Add Path8Path = [Uibezierpath bezierpathwithovalinrect: (cgrect) { -, -, -, -}];9Path.linewidth =3;Ten     //Line Corners OnePath.linecapstyle =Kcglinecapround; A     //Endpoint Processing -Path.linejoinstyle =Kcglinejoinround; -     //Connect by Coordinate point the [path stroke]; -      -}

The following changes the RECT value,

Path = [Uibezierpath bezierpathwithovalinrect: (cgrect) {50,50,100,50}];

4. Drawing arcs

How to draw an arc:

+ (Uibezierpath *) Bezierpathwitharccenter: (cgpoint) Center

Radius: (cgfloat) Radius

StartAngle: (cgfloat) startangle

Endangle: (cgfloat) Endangle

Clockwise: (BOOL) clockwise;

Where Center: The centre of the arc;

Radius: radius;

StartAngle: Starting angle;

Endangle: End Angle;

Clockwise: whether clockwise direction;

#import "Draw.h"//define PI Values#definePI 3.14159265359@interfaceDraw () {Uibezierpath*path;}- (void) DrawRect: (cgrect) rect {//Line ColorUicolor *color =[Uicolor Orangecolor]; [ColorSet]; //Add PathPath = [Uibezierpath bezierpathwitharccenter: (cgpoint) { -, -} radius: -startangle:0Endangle:pi*0.5Clockwise:yes]; Path.linewidth=3; //Line CornersPath.linecapstyle =Kcglinecapround; //Endpoint ProcessingPath.linejoinstyle =Kcglinejoinround; //Connect by Coordinate point[path stroke]; }

5, two Bezier curves and three Bezier plots

The curve segment starts at the current point, ends at the specified point, the shape of the curve has a start point, an end point, and a tangent definition for one or more control points.

Shows the similarity of the two curve types, as well as the relationship between the control point and the curve shape.

(1) Plot two Bezier curves

Method:-(void) Addquadcurvetopoint: (cgpoint) endPoint controlpoint: (cgpoint) ControlPoint;

1- (void) DrawRect: (cgrect) rect {2     3     //Line Color4Uicolor *color =[Uicolor Orangecolor];5[ColorSet];6     7     //Add Path8Path =[Uibezierpath Bezierpath];9             TenPath.linewidth =3; One     //Line Corners APath.linecapstyle =Kcglinecapround; -     //Endpoint Processing -Path.linejoinstyle =Kcglinejoinround; the                            -[Path moveToPoint: (Cgpoint) { -, -}]; -[Path Addquadcurvetopoint: (Cgpoint) { -, -} controlpoint: (Cgpoint) { -, -}]; -      +     //Connect by Coordinate point - [path stroke]; +      A}

(2) plot three Bezier curves

Method:-(void) Addcurvetopoint: (cgpoint) endPoint controlPoint1: (cgpoint) controlPoint1 ControlPoint2: (cgpoint) ControlPoint2;

1- (void) DrawRect: (cgrect) rect {2     3     //Line Color4Uicolor *color =[Uicolor Orangecolor];5[ColorSet];6     7     //Add Path8Path =[Uibezierpath Bezierpath];9             TenPath.linewidth =3; One     //Line Corners APath.linecapstyle =Kcglinecapround; -     //Endpoint Processing -Path.linejoinstyle =Kcglinejoinround; the                            -[Path moveToPoint: (Cgpoint) { -, -}]; -[Path Addcurvetopoint: (Cgpoint) { Max, -} controlPoint1: (Cgpoint) { -, -} ControlPoint2: (Cgpoint) { the, -}]; -      +     //Connect by Coordinate point - [path stroke]; +      A}

iOS Basics (20)--uibezierpath drawing