iOS 使用貝塞爾曲線繪制路徑

使用貝塞爾曲線繪制路徑

      大多數時候，我們在開發中使用的控件的邊框是矩形，或者做一點圓角，是使得矩形的角看起來更加的圓滑。 但是如果我們想要一個不規則的圖形怎么辦？有人說，叫UI妹子做，不僅省事，還可以趁機接近她們（_:D）。這又時候確實可以。但是如果是一個時刻變動的不規則圖形，這樣如果做成動圖或者剪出很多張圖，再叫UI妹子做的話，似乎也能解決， 但是實際效果吧，呵呵。好吧，iOS中我們其實不需要擔心這個問題。使用UIBezierPath可以很容易的會址出一些復雜的圖形。 

      UIBezierPath 屬於UIkit，可以用於繪制路徑。 說到繪制，大家很快想到了大名鼎鼎的Core Graphics，同學們直接使用 Core Graphics繪制圖形也完全沒有問題，Core Graphics具有更多的繪制途徑，它是一套強大的API，但是其函數之多異常絕對會讓不熟悉的你頭暈腦脹，iOS 很人性化的對 Core Graphics進行封裝。也即是UIBezierPath。這篇文章主要講解下如何使用UIBezierPath結合CAShapeLayer在一個UIView上繪制簡單的路徑。

      對於路徑的繪制兩種方式，一種是填充（fill ），一種是描繪（stroke）。直接上代碼吧，畢竟也不是什么高深的知識。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.userBezier()
    }

    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    
    func userBezier(){
        // 繪制一段圓弧   如果是合起來的就是圓了
        let criclePath: UIBezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: 200, y: 100), radius: 50, startAngle: 0, endAngle: 5.12, clockwise: true)
        criclePath.stroke()
        
        // 繪制一個矩形
        let rectPath: UIBezierPath = UIBezierPath.init(rect: CGRect.init(x: 100, y: 160, width: 50, height: 50))
        criclePath.append(rectPath)

        // 繪制一個橢圓  原理是內接矩形，如果矩形的長寬相等那么繪制的就是圓
        let ovalPath:UIBezierPath = UIBezierPath.init(ovalIn: CGRect.init(x: 200, y: 200, width: 100, height: 60))
        criclePath.append(ovalPath)

        //繪制直線多邊形  可以讓多條直線拼接 組合成復雜的形狀  比如繪制一個三角形
        let trianglePath :UIBezierPath = UIBezierPath.init()
        trianglePath.move(to: CGPoint.init(x: 100, y: 300))  //繪制起始點
        trianglePath.addLine(to: CGPoint.init(x: 100, y: 400))  //從起點繪制一條直線到指定點
        trianglePath.addLine(to: CGPoint.init(x: 250, y: 350))  //
        trianglePath.close()   //閉合路徑
        trianglePath.lineWidth = 3.0
        criclePath.append(trianglePath)

        //添加一個二階的曲線  二階曲線一共是三個點， 起點／終點／折點（控制點）
        let cruvePath :UIBezierPath = UIBezierPath.init()
  
        cruvePath.move(to: CGPoint.init(x: 50, y: 420))
        cruvePath.addQuadCurve(to: CGPoint.init(x: 250, y: 420), controlPoint: CGPoint.init(x: 100, y: 530))
        criclePath.append(cruvePath)

        
        //添加一個三階的曲線  起點 終點  兩個控制點 后面可以無限添加 二階曲線  形成一個很長的三階曲線
        let path :UIBezierPath = UIBezierPath.init()
        path.move(to: CGPoint.init(x: 50, y: 550))
        path.addCurve(to: CGPoint.init(x: 287, y: 550), controlPoint1: CGPoint.init(x: 150, y: 720), controlPoint2: CGPoint.init(x: 215, y: 410))
        path.addQuadCurve(to: CGPoint.init(x: 350, y: 550), controlPoint: CGPoint.init(x: 324, y: 610))
        criclePath.append(path)

        
        //創建一個CAShapelayer  用於顯示這些路徑
        let shPl: CAShapeLayer = CAShapeLayer.init()
        shPl.path = criclePath.cgPath
        shPl.lineWidth = 3.0
        shPl.fillColor = UIColor.clear.cgColor  //填充路徑
        
    
        shPl.strokeColor = UIColor.red.cgColor   //描繪路徑 根據線寬來描繪
        
        self.view.layer.addSublayer(shPl)
        self.view.layer.backgroundColor = UIColor.white.cgColor
        
    }

}

 根據繪制的方式不同，運行下面兩張圖片：