IOS Animation-5: UIBezier

IOS Animation-5: UIBezier

In the previous bolg, you will find that UIBezier always appears, but I have not made too many introductions. Today I will focus on introducing UIBezier. First of all, UIBezier has a lot of content. I am not introducing UIBezier all today, but I will introduce most of the frequently used content. For other content, please refer to the official documentation.

Because there are many contents today, and it may not be easy to understand in some places, I will try my best to make his introduction easier and easier to learn.

First, you can see what you want to talk about today.

  <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Authorization + g9zjwvnk9q8jnzbzl + cq + tcTNvNDOtry75tbGz8LAtKGjPC9wPg0KPHA + authorization + PGltZyBhbHQ9 "here write picture description" src = "http://www.bkjia.com/uploads/allimg/160421/041Z42C0-1.png" title = "\"/>

The UIView class I created teaches PathView, and then creates its object in ViewController.

// Create a PathViewlet pathView = PathView () pathView. frame = CGRect (x: 50, y: 0, width: 350, height: 550) view. addSubview (pathView)

The remaining operations are all in this PathView, and the view is drawn in the drawRect method.

One-time besell Curve

The one-time besell curve is relatively simple and I believe everyone can understand it.

Pentagon

Func creatPentagonPath () {let path = UIBezierPath () path. lineWidth = 2.0 // lineWidth // set the start path. moveToPoint (CGPoint (x: 70.0, y: 20.0) // set the corner point path. addLineToPoint (CGPoint (x: 120.0, y: 40.0) path. addLineToPoint (CGPoint (x: 100.0, y: 90.0) path. addLineToPoint (CGPoint (x: 40.0, y: 90.0) path. addLineToPoint (CGPoint (x: 20.0, y: 40.0) // The last closed path. closePath () path. stroke () // stroke style // path. fill () // fill style}

Explanation: This is the simplest UIBezier, path. moveToPoint () and path. closePath () is required as the starting point and closed curve. The addLineToPoint in the middle is to add each vertex. The five vertices added here constitute a pentagon. The difference between path. stroke () and path. fill () is the stroke style and the fill style. Previously, bolg mentioned the difference between strok and fill.

Rectangle

There is a special Initialization Method for the rectangle, so you do not need to draw it manually.

Func creatRectanglePath () {// create the path let path = UIBezierPath (rect: CGRect (x: 220, y: 30, width: 100, height: 50) path. lineCapStyle =. round // line type path. lineJoinStyle =. miter // corner type path. lineWidth = 2.0 // set the line width path. stroke () // stroke style // path. fill () // fill style}

Explanation: This is also simple. rect is the rectangle, path. lineCapStyle is the line type, and path. lineJoinStyle is the corner type, which is similar to some attributes in CAShapeLayer.

Elliptic

It can also be used to draw a circle. It is a circle when it is split into a square.

Func creatOvalPath () {// the elliptic drawn by ovalInRect is the inner tangent oval of the rectangle drawn by the ovalInRect let path = UIBezierPath (ovalInRect: CGRect (x: 20, y: 120, width: 100, height: 50) path. lineWidth = 2 path. fill ()}

Explanation: Does this seem simpler? The initialization method is different. ovalInRect represents an ellipse and an inner tangent and a rect ellipse.

Arc

    func creatArcPath() {        let path = UIBezierPath(arcCenter: CGPoint(x: 270, y: 120), radius: 50, startAngle: 0, endAngle: CGFloat(M_PI), clockwise: true)        path.lineWidth = 2        path.stroke()    }

Explanation: The parameters respectively specify the center, radius, start angle, end angle, and clockwise direction of the arc.

Secondary besell Curve

This is a little more complicated than a besell curve. The characteristic of the secondary besell curve is that there is a control point.

Func creatQuadCurvePath () {let path = UIBezierPath () // set the start path. moveToPoint (CGPoint (x: 20, y: 210) // The parameters indicate the end point and the intermediate Control Point path. addQuadCurveToPoint (CGPoint (x: 120, y: 210), controlPoint: CGPoint (x: 70, y: 180) // Add an arc. The parameters are the center point, radius, and, start angle, end angle, clockwise path. addArcWithCenter (CGPoint (x: 70, y: 210), radius: 50, startAngle: 0.0, endAngle: CGFloat (M_PI), clockwise: true) path. lineWidth = 2 path. stroke ()}

Explanation: I think all annotations are detailed in path. addQuadCurveToPoint: This is the secondary besell curve. There is a control point (the second parameter) to control the bending degree of this curve. The first parameter is the end point, and of course there is a path. moveToPoint as the starting point.
Through the figure below, we can see in detail what the parameters of the secondary besell curve are.

Cubic besell Curve

Func creatCurvePath () {let path = UIBezierPath () // start path. moveToPoint (CGPoint (x: 220, y: 230) // The parameters indicate the end point and the intermediate Control Point path. addCurveToPoint (CGPoint (x: 320, y: 220), controlPoint1: CGPoint (x: 250, y: 200), controlPoint2: CGPoint (x: 290, y: 250 )) path. lineWidth = 2 path. stroke ()}

Explanation: we can see that the cubic besell curve has a control point more than the quadratic besell curve, as shown in figure

Next, let's take a look at Core Graphics to modify CGPath.

Func creatSingleCGPath () {// create variable CGPath let cgPath = CGPathCreateMutable () CGPathAddEllipseInRect (cgPath, nil, CGRect (x: 20, y: 270, width: 100, height: 50) CGPathAddEllipseInRect (cgPath, nil, CGRect (x: 45, y: 282.5, width: 50, height: 25) let path = UIBezierPath () path. CGPath = cgPath path. usesEvenOddFillRule = true path. lineWidth = 2 path. stroke () // CGPathRelease (cgPath); execute this code for OC}

Explanation: You can use the Core Graphics function to create a variable Path and modify the Path.

CGPath and UIBezierPath

Func creatMixCGPathAndUIBezierPath () {// create the besell curve let path = UIBezierPath (ovalInRect: CGRect (x: 220, y: 270, width: 100, height: 50 )) // obtain CGPath let cgPath = path. CGPath // copy to variable CGPath let mutablePath = CGPathCreateMutableCopy (cgPath )! As CGMutablePathRef // set the start point CGPathMoveToPoint (mutablePath, nil, 245,295) // Add a curve // The cp1x parameter is actually the abbreviation of controlPoint1.x, so the parameter is: Control Point 1, control point 2, end CGPathAddCurveToPoint (mutablePath, nil, 255,270,285,320,295,295) // other functions/* // Add a straight-line CGPathAddLineToPoint (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
  
   
# UnsafePointer
   
    
#>,< # T # x: CGFloat ## CGFloat #>,< # T # y: CGFloat ## CGFloat #>) // parameter 1, vertex array, parameter 2: count the number of points to be drawn CGPathAddLines (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
    
     
# UnsafePointer
     
      
#>,< # T # points: UnsafePointer
      
        # UnsafePointer
       
         #>, <# T # count: Int ## Int #>) // Add the path CGPathAddPath (<# T # path1: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
        
          # UnsafePointer
         
           #>,< # T ## path2: CGPath? # CGPath? #>) // Add the secondary path CGPathAddQuadCurveToPoint (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
          
            # UnsafePointer
           
             #>,< # T # cpx: CGFloat ## CGFloat #>,< # T # cpy: CGFloat ## CGFloat #>,< # T # x: CGFloat #>, <# T # y: CGFloat #>) // Add a rectangle CGPathAddRect (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
            
              # UnsafePointer
             
               #>, <# T # rect: CGRect #>) CGPathAddRects (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
              
                # UnsafePointer
               
                 #>,< # T # rects: UnsafePointer
                
                  # UnsafePointer
                 
                   #>, <# T # count: Int ## Int #>) CGPathAddRoundedRect (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T # transform: UnsafePointer
                  
                    # UnsafePointer
                   
                     #>,< # T ## rect: CGRect ## CGRect #>,< # T ## cornerWidth: CGFloat ## CGFloat #>,< # T ## cornerHeight: CGFloat ## CGFloat #>) // Add the arc CGPathAddArc (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T ## m: UnsafePointer
                    
                      # UnsafePointer
                     
                       #>,< # T # x: CGFloat ## CGFloat #>,< # T # y: CGFloat ## CGFloat #>,< # T # radius: CGFloat ## CGFloat #>,< # T ## startAngle: CGFloat ## CGFloat #>,< # T ## endAngle: CGFloat ## CGFloat #>, <# T # clockwise: Bool #>) CGPathAddRelativeArc (<# T # path: CGMutablePath? # CGMutablePath? #>,< # T # matrix: UnsafePointer
                      
                        # UnsafePointer
                       
                         #>,< # T # x: CGFloat ## CGFloat #>,< # T # y: CGFloat ## CGFloat #>,< # T # radius: CGFloat ## CGFloat #>,< # T ## startAngle: CGFloat ## CGFloat #>,< # T ## delta: CGFloat ## CGFloat #>) */path. CGPath = mutablePath path. lineWidth = 2 path. stroke ()}
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    
   
  

Explanation: There are a lot of content here, so I will not explain them one by one. Actually, the method content is similar to the content described above. The parameters are basically the same as described above. What do you mean by reading it carefully.

Content Control (additional)

Func setUpContext () {let path = UIBezierPath (ovalInRect: CGRect (x: 20, y: 350, width: 100, height: 50) UIColor. redColor (). setStroke () UIColor. orangeColor (). setFill () let ref = UIGraphicsGetCurrentContext () // content translation CGContextTranslateCTM (ref, 20, 20) // content rotation // because I have painted all the images in the same view, anchorPoint is not the center of the current elliptical, so after rotation, the current elliptical will deviate from the position CGContextRotateCTM (ref, CGFloat (-M_PI_4/4); // content scaling CGContextScaleCTM (ref, 0.8, 1.0) path. lineWidth = 2 path. fill () path. stroke ()}

Explanation: in fact, content control will be a huge part of the content, so I will not detail it here.