Basic usage of Bezier curves

Use the UIBezierPath ability to create vector-based paths, which are the Core Graphics framework's encapsulation of paths. Use this class to define simple shapes, such as ellipses, rectangles, or shapes that have multiple lines and curved segments.

UIBezierPathis CGPathRef the encapsulation of the data type. If the path is based on a vector shape, it is created with straight lines and curves. We use straight segments to create rectangles and polygons, using curves to create arcs, circles, or other complex curve shapes.

1. Use the UIBezierPath paint steps:

2. Create an UIBezierPath object

3. Call -moveToPoint: to set the starting point of the initial segment

4. Add lines or curves to define one or more sub-paths

5. Change UIBezierPath The properties of the object associated with the drawing. For example, we can set the brush properties, fill style, etc.

UIBezierPathIntroduction to Creating methods

1. UIBezierPath classes provide a way to create these, which are factory methods that can be used directly.

+ (Instancetype)bezierpath;+ (Instancetype)Bezierpathwithrect:(CGRect) rect;+ (Instancetype)Bezierpathwithovalinrect: (CGRect) rect;+ (instancetype) bezierpathwithroundedrect: (cgrect) Rect Cornerradius: (CGFloat) cornerradius;+ (instancetype)  Bezierpathwithroundedrect: (cgrect) rect byroundingcorners: (uirectcorner) Corners Cornerradii: (cgsize) cornerradii;+ (instancetype) bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius StartAngle: (cgfloat) startangle endangle: (cgfloat) Endangle clockwise: (BOOL) clockwise;+ ( Instancetype) bezierpathwithcgpath:            

2. Let's describe its purpose one by one.

　+ (instancetype)bezierPath;

This use is more, because this factory method creates the object, we can according to our needs arbitrarily custom style, can draw any shape which we want to draw.

　+ (instancetype)bezierPathWithRect:(CGRect)rect;

This factory method draws a Bezier curve based on a rectangle.

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

This factory method draws an inner tangent curve according to a rectangle. It is usually used to draw circles or ellipses.

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect                            cornerRadius:(CGFloat)cornerRadius;+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
The first factory method is to draw a rectangle, but the rectangle can be drawn with rounded corners. The first parameter is a rectangle, and the second parameter is the fillet size.
The second factory method function is the same, but you can specify a corner to draw a fillet. Like this, we can easily UIView add rounded corners to the extension.

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center                                  radius:(CGFloat)radius                              startAngle:(CGFloat)startAngle                                endAngle:(CGFloat)endAngle                               clockwise:(BOOL)clockwise;
This factory method is used to draw arcs, the parameters are described as follows:
center: Coordinates of the ARC center point
radius: Radius of circle in which the arc is located
startAngle: The angle value at which the arc starts
endAngle: Angle value for arc end
clockwise: Whether to draw an arc clockwise

-(void)drawRect:(CGRect)rectmethod is called in the

Draw a triangle

#pragma mark--------Draw a triangle
-(void) Drawtrianglepath {
 
Uibezierpath *path = [Uibezierpath Bezierpath];
[Path Movetopoint:cgpointmake (20, 20)];
[Path Addlinetopoint:cgpointmake (self.frame.size.width-40, 20)];
[Path Addlinetopoint:cgpointmake (SELF.FRAME.SIZE.WIDTH/2, self.frame.size.height-20)];

The last closed line can be generated automatically by calling the Closepath method, or you can call the-addlinetopoint: method to add
[Path Addlinetopoint:cgpointmake (20, 20)];

[Path Closepath];

Set line width
Path.linewidth = 1.5;

Set fill color, inner fill color of triangle
Uicolor *fillcolor = [Uicolor Greencolor];
[FillColor set];
[Path fill];

Set Brush color
Uicolor *strokecolor = [Uicolor Bluecolor];
[Strokecolor set];

According to the various points we set
[Path stroke];
}

Draw a rectangle

 #pragma mark--------Draw Rectangle 
-(void) Drawrectpath { 
     Uibezierpath *path = [Uibezierpath bezierpathwithrect:cgrectmake (self.frame.size.width -self.frame.size.height-300)]; 
      
     path.linewidth = 1.5; 
     Path.linecapstyle = Kcglinecapround; 
     path.linejoinstyle = kcglinejoinbevel; 
      
    /Set Fill color 
     uicolor *fillcolor = [Uicolor greencolor ]; 
     [FillColor set]; 
     [path fill]; 
      
    /Set brush color 
     uicolor *strokecolor = [Uicolor Bluecolor]; 
     [Strokecolor set]; 
      
    //According to the various points we set up 
     [path stroke]; 
} The 
  Linecapstyle  property is used to set the style of a line corner cap, with three choices: 
  

typedef CF_ENUM(int32_t, CGLineCap) {    kCGLineCapButt,    kCGLineCapRound, kCGLineCapSquare};

Where the first one is the default, the second is a slight fillet, and the third square.

lineJoinStyleproperty is the style used to set the two-line link point, which also has three choices:

typedef CF_ENUM(int32_t, CGLineJoin) {    kCGLineJoinMiter,    kCGLineJoinRound, kCGLineJoinBevel};
Where the first is the default representation of Miter, the second is a smooth join, the third is a miter join.

Draw a Circle

 We can use the  + Bezierpathwithovalinrect:  method to draw a circle, when we pass the  rect  parameter is a square, the draw is a circle. 
  #pragma mark-------Draw a circle-note: To draw a circle, we need to pass the rect parameter must be square Oh! 
-(void) Drawciclepath {
    //pass a square, so you can draw a circle 
     uibezierpath *path = [ Uibezierpath Bezierpathwithovalinrect:cgrectmake (self.frame.size.width-40, self.frame.size.width-40)]; 
      
    /Set Fill color 
     uicolor *fillcolor = [Uicolor greencolor ]; 
     [FillColor set]; 
     [path fill]; 
      
    /Set brush color 
     uicolor *strokecolor = [Uicolor Bluecolor]; 
     [Strokecolor set]; 
      
    //According to the various points we set up 
     [path stroke]; 
} 
    

Draw an Ellipse

We have already drawn the circle, we can use the + bezierPathWithOvalInRect: method to draw the circle, when we pass the rect parameter is the square, draws out is the circle. So if we don't pass the square, then the ellipse is drawn.

Draw Ellipse-(void) Drawovalpath {The pass is not a square, so you can draw an oval circleUibezierpath *path = [Uibezierpath Bezierpathwithovalinrect:CGRectMake, self. frame. size.  Width---  - Height- 40)]; //Set Fill color uicolor *fillcolor = [uicolor greencolor]; [FillColor set]; [Path fill]; //Set brush color uicolor *strokecolor = [uicolor bluecolor]; [Strokecolor set]; //According to the various points we set [path stroke];}               

Draw a rectangle with rounded corners

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
The first factory method is to draw a rectangle, but the rectangle can be drawn with rounded corners. The first parameter is a rectangle, and the second parameter is the fillet size.
The second factory method function is the same, but you can specify a corner to draw a fillet. And like this we can easily giveUIViewExtend the method of adding rounded corners. #pragma mark--------Draw a rectangle with rounded corners
-(void) Drawroundedrectpath {
#if 0
Four of them are rounded corners 10
Uibezierpath *path = [Uibezierpath bezierpathwithroundedrect:cgrectmake (a), self.frame.size.width-40, SELF.FRAME.SIZE.HEIGHT-40) Cornerradius:10];

#else
If you want to draw only one corner is rounded, then we modify the creation method:
Uibezierpath *path = [Uibezierpath bezierpathwithroundedrect:cgrectmake (a), self.frame.size.width-40, self.frame.size.height-40) Byroundingcorners:uirectcornertopright Cornerradii:cgsizemake (20, 20)];
The first parameter is the same as a rectangle, the second parameter is to specify in which direction to draw the fillet, the third parameter is aCGSizeType that specifies the size of the radius in both the horizontal and vertical directions.
#endif



Set Fill Color
Uicolor *fillcolor = [Uicolor Greencolor];
[FillColor set];
[Path fill];

Set Brush color
Uicolor *strokecolor = [Uicolor Bluecolor];
[Strokecolor set];

According to the various points we set
[Path stroke];
}

Arc Drawing

Before drawing an arc, we need to know its reference system, such as (image from the network):

Image

#define Kdegreestoradians (degrees) ((PI * degrees)/180)-(void) Drawarcpath {ConstCGFloat pi =3.14159265359;Cgpoint Center =Cgpointmake (Self. Frame. Size. Width/2,Self. Frame. Size. Height/2); uibezierpath *path = [uibezierpath bezierPathWithArcCenter : Center Radius:100 startangle:0 Endangle:kdegreestoradians ( Span class= "Hljs-number" >135) clockwise:yes]; Path.linecapstyle = Kcglinecapround; Path.linejoinstyle = Kcglinejoinround; Path5.0; uicolor *strokecolor = [uicolor RedColor]; [Strokecolor set]; [Path stroke];} 
 We want to make it clear that the arc parameters startangle and Endangle use radians instead of angles, so we need to convert the usual angles to radians. For, we set the center of the arc to be the center of the control, with a starting angle of 0, which is the east direction, and the end point is the position of the 135 degree corner. If you set the Clockwise:yes to be drawn in a counterclockwise direction, if set to No, 
 the two are exactly the opposite. 
               

Draw the Bezier curve two times

First, learn about control points, such as (Pictures from the network):

Draw two Bezier curves, which are implemented by calling this method:

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
endPoint：终端点<br/>
controlPoint：控制点，对于二次贝塞尔曲线，只有一个控制点

- (void) Drawsecondbezierpath {Uibezierpath *path = [Uibezierpath Bezierpath];First set a starting point [path moveToPoint:Cgpointmake (20,Self. Frame. Size. Height-100)];Add two times curve [path Addquadcurvetopoint:Cgpointmake (Self. Frame. Size. Width-20, self.frame.size.height-100) ControlPoint:cgpointmake (self.frame .size.width/2, 0)]; Path.linecapstyle = Kcglinecapround; Path.linejoinstyle = Kcglinejoinround; Path5.0; uicolor *strokecolor = [uicolor RedColor]; [Strokecolor set]; [Path stroke];}                

Draw the Bezier curve three times

The Bezier curve must pass through the first and the first two points, called the end point, the middle two points, although not necessary, but it plays the role of the shape path of the pin curve, called the control point. For the controller of the three-time Bezier curve, see:

Tip: Its composition is the start endpoint + control point 1+ control point the end endpoint

The following method is to draw three times Bezier curve key method, with three points to draw a curve, general and -moveToPoint: use.

- (void)addCurveToPoint:(CGPoint)endPoint           controlPoint1:(CGPoint)controlPoint1           controlPoint2:(CGPoint)controlPoint2

- (void) Drawthirdbezierpath {Uibezierpath *path = [Uibezierpath Bezierpath];Set start endpoint [path moveToPoint:cgpointmake (20, 150)]; [Path Addcurvetopoint:cgpointmake (300, 150) controlpoint1:cgpointmake ( 0) controlpoint2:cgpointmake ( 160, 250)]; Path.linecapstyle = Kcglinecapround; Path.linejoinstyle = Kcglinejoinround; Path5.0; uicolor *strokecolor = [uicolor RedColor]; [Strokecolor set]; [Path stroke];}                


We need to note that the starting endpoint determined here is (20,150), the terminating endpoint is (300, 150), and the base horizontal direction is consistent. The coordinate of Control point 1 is (160,0), the horizontal direction is equal to near the middle, this parameter can be adjusted.
The coordinates of the control point 2 are (160,250), if the line with two endpoints is a horizontal line, then it is 250-150=100, that is, below the horizontal line 100. This looks like asinfunction.

Basic usage of Bezier curves